CSS / Reference / tab-size

tab-size는 보존된 탭 문자가 다음 탭 정지 위치까지 이동하는 간격을 정합니다. 스페이스 여러 개의 폭을 바꾸는 속성이 아니며, 탭을 보여 주려면 pre나 white-space 설정으로 공백을 보존해야 합니다.

문법과 주요 값

pre { white-space: pre; tab-size: 4; }

값의 적용 범위와 문법은 MDN의 tab-size 문서에서 확인할 수 있습니다.

실행 예제와 결과 비교

아래 전체 코드를 UTF-8 형식의 tab-size-example.html 파일로 저장한 뒤 브라우저로 여세요. 예제용 CSS는 이 파일 안에만 넣고 사이트 전체 스타일시트에 그대로 붙여 넣지 않습니다.

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>tab-size 비교 예제</title>
<style>
body { margin: 0; color: #20242b; background: #fff; font: 16px/1.7 "Malgun Gothic", sans-serif; }
#demo { padding: 24px; max-width: 820px; margin: auto; }
h1 { font-size: 22px; margin: 0 0 20px; }
.samples { display: flex; flex-wrap: wrap; gap: 24px; }
.label { margin: 0 0 8px; font-weight: 700; }
.target, .reference { font: 16px/1.7 Consolas, monospace; white-space: pre; border: 1px solid #718096; padding: 12px; }
.target { tab-size: 4; }
.reference { tab-size: 8; }
</style>
</head>
<body>
<main id="demo">
<h1>tab-size 적용 비교</h1>
<section class="samples"><div class="a"><p class="label">탭 정지 간격 4</p><div class="target">A	B	C
AB	B	C</div></div><div class="b"><p class="label">탭 정지 간격 8</p><div class="reference">A	B	C
AB	B	C</div></div></section>
</main>
</body>
</html>

각 행의 탭 다음 문자가 탭 정지 위치에 맞춰집니다. 앞에 이미 쓴 문자가 있으므로 탭 하나가 언제나 똑같은 개수의 공백처럼 이동하는 것은 아닙니다.

진짜 탭 문자인지 확인하기

편집기가 Tab 키 입력을 여러 스페이스로 바꾸면 tab-size는 그 스페이스에 영향을 주지 않습니다. 예제에는 실제 탭 문자를 넣었으며 줄바꿈도 보존합니다. 코드 표시에서는 고정폭 글꼴을 함께 사용하면 열 위치를 비교하기 쉽습니다.

자동 줄바꿈과 코드 표시

white-space: normal에서는 탭이 병합되어 차이가 보이지 않을 수 있습니다. pre는 줄을 보존하지만 긴 줄이 넘치므로 코드 영역에 가로 스크롤을 마련하세요. pre-wrap은 감싸기를 허용하므로 복사한 코드와 화면 줄바꿈을 구분해야 합니다.

적용되지 않거나 예상과 다를 때

• 문자열에 탭 문자가 있는지 편집기의 공백 표시 기능으로 확인합니다.
• Computed의 white-space 값이 탭을 보존하는지 확인합니다.

관련 설정을 함께 조정할 때는 white-space의 공백 보존 규칙을 참고하세요.