[CSS] 코드 한 줄로 숫자 폭(Width) 고정하기

숫자의 폭이 고정되야할 경우가 있다.

 

고정폭 폰트를 쓰는 것이 근본적인 해결책이겠지만,

디자인상 필요에 의해 가변폭 폰트(예: Pretendard)를 쓰는 경우도 많다.

해결방법

 

font-variant-numeric: tabular-nums;

 

See the Pen Numbers with fixed width by 이지민 (@jimin-lee) on CodePen.

 

간단한 카운트 다운을 만들어봤다.

 

위쪽은 숫자가 바뀜에 따라, 옆 텍스트가 움직이는 반면

 

아래쪽은 숫자가 바뀌더라도 움직이지 않는 것을 볼 수 있다.