코딩의 시작, TCP School

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>

코딩연습 ▶