tab-size
탭 문자(\t)의 너비를 설정합니다. 주로 <pre>나 <code> 블록에서 탭 간격을 제어하는 데 사용합니다.
클래스 목록
패턴: tbs{값}{단위} (단위 없이 숫자만 사용하면 스페이스 개수)
| 클래스 | CSS | 설명 |
|---|---|---|
tbs2 | tab-size: 2 | 탭 = 스페이스 2칸 |
tbs4 | tab-size: 4 | 탭 = 스페이스 4칸 (일반적) |
tbs8 | tab-size: 8 | 탭 = 스페이스 8칸 (브라우저 기본값) |
tbs2rem | tab-size: 2rem | 탭 = 20px 너비 |
tbs4rem | tab-size: 4rem | 탭 = 40px 너비 |
시각 데모
세 블록의 글자는 완전히 같고 들여쓰기도 모두 진짜 탭 문자 하나입니다. 다른 것은 탭 폭 값뿐이므로, 같은 코드가 값에 따라 얼마나 다르게 보이는지 바로 비교할 수 있습니다.
tbs2
function greet(name) {
if (!name) {
return 'hello';
}
return 'hello ' + name;
}tbs4
function greet(name) {
if (!name) {
return 'hello';
}
return 'hello ' + name;
}tbs2rem
function greet(name) {
if (!name) {
return 'hello';
}
return 'hello ' + name;
}값이 클수록 중첩된 줄이 오른쪽으로 크게 밀립니다. 좁은 화면에서 가로 스크롤이 생길지 여기서 미리 가늠할 수 있습니다.
사용 예시
<!-- Tab 2 spaces in code block -->
<pre class="tbs2 bg18181B p2rem br8px fs14px">
function hello() {
const msg = "world";
return msg;
}
</pre>
<!-- Tab 4 spaces in code block -->
<pre class="tbs4 bg18181B p2rem br8px fs14px">
function hello() {
const msg = "world";
return msg;
}
</pre>
<!-- Specify exact width in rem units -->
<code class="tbs2rem wspw">Tab characters are displayed with 20px width</code>클래스별 상세
tbs2tab-size: 2
탭 한 칸을 스페이스 두 칸 폭으로 표시합니다. 문서 사이트의 좁은 코드 카드나 사이드바 스니펫처럼 가로 공간이 부족한 자리에 적합합니다.
<!-- Compact code sample inside a docs card -->
<pre class="tbs2 bg18181B p2rem br8px fs13px oxa">
<code>const config = {
retries: 3,
timeout: 500
};</code>
</pre>tbs4tab-size: 4
탭 한 칸을 스페이스 네 칸 폭으로 표시합니다. 대부분의 스타일 가이드가 전제하는 폭이므로, 원본 코드가 탭으로 들여쓰기된 경우 가장 무난한 선택입니다.
<!-- Matches the four-space convention most style guides assume -->
<pre class="tbs4 bg18181B p2rem br8px fs14px oxa">
<code>def handler(event):
if event.ok:
return 200
return 500</code>
</pre>tbs8tab-size: 8
브라우저 기본값과 같은 여덟 칸입니다. 부모에서 다른 값을 지정해 둔 상황에서 원래 폭으로 되돌릴 때 명시적으로 씁니다.
<!-- Browser default; state it explicitly when overriding a parent -->
<pre class="tbs8 bg18181B p2rem br8px fs14px oxa">
<code>MAKEFILE:
echo "tabs are meaningful here"</code>
</pre>tbs2remtbs4remtab-size: length
글자 수가 아니라 길이로 탭 폭을 고정합니다. 글꼴 폭에 영향을 받지 않으므로 로그나 표처럼 열을 정확히 맞춰야 하는 출력에 유리합니다.
<!-- Fixed visual width instead of a character count -->
<pre class="tbs2rem bg18181B p2rem br8px fs14px oxa">
<code>col1 col2 col3
a bb ccc</code>
</pre>
<!-- Wider stops for deeply nested output -->
<pre class="tbs4rem bg18181B p2rem br8px fs14px oxa">
<code>root child leaf</code>
</pre>실전 예시 — 로그 뷰어
탭으로 열을 구분한 로그를 좁은 폭으로 보여 주는 패널입니다. 탭 폭을 좁게 잡아 한 줄이 접히거나 가로로 넘치는 것을 줄입니다.
<!-- Log and diff viewer: tabs stay narrow so lines fit -->
<section class="bg18181B b1pxsolid27272A br8px oh">
<header class="df jcsb aic py12px px16px bb1pxsolid27272A">
<span class="fs13px fw600 cFAFAFA">server.log</span>
<span class="fs12px c71717A">tab-size 2</span>
</header>
<pre class="tbs2 wsp oxa p16px fs13px c71717A lh1-6">
<code>12:04:11 INFO request accepted
12:04:11 WARN retry scheduled
12:04:12 ERROR upstream timeout</code>
</pre>
</section>팁 / 주의사항
진짜 탭 문자에만 적용된다
이 속성은 탭 문자 하나의 폭만 바꿉니다. 원본이 스페이스로 들여쓰기되어 있다면 값을 아무리 바꿔도 화면은 그대로입니다. 들여쓰기가 무엇으로 되어 있는지부터 확인하세요.
공백을 보존하는 요소에서만 보인다
일반 문단에서는 탭이 공백 하나로 축약되므로 효과가 사라집니다. 공백을 보존하는 표시 방식이 적용된 요소 안에서만 의미가 있습니다.
숫자와 길이는 계산 기준이 다르다
숫자 값은 스페이스 개수를 기준으로 하므로 글꼴이 바뀌면 실제 폭도 바뀝니다. 길이 값은 글꼴과 무관하게 고정되므로 열 정렬이 중요하다면 길이 쪽이 안전합니다.
복사한 코드의 들여쓰기는 바뀌지 않는다
화면에 보이는 폭만 달라질 뿐 원본 문자는 그대로입니다. 사용자가 코드를 복사하면 탭 문자가 그대로 복사되므로, 붙여넣는 편집기 설정에 따라 다시 다르게 보입니다.
pre/code에서만 효과 있음
tab-size는 white-space가 pre 또는 pre-wrap인 요소에서만 동작합니다. 일반 텍스트에서는 탭 문자가 공백으로 축약됩니다.