CSS의 tab-size 속성을 사용하면 탭(tab) 문자가 차지하는 너비를 원하는 크기로 지정할 수 있습니다. 기본적으로 탭 문자는 8칸의 공백으로 표시되지만, 이 속성을 활용하면 코드 들여쓰기나 텍스트 정렬을 상황에 맞게 세밀하게 조정할 수 있습니다.
tab-size 속성이란?
tab-size 속성은 주로 <pre> 태그처럼 공백과 줄바꿈이 그대로 유지되는 요소에서 유용하게 사용됩니다. 값은 숫자(공백 문자 개수) 또는 length 단위(px 등)로 지정할 수 있으며, 숫자를 사용하면 해당 개수만큼의 공백 너비로 탭이 확장됩니다.
사용 예제
아래 예제는 tab-size 속성을 적용하여 탭 문자의 너비를 12로 설정한 코드입니다. 직접 실행해 보면서 결과를 확인해 보세요.
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
tab-size: 12;
}
</style>
</head>
<body>
<h1>The tab-size Property</h1>
<pre id = "demo">
This is demo text.
</pre>
</body>
</html>참고 사항
tab-size 속성은 Chrome, Firefox, Safari, Opera 등 대부분의 최신 브라우저에서 지원됩니다. 다만 Internet Explorer에서는 지원되지 않으므로, 구형 브라우저 호환성이 중요한 프로젝트라면 사용 여부를 신중히 검토해야 합니다.