CSS에서 등폭 숫자 (Tabular numbers) 사용하기

요약

대부분의 폰트는 숫자마다 너비가 다른 가변 폭 숫자를 사용하지만, CSS의 `tabular-nums` 속성을 사용하면 모든 숫자가 동일한 너비를 갖도록 설정할 수 있습니다. 이를 통해 숫자가 변할 때 전체적인 위치가 흔들리는 현상을 방지하고 오른쪽 정렬을 일정하게 유지할 수 있습니다.

핵심 포인트

• 기본 폰트는 숫자마다 폭이 다른 가변 폭 숫자(proportional numbers)를 사용함
• 가변 폭 숫자는 값이 변할 때 숫자의 위치가 흔들리는 문제를 일으킬 수 있음
• CSS의 `tabular-nums`를 사용하면 각 숫자가 동일한 가로 공간을 차지하게 됨
• 등폭 숫자를 사용하면 데이터 정렬 및 시각적 안정성을 확보할 수 있음