🧮 숫자 표 정렬 가이드 | 열 폭을 얼마로 잡을까?

정수부 최대 자릿수

자리

소수부 자릿수 (0 가능)

자리

천단위 구분기호

통화·단위 기호 자릿수 (0 가능)

칸

글자 크기 (px)

숫자 글리프 폭 (em 대비)

구분기호·소수점 폭 (em 대비, 선택)

셀 좌우 패딩 (px, 한쪽)

붙여 쓸 CSS

계산 상세

항목	값

font-variant-numeric: tabular-nums 는 숫자 글리프끼리 폭을 맞춰 주므로 자릿수가 같으면 열이 흔들리지 않습니다. 다만 쉼표와 소수점은 그 대상이 아니라 폭이 따로 있어 입력으로 받습니다(비우면 숫자 폭과 같다고 가정하고 그렇게 표시합니다). 소수점 정렬은 자릿수를 고정해 우측 정렬하는 방법이 실무 방법이며, 문자 기준 정렬은 브라우저 지원이 넓지 않습니다(2026년 10월 기준).

숫자 표 자릿수 정렬 가이드 사용법

표 안의 숫자가 줄마다 좌우로 흔들리면 비교가 어렵습니다. 원인은 두 가지인데, 폰트의 숫자 폭이 글리프마다 다른 경우와 자릿수가 들쭉날쭉한 경우입니다. 이 도구는 자릿수·구분기호·기호 칸 수로 열이 필요로 하는 최소 폭을 px 로 계산하고, tabular-nums 와 우측 정렬을 담은 CSS 를 만들어 줍니다.

열 폭은 (숫자 칸 × 숫자 폭 + 기호 칸 × 기호 폭) × 글자 크기 + 패딩 × 2 로 계산합니다. 천단위 구분기호 개수는 (정수부 자릿수 − 1) ÷ 3 의 내림이고, 소수점이 있으면 기호 칸이 하나 더 늘어납니다. 가장 긴 표시 예시를 같은 자릿수로 만들어 함께 보여 줍니다. 2026년 10월 기준입니다.

숫자 글리프 폭은 폰트마다 달라 입력으로 받습니다. 쉼표·소수점 폭도 tabular-nums 의 대상이 아니라 따로 입력받고, 비우면 숫자 폭과 같다고 가정했다는 사실을 결과에 적습니다. 글리프 폭 자동 측정, 음수 부호·괄호 표기, 단위 접미사 줄바꿈은 다루지 않으니 최종 열 폭은 실제 표에서 확인하세요.

자주 묻는 질문

tabular-nums 를 켜면 열이 안 흔들리나요?

숫자 글리프끼리는 폭이 맞아 자릿수가 같으면 흔들리지 않습니다. 다만 쉼표와 소수점은 그 대상이 아니고, 자릿수가 들쭉날쭉하면 여전히 끝이 안 맞으므로 자릿수를 고정해 우측 정렬하는 쪽이 확실합니다.

소수점을 기준으로 정렬하려면 어떻게 하나요?

소수부 자릿수를 고정한 뒤 우측 정렬하면 소수점이 한 줄로 맞습니다. 문자 기준 정렬인 text-align: "." 은 명세에는 있으나 브라우저 지원이 넓지 않아 기본 방법으로 쓰기 어렵습니다.

구분기호 개수는 어떻게 세나요?

정수부 자릿수에서 1을 뺀 뒤 3으로 나눈 몫을 버림한 값입니다. 네 자리면 1개, 여섯 자리면 1개, 일곱 자리면 2개가 됩니다. 결과 표에 식과 함께 개수를 출력합니다.

🧮숫자 표 자릿수 정렬 가이드

붙여 쓸 CSS

계산 상세

관련된 도구

본문 한 줄 글자수·문단 폭 계산기

그래프 축·눈금 간격 설계 가이드

숫자 표 자릿수 정렬 가이드 사용법

자주 묻는 질문

붙여 쓸 CSS

계산 상세

관련된 도구

본문 한 줄 글자수·문단 폭 계산기

그래프 축·눈금 간격 설계 가이드

숫자 표 자릿수 정렬 가이드 사용법

자주 묻는 질문

같은 카테고리 도구