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