HTML DOM의 direction 속성은 요소 내 텍스트의 진행 방향을 지정하거나 현재 설정된 텍스트 방향을 반환하는 데 사용됩니다. 이 속성은 CSS의 direction 속성에 대응하며, 아랍어나 히브리어처럼 오른쪽에서 왼쪽으로 읽는 언어(RTL)를 처리할 때 특히 유용합니다. 기본값은 ltr(left to right, 왼쪽에서 오른쪽)입니다.
문법
direction 속성을 설정하는 기본 문법은 다음과 같습니다.
object.style.direction = "ltr|rtl|initial|inherit"
속성 값 설명
direction 속성에 사용할 수 있는 값과 그 의미는 아래 표와 같습니다.
| 값 | 설명 |
|---|---|
| ltr | 기본값으로, 텍스트가 왼쪽에서 오른쪽으로 흐릅니다. |
| rtl | 텍스트가 오른쪽에서 왼쪽으로 흐릅니다. |
| initial | 이 속성을 브라우저의 기본(초기) 값으로 설정합니다. |
| inherit | 부모 요소의 속성 값을 그대로 상속받습니다. |
그럼 direction 속성이 실제로 어떻게 동작하는지 예제를 통해 살펴보겠습니다.
예제
아래 예제는 버튼을 클릭하면 span 요소 안의 텍스트 방향이 왼쪽에서 오른쪽(ltr)에서 오른쪽에서 왼쪽(rtl)으로 바뀌도록 구현한 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
div,span {
margin: 3px;
padding: 4px;
}
div{
height: 50px;
width: 540px;
border: 2px solid black;
}
span {
float: left;
width: 500px;
height:40px;
background-color: lightblue;
}
</style>
<script>
function changeDir(){
document.getElementById("DIV1").style.direction="rtl";
document.getElementById("Sample").innerHTML="The above text direction is now right to left";
}
</script>
</head>
<body>
<div id="DIV1">
<span>THIS IS SOME TEXT INSIDE A SPAN ELEMENT.</span>
</div>
<p>Change the above text direction present inside the span element by clicking the below button</p>
<button onclick="changeDir()">Change Text Direction</button>
<p id="Sample"></p>
</body>
</html>
실행 결과
페이지를 처음 열면 텍스트가 기본 방향인 왼쪽에서 오른쪽으로 표시됩니다.
이제 "Change Text Direction" 버튼을 클릭하면 자바스크립트 함수가 실행되어 텍스트 방향이 오른쪽에서 왼쪽(rtl)으로 변경되고, 그 결과가 아래 문단에 출력됩니다.
이처럼 direction 속성을 활용하면 자바스크립트만으로도 페이지의 텍스트 흐름 방향을 동적으로 제어할 수 있습니다. 다국어 웹사이트를 개발할 때 RTL 언어 지원을 위해 꼭 알아두면 좋은 속성입니다.