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 너비 |
사용 예시
<!-- 코드 블록에서 탭 2칸 -->
<pre class="tbs2 bg18181B p2rem br8px fs14px">
function hello() {
const msg = "world";
return msg;
}
</pre>
<!-- 코드 블록에서 탭 4칸 -->
<pre class="tbs4 bg18181B p2rem br8px fs14px">
function hello() {
const msg = "world";
return msg;
}
</pre>
<!-- rem 단위로 정확한 너비 지정 -->
<code class="tbs2rem wspw">탭 문자가 20px 너비로 표시됩니다</code>팁 & 주의사항
pre/code에서만 효과 있음
tab-size는 white-space가 pre 또는 pre-wrap인 요소에서만 동작합니다. 일반 텍스트에서는 탭 문자가 공백으로 축약됩니다.