tab-size

CSS Reference

작성일 2024-09-11 최근 수정일 2026-10-25

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

문법과 주요 값

속성	초기값	상속	주요 적용 조건
`tab-size`	8	예	모든 요소; 실제 그림·텍스트·상자의 존재 조건은 본문에서 확인

초기값은 브라우저 기본 스타일시트가 HTML 요소에 적용한 값과 같다는 뜻이 아닙니다. 실제 값은 개발자 도구의 Computed에서 확인하세요.

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

값 또는 구분	동작과 선택 기준
`8`	초기 숫자 값; 탭 정지 간격을 지정
`4`	글꼴의 공백 폭을 기준으로 네 칸 간격
`2`	더 좁은 탭 정지 간격
`길이 값`	고정 길이의 탭 정지 간격 지정

값과 적용 조건은 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은 감싸기를 허용하므로 복사한 코드와 화면 줄바꿈을 구분해야 합니다.

한 가지 설정씩 바꾸어 확인하기

앞의 전체 코드를 저장한 예제 파일을 사용합니다. 지정한 선택자의 CSS만 변경하고, 서로 다른 비교 조건을 한꺼번에 바꾸지 않습니다.

편집기의 공백 표시 기능을 켜 실제 탭 문자인지 확인합니다. 같은 문자열에서 tab-size만 4/8로 바꾸어 탭 뒤 열 위치를 비교하고 복구합니다.
탭 하나를 스페이스 네 개로 바꾸면 tab-size 변경이 그 스페이스를 다시 조정하지 않습니다. 차이를 확인한 뒤 원래 탭 문자로 복구하고 파일을 UTF-8로 저장합니다.

문자 크기·줄 높이·서체를 함께 조정하려면 글꼴, 글자 크기, 굵기, 줄 간격 설정하기를 참고하세요. 본문의 조건과 함께 비교할 관련 속성은 white-space입니다.

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

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

CSS Reference