HTML DOM Style tabSize 속성 – 탭 문자 길이 설정 및 반환 방법

HTML DOM Style의 tabSize 속성은 HTML 문서에서 탭(tab) 문자가 차지하는 공간의 길이를 가져오거나 수정하는 데 사용됩니다. 이 속성을 활용하면 <pre> 태그처럼 들여쓰기와 공백이 그대로 표시되는 요소에서 탭 간격을 자유롭게 조절할 수 있습니다.

문법(Syntax)

tabSize 속성의 기본 문법은 다음과 같습니다.

1. tabSize 값 반환하기

object.tabSize

2. tabSize 값 변경하기

object.tabSize = "value"

value에 지정할 수 있는 값은 아래 표와 같습니다.

값	설명
initial	해당 속성 값을 브라우저의 기본값으로 되돌립니다.
inherit	부모 요소로부터 속성 값을 상속받습니다.
length	탭 문자의 길이를 px, cm 등의 단위로 직접 지정합니다.
number	하나의 탭 문자가 표시될 때 사용할 공백 문자의 개수를 숫자로 지정합니다.

예제(Example)

다음 예제는 버튼을 클릭했을 때 <pre> 요소의 tabSize 값을 20으로 변경하는 코드입니다.

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        height: 100vh;
    }
    .btn {
        background: #db133a;
        border: none;
        height: 2rem;
        border-radius: 2px;
        width: 40%;
        display: block;
        color: #fff;
        outline: none;
        cursor: pointer;
        margin: 1rem 0;
    }
    .square {
        width: 100px;
        height: 100px;
        background: #db133a6b;
        position: relative;
    }
    .show {
        font-size: 1.2rem;
        margin: 1rem 0;
    }
</style>
<body>
<h1>DOM Style tabSize Property Demo</h1>
<pre>I'm pre element.</pre>
<button onclick="set()" class="btn">Change tabSize</button>
<script>
    function set() {
        document.querySelector('pre').style.tabSize = "20";
    }
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 화면을 확인할 수 있습니다.

HTML DOM Style tabSize 속성 – 탭 문자 길이 설정 및 반환 방법

화면에 있는 “Change tabSize” 버튼을 클릭하면 <pre> 요소의 탭 크기가 즉시 변경되는 것을 볼 수 있습니다.

HTML DOM Style tabSize 속성 – 탭 문자 길이 설정 및 반환 방법

정리

tabSize 속성은 주로 코드 블록이나 서식이 유지되는 텍스트를 다룰 때 유용합니다. 숫자 값뿐 아니라 CSS에서 지원하는 길이 단위(length)도 함께 사용할 수 있으며, initial과 inherit 키워드를 통해 기본값 복원이나 부모 요소 상속도 손쉽게 처리할 수 있습니다.