..

Search

<bdi>

HTML <bdi> 태그


정의 및 특징

<bdi> 태그의 BDI는 Bi-Directional Isolation을 의미하며, 주위의 텍스트들과는 다른 방향으로 써지는 텍스트 영역을 정의할 때 사용합니다.

 

한글이나 영어와 같이 대부분의 언어는 왼쪽부터 시작해서 오른쪽 방향으로(left-to-right, LTR) 텍스트를 나열합니다. 하지만 아랍어(Arabic)와 같은 일부 언어에서는 오른쪽부터 시작하여 왼쪽 방향으로(right-to-left, RTL) 텍스트를 나열합니다.

 

브라우저는 이러한 텍스트의 방향성을 유니코드 양방향 알고리즘(Unicode Bidirectional Algorithm)이라는 알고리즘을 사용하여 처리하게 되는데, 바로 이때 특정 텍스트 영역에 <bdi> 요소를 사용하게 되면 양방향 알고리즘은 해당 텍스트의 방향성을 그 주위에 위치한 다른 텍스트들과는 별도로 처리하게 됩니다.

 

따라서 <bdi> 요소는 텍스트의 방향성을 미리 알 수 없는 사용자에 의해 생성되는 콘텐츠 등을 문서에 포함시킬 때 유용하게 사용됩니다.


예제
<ul>
    <li><bdi>홍길동</bdi> - 1등</li>
    <li><bdi>John Smith</bdi> - 2등</li>
    <li><bdi>تیز سمی</bdi> - 3등</li>
    <li><span>تیز سمی</span> - 3등</li>
</ul>

코딩연습 ▶


지원하는 브라우저 및 버전

태그명

chrome

edge

ie

firefox

safari

opera

<bdi> 16.0 지원하지 않음 지원하지 않음 10.0 지원하지 않음 지원하지 않음

HTML5에서 변경된 사항

<bdi> 태그는 HTML5에서 새롭게 추가된 요소입니다.


DOM 인터페이스


연관 페이지

HTML 의미 요소 수업 ⇒


연습문제