[프로젝트] tabular-nums 사용하여 숫자를 고정된 폭으로 표시하기

문제

강의 수강 페이지 구현 중, 챕터 리스트를 렌더링 해주는데,

아래와 같이 1과 2가 차지하는 폭이 달라 미묘하게 정렬이 이상했다

빨간 선은 내가 그은 것..

 

해결

그래서 해결한 방법

tabular-nums 클래스 추가하기(tailwindCSS 기준)

CSS font-variant-numeric 속성 중 하나로 다른 속성은 아래 문서에 잘 정리되어 있다

css-font-variant-numeric-속성

 

결과