웹 페이지에서 탭(tab) 문자가 차지하는 공간의 크기를 직접 제어하고 싶다면 CSS의 tab-size 속성을 활용할 수 있습니다. 이 속성은 탭 문자에 할당되는 공백의 너비를 지정하며, 코드 블록이나 들여쓰기가 많은 텍스트를 다룰 때 특히 유용합니다.
tab-size 속성의 기본 개념
tab-size 속성은 탭 하나가 차지하는 공간의 길이를 숫자(공백 문자 수 기준) 또는 길이 단위로 설정합니다. 기본값은 대부분의 브라우저에서 8입니다. Firefox와 같은 일부 브라우저에서는 호환성을 위해 -moz-tab-size 접두사를 함께 사용하는 것이 좋습니다.
예제 1: 탭 크기를 32로 설정하기
아래 예제에서는 두 번째 문단에만 tab-size 값을 32로 적용하여, 같은 텍스트라도 탭 크기에 따라 들여쓰기 너비가 어떻게 달라지는지 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: flex;
flex-direction: column;
}
p {
white-space: pre;
}
p:last-of-type {
tab-size: 32;
-moz-tab-size: 32;
}
</style>
</head>
<body>
<p> Ut sed felis lobortis, fermentum magna vitae, imperdiet lectus.</p>
<p> Ut sed felis lobortis, fermentum magna vitae, imperdiet lectus.</p>
</body>
</html>실행 결과
위 코드를 실행하면 첫 번째 문단은 기본 탭 크기가 적용되고, 두 번째 문단은 탭이 32자 공백만큼 확장되어 들여쓰기 간격이 훨씬 넓게 표시됩니다.
예제 2: 탭 크기를 1로 줄이기
반대로 tab-size 값을 작게 설정하면 탭 간격이 좁아집니다. 아래 예제에서는 문단의 탭 크기를 1로 지정하여 최소한의 공백으로 표현한 모습을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
pre {
margin: 2%;
box-shadow: inset 0 0 12px lime;
}
p {
background: lavender;
tab-size: 1;
-moz-tab-size: 1;
}
</style>
</head>
<body>
<pre>
4 tabs of size 1 paragraph
.|.|.|.
<p>
Ut sed felis lobortis, fermentum magna vitae, imperdiet lectus.
</p>
</pre>
</body>
</html>실행 결과
위 코드를 실행하면 라벤더 배경의 문단에서 탭이 공백 1칸만큼만 적용되어, 매우 촘촘한 들여쓰기 결과를 확인할 수 있습니다.
마무리 정리
tab-size 속성은 white-space: pre처럼 공백과 탭이 그대로 유지되는 요소에서 의미 있게 동작합니다. 코드 에디터 스타일의 화면을 구현하거나, 들여쓰기 규칙을 시각적으로 통일해야 하는 경우 이 속성을 활용하면 별도의 스페이스 문자 변환 없이도 깔끔한 레이아웃을 만들 수 있습니다.