HTML DOM 스타일 unicodeBidi 속성 – 구문, 속성 값, 예제 총정리

HTML DOM의 style unicodeBidi 속성은 direction 속성과 함께 사용되어, 하나의 HTML 문서 안에서 여러 언어(예: 아랍어, 히브리어 등 오른쪽에서 왼쪽으로 읽는 언어)를 지원하기 위해 텍스트 방향을 재정의(override)할지 여부를 반환하거나 설정합니다.

구문(Syntax)

다음은 unicodeBidi 속성의 기본 구문입니다 −

unicodeBidi 값 반환하기

object.style.unicodeBidi

unicodeBidi 값 설정하기

object.style.unicodeBidi = "value"

속성 값(Values)

value에 지정할 수 있는 값은 다음과 같습니다 −

값	설명
inherit	부모 요소로부터 이 속성 값을 상속받습니다.
initial	이 속성 값을 기본값으로 설정합니다.
normal	추가적인 임베딩(embedding) 수준을 적용하지 않습니다.
embed	추가적인 임베딩 수준을 적용합니다.
bidi-override	추가적인 임베딩 수준을 적용하고, direction 속성 값에 따라 텍스트 순서를 강제로 재배열합니다.

예제(Example)

HTML DOM style unicodeBidi 속성의 실제 사용 예를 살펴보겠습니다 −

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        color: #000;
        background: lightblue;
        height: 100vh;
        text-align: center;
    }
    .btn {
        background: #db133a;
        border: none;
        height: 2rem;
        border-radius: 2px;
        width: 40%;
        display: block;
        color: #fff;
        outline: none;
        cursor: pointer;
        margin: 1rem auto;
    }
</style>
</head>
<body>
<h1>DOM Style unicodeBidi 속성 예제</h1>
<p style="direction:ltr">This is a paragraph element with some dummy text.</p>
<button onclick="add()" class="btn">Set unicodeBidi</button>
<script>
    function add() {
        document.querySelector('p').style.direction = "rtl";
        document.querySelector('p').style.unicodeBidi = "bidi-override";
    }
</script>
</body>
</html>

출력 결과(Output)

위 코드를 실행하면 다음과 같은 출력 결과가 나타납니다 −

HTML DOM 스타일 unicodeBidi 속성 – 구문, 속성 값, 예제 총정리

“Set unicodeBidi” 버튼을 클릭하면 자바스크립트가 실행되어 단락(p) 요소의 direction 값이 rtl로 변경되고, unicodeBidi CSS 속성이 bidi-override로 설정됩니다.

HTML DOM 스타일 unicodeBidi 속성 – 구문, 속성 값, 예제 총정리