HTML DOM Bdo dir 속성 – 텍스트 방향을 자유롭게 제어하는 방법

HTML DOM의 Bdo dir 속성은 HTML <bdo> 요소와 연관된 속성입니다. 여기서 bdo는 Bi-Directional Override(양방향 재정의)의 약자로, <bdo> 태그는 기본값인 왼쪽에서 오른쪽으로 흐르는 현재 텍스트 방향을 강제로 변경할 때 사용됩니다.

bdo dir 속성은 <bdo> 요소의 dir 속성 값을 설정하거나 반환하는 역할을 합니다. 특히 dir 속성은 <bdo> 요소에서 필수 속성이며, 텍스트가 흐르는 방향을 지정합니다.

문법(Syntax)

dir 속성 설정하기

bdoObject.dir = "ltr|rtl"

여기서 ltr은 왼쪽에서 오른쪽(left-to-right) 텍스트 방향을 의미하고, rtl은 오른쪽에서 왼쪽(right-to-left) 텍스트 방향을 의미합니다.

dir 속성 값 가져오기

bdoObject.dir

예제(Example)

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

<!DOCTYPE html>
<html>
<body>
<h3><bdo id="myBdo" dir="rtl">RIGHT-TO-LEFT</bdo></h3>
<p>아래 버튼을 클릭하면 위 텍스트의 방향을 확인하거나 변경할 수 있습니다</p>
<button onclick="getDirection()">GET DIRECTION</button>
<button onclick="setDirection()">SET DIRECTION</button>
<p id="Sample"></p>
<script>
    function getDirection() {
        var x = document.getElementById("myBdo").dir;
        document.getElementById("Sample").innerHTML ="The text direction is from " + x;
    }
    function setDirection(){
        document.getElementById("myBdo").dir="ltr";
    }
</script>
</body>
</html>

실행 결과(Output)

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

HTML DOM Bdo dir 속성 – 텍스트 방향을 자유롭게 제어하는 방법

GET DIRECTION 버튼 클릭 시

HTML DOM Bdo dir 속성 – 텍스트 방향을 자유롭게 제어하는 방법

SET DIRECTION 버튼 클릭 시

HTML DOM Bdo dir 속성 – 텍스트 방향을 자유롭게 제어하는 방법

코드 상세 설명

위 예제의 동작 과정을 단계별로 살펴보겠습니다.

1. bdo 요소 생성

먼저 <h3> 요소 내부에 dir 속성 값을 "rtl"로 설정한 <bdo> 요소를 생성했습니다.

<h3><bdo id="myBdo" dir="rtl">RIGHT-TO-LEFT</bdo></h3>

이렇게 하면 "RIGHT-TO-LEFT"라는 텍스트가 오른쪽에서 왼쪽으로 표시됩니다.

2. 버튼 생성 및 함수 연결

다음으로 각각 getDirection() 함수와 setDirection() 함수를 실행하는 두 개의 버튼(GET DIRECTION, SET DIRECTION)을 만들었습니다.

<button onclick="getDirection()">GET DIRECTION</button>
<button onclick="setDirection()">SET DIRECTION</button>

3. getDirection() 함수 – 방향 값 읽기

getDirection() 함수는 id가 "myBdo"인 요소, 즉 <bdo> 요소를 가져옵니다. 그런 다음 해당 요소에서 얻은 dir 속성 값을 변수 x에 할당하고, 이 값을 id가 "Sample"인 문단에 출력합니다.

function getDirection() {
    var x = document.getElementById("myBdo").dir;
    document.getElementById("Sample").innerHTML ="The text direction is from " + x;
}

4. setDirection() 함수 – 방향 값 변경

setDirection() 함수는 id가 "myBdo"인 요소를 가져와 dir 속성 값을 "ltr", 즉 왼쪽에서 오른쪽으로 설정합니다. ltr은 브라우저의 기본 텍스트 방향이기도 합니다.

function setDirection(){
    document.getElementById("myBdo").dir="ltr";
}

정리

HTML DOM의 bdo dir 속성을 활용하면 자바스크립트만으로 텍스트의 흐름 방향을 동적으로 읽거나 변경할 수 있습니다. 아랍어나 히브리어처럼 오른쪽에서 왼쪽으로 쓰는 언어(RTL 언어)를 다룰 때 특히 유용하게 활용할 수 있습니다.