HTML DOM dir 속성 완벽 정리 – 텍스트 방향 설정 방법

HTML DOM dir 속성이란?

HTML DOM의 dir 속성은 요소의 텍스트 방향(text direction)을 변경하는 데 사용됩니다. 기본적으로 텍스트는 왼쪽에서 오른쪽(ltr)으로 표시되지만, dir 속성을 활용하면 오른쪽에서 왼쪽(rtl) 또는 자동(auto)으로 변경할 수 있습니다.

dir 속성은 특정 요소의 dir 속성값을 설정(set)하고 반환(return)하는 역할을 하며, 반환되는 값은 항상 문자열(string) 타입입니다.

문법(Syntax)

dir 속성을 설정하는 기본 문법은 다음과 같습니다.

HTMLElementObject.dir = "ltr|rtl|auto"

각 값의 의미는 아래와 같습니다.

ltr : 왼쪽에서 오른쪽(left to right) 방향으로, 기본 텍스트 방향입니다.
rtl : 오른쪽에서 왼쪽(right to left) 방향입니다.
auto : 텍스트 방향이 콘텐츠 내용에 따라 결정되며, 일반적으로 웹 브라우저가 자동으로 판단합니다.

예제(Example)

HTML DOM dir 속성의 실제 사용 예제를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<body>
<h2>HTML DOM dir property</h2>
<p id="Sample">This is a sample text</p>
<button onclick="changeDir()">Change Dir</button>
<script>
    function changeDir() {
        document.getElementById("Sample").dir = "rtl";
    }
</script>
<p>Clicking on the above button will change the text direction</p>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

HTML DOM dir 속성 완벽 정리 – 텍스트 방향 설정 방법

여기서 "Change Dir" 버튼을 클릭하면 텍스트 방향이 즉시 변경됩니다.

HTML DOM dir 속성 완벽 정리 – 텍스트 방향 설정 방법

코드 상세 설명

먼저, 사용자가 클릭하면 changeDir() 함수를 실행하는 "Change Dir" 버튼을 생성했습니다.

<button onclick="changeDir()">Change Dir</button>

changeDir() 함수는 getElementById() 메서드를 통해 id가 "Sample"인 단락(<p>) 요소를 가져온 뒤, 해당 요소의 dir 속성값을 rtl(오른쪽에서 왼쪽)로 설정합니다. 그 결과 화면의 텍스트가 오른쪽에서 왼쪽 방향으로 표시됩니다.

function changeDir() {
    document.getElementById("Sample").dir = "rtl";
}

이처럼 dir 속성을 활용하면 자바스크립트만으로도 페이지 내 특정 요소의 텍스트 방향을 동적으로 제어할 수 있어, 다국어 웹사이트나 아랍어·히브리어처럼 오른쪽에서 왼쪽으로 읽는 언어(RTL 언어)를 지원할 때 특히 유용합니다.