CSS에서 tab-size 속성을 사용하면 탭(tab) 문자가 차지하는 너비를 원하는 대로 조절할 수 있습니다. 이 속성은 특히 <pre> 태그처럼 들여쓰기와 공백이 그대로 유지되는 요소에서 코드나 텍스트의 정렬을 다듬을 때 유용합니다.
tab-size 속성의 기본 개념
기본적으로 브라우저는 탭 문자를 공백 8개 크기로 처리하지만, tab-size 속성에 숫자(공백 문자 개수) 또는 px, cm 같은 길이 단위 값을 지정하여 이 간격을 변경할 수 있습니다.
예제 코드
아래 예제는 tab-size 속성을 활용해 탭 문자의 너비를 12로 설정하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
tab-size: 12;
}
</style>
</head>
<body>
<h1>tab-size 속성 예제</h1>
<pre id = "demo">
This is demo text.
</pre>
</body>
</html>참고 사항
tab-size 속성은 대부분의 최신 브라우저에서 지원되며, Firefox 구버전과의 호환성을 위해 -moz-tab-size 접두사를 함께 사용하는 것이 좋습니다. 코드 에디터 스타일의 웹 페이지나 문서 포맷팅을 구현할 때 활용하면 훨씬 깔끔한 결과물을 얻을 수 있습니다.