[HTML] bdo 태그 (강제 문자 정렬)

728x90

HTML <bdo> 태그란?

<bdo> (Bi-Directional Override) 태그는 텍스트의 기본 읽기 방향을 강제로 변경할 때 사용됩니다. 즉, LTR(왼쪽 → 오른쪽) 언어와 RTL(오른쪽 → 왼쪽) 언어가 섞여 있을 때 강제로 특정 방향을 적용합니다.

강제적으로 텍스트 방향 변경 (dir 속성 필수)
- 기본적으로 웹페이지의 텍스트 방향은 HTML 문서의 dir 속성(ltr 또는 rtl)을 따름.
- 하지만 <bdo> 태그를 사용하면 해당 부분만 의도적으로 방향을 변경할 수 있음.
다국어 콘텐츠에서 유용함
- 아랍어, 히브리어 등 RTL 언어를 LTR로 표시하거나, 반대로 영어를 RTL로 표시할 때 사용 가능.
dir 속성이 필수 속성임
- dir="ltr": 왼쪽 → 오른쪽 (Left to Right)
- dir="rtl": 오른쪽 → 왼쪽 (Right to Left)

예제: LTR → RTL 강제 변경

<p>원래: Hello, world!</p>
<p>강제 변경: <bdo dir="rtl">Hello, world!</bdo></p>

출력 결과:

원래: Hello, world!
강제 변경: !dlrow ,olleH

<bdo dir="rtl">을 사용하면 텍스트가 거꾸로 출력됨.

예제: RTL → LTR 강제 변경

<p>원래: مرحبا بالعالم</p> <!-- "Hello, world!" in Arabic -->
<p>강제 변경: <bdo dir="ltr">مرحبا بالعالم</bdo></p>

출력 결과:

원래: مرحبا بالعالم
강제 변경: م ل ع ا ل ب ا ح ر م

아랍어(RTL)를 LTR로 강제 적용하면 글자가 반대로 정렬됨.

태그	설명
<bdi>	자동으로 텍스트 방향을 감지하고, 주변 텍스트에 영향을 주지 않음
<bdo>	강제로 지정한 방향(dir="ltr" 또는 dir="rtl")으로 적용

728x90