주섬주섬 코딩, 소소하지만 꾸준히 쌓아가는 개발 기록...

타이머, 숫자 가변폭 폰트를 고정폭 폰트로 font-variant-numeric CSS 타이머 UI에서 숫자 값을 감싼 wrapper이 움직이는 문제가 있었다.이유는 날짜와 시간이 동적으로 들어가기때문에 고정폭을 적용하지 않은 UI였고, 이 때문에 발생했다.동영상을 잘보면 미세하게 끝이 움직인다. 적용 전 왜 이런 이슈가 생기는 걸까?고정폭 폰트, 가변폭 폰트가 각각 존재하기 때문이다.말 그대로 고정폭 폰트는 각 글자가 동일한 폭을 차지하며 가변폭은 글자의 폭이 동일하지 않는 폰트를 말한다. 이때는 어떻게 고정폭으로 적용할까?아래 CSS만 적용하면 바로 해결된다. *물론 사용하는 폰트가 OpenType 포맷이어야함font-variant-numeric: tabular-nums; 적용하고나니 숫자모두 동일한..

[웹폰트] 올바른 방법으로 로딩하자. - 사이트 로딩 속도 개선 웹폰트 용량은 생각보다 크다. 이미지는 경량화하는데 폰트는 왜 안하는가? 서버에 올려 사용하는 것은 추천하지 않는다. 안정적이지만 용량이 매우 크기때문이다. 웹폰트 로드방식 링크 CSS import 웹폰트 로더 link css 파일보다 앞에 link를 추가한다. css 파일보다 먼저 로드할 수 있다. CSS import 로딩이 느리다. @import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css); webfont.js 세밀한 컨트롤이 가능하다. 웹폰트 로더를 통한 [동기] 방식 비동기 방식에 비해 렌더링이 느림 폰트가 먼저 로드되게하기 위해서는 동기방식을 사용해야한다. 웹폰트 로더..