[CSS] 사용하는 글꼴의 숫자 폭이 일정하지 않을때 해결방법

안녕하세요 :)

 

작업 도중에 아래와 같이 사용하는 글꼴의 숫자 폭이 일정하지 않아 깔끔하게 정렬하는 데 문제를 겪고 있다면,

그 문제를 해결 방법에 대해 포스팅하려고 합니다.

한동안 이 문제로 고생을 했는데, 어느 날 디자이너님께서 아래 참조 블로그 글을 보고 공유 주셨더라고요. (디자이너님께 커피를 대접해 드려야겠습니다 허허)

 

위 문제는 폰트가 가변글꼴일 때 나타납니다. 고정글꼴이 아니라 가변글꼴이기 때문에 숫자의 너비값이 저마다 다른 것이지요. 해결방법은 정말 간단했습니다.

 

  font-variant-numeric: tabular-nums;

 

위 속성을 부여하면 숫자가 같은 폭을 가지게 됩니다.

이런 기본적인 CSS도 모르다니... 공부를 더 열심히 해야할 것 같습니다.

 

 

 

참조: https://velog.io/@aneb/css-%EA%B0%80%EB%B3%80%ED%8F%AD-%ED%8F%B0%ED%8A%B8%EB%A5%BC-%EA%B3%A0%EC%A0%95%ED%8F%AD-%ED%8F%B0%ED%8A%B8%EB%A1%9C-%EB%B0%94%EA%BE%B8%EB%8A%94-%EB%B0%A9%EB%B2%95

[css] 가변폭 폰트를 고정폭 폰트로 바꾸는 방법