HTML bdi 태그란?
HTML에서 <bdi>(Bidirectional Isolation) 태그는 양방향 텍스트 서식에서 주변 텍스트와 쓰기 방향이 다른 텍스트를 격리하여 표현할 때 사용합니다. 아랍어, 히브리어처럼 오른쪽에서 왼쪽으로 읽는 언어(RTL)와 왼쪽에서 오른쪽으로 읽는 언어(LTR)가 한 문서에 섞여 있을 때, <bdi> 태그로 감싼 부분은 주변 텍스트의 방향성 영향을 받지 않고 독립적으로 렌더링됩니다.
특히 사용자 입력값이나 데이터베이스에서 동적으로 가져온 텍스트처럼 내용의 방향을 미리 예측하기 어려운 경우에 유용합니다. <bdi>를 사용하면 텍스트가 역순으로 표시되거나 문장 구조가 깨지는 현상을 방지할 수 있습니다.
예제
다음 코드를 실행하면 양방향 텍스트 서식에서 주변과 격리된 텍스트를 표현하는 방법을 직접 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML bdi Tag</title>
</head>
<body>
<p>Quizzes:</p>
<ul>
<li>Programming: <bdi>Java</bdi></li>
<li>Scripting: <bdi>JavaScript</bdi></li>
<li>Mobile: <bdi>Android</bdi></li>
</ul>
</body>
</html>
위 예제에서 각 목록 항목의 기술 이름(Java, JavaScript, Android)은 <bdi> 태그로 감싸져 있습니다. 이렇게 하면 해당 텍스트가 주변 문장과 쓰기 방향이 달라지더라도 서로 영향을 주지 않고 항상 올바른 순서로 표시됩니다.