bdo element - by. UXKM

요약 설명

<bdo> 요소는 텍스트의 방향(direction)을 명시적으로 지정하는 시맨틱 태그로, HTML 문서 내에서 글자의 표시 방향을 강제로 변경할 때 사용됩니다.
dir 속성과 함께 사용되며, 예를 들어 dir="rtl"을 지정하면 해당 콘텐츠가 오른쪽에서 왼쪽으로 출력됩니다. 주로 다국어 콘텐츠 처리 시 기본 방향과 반대되는 언어를 정확히 제어하고자 할 때 사용되며, 자동 감지를 수행하는 <bdi>와는 달리 개발자가 직접 방향을 지정합니다.

주요 역할 및 특징

  1. 텍스트 방향 강제 설정
    • <bdo> 요소는 dir 속성을 사용하여 내부 텍스트의 방향을 강제로 설정할 수 있습니다.
    • 예: dir="ltr" (왼쪽에서 오른쪽), dir="rtl" (오른쪽에서 왼쪽)
  2. 혼합 언어 환경에서의 명시적 방향 지정
    • 아랍어(우->좌)와 영어(좌->우)와 같은 다국어 콘텐츠가 혼합된 경우, 텍스트의 방향을 명확하게 제어할 수 있습니다.
    • 단일 텍스트 블록의 방향을 통제하고자 할 때 유용합니다.
  3. 상위 요소의 방향과 무관

    부모 요소에서 정의한 텍스트 방향을 무시하고 독립적인 방향을 설정할 수 있습니다.

  4. 다른 요소와의 관계

    <bdi>는 텍스트 방향을 자동 감지하지만, <bdo>는 명시적으로 방향을 설정해야 합니다.

CSS 기본 값

<bdo> 요소는 기본적으로 인라인 레벨 요소이며, 별도의 CSS를 지정하지 않아도 아래와 같은 기본값이 적용됩니다.

기본 문법

속성

[dir] 필수 <bdo dir="값">

텍스트 방향을 강제 지정합니다.

값 :
ltr : 텍스트를 왼쪽에서 오른쪽(LTR)으로 표시합니다.
rtl : 텍스트를 오른쪽에서 왼쪽(RTL)으로 표시합니다.

예제

기본 사용법 (강제 방향 지정)

혼합 언어 텍스트에서 방향 조정

접근성을 고려한 사용

주의사항

  • <bdo> 요소를 사용할 때 반드시 dir 속성을 지정해야 합니다. dir을 생략하면 텍스트 방향이 변경되지 않습니다.
  • <bdo> 요소는 텍스트의 방향을 강제로 지정할 때만 사용해야 합니다. 일반적인 텍스트에서는 dir 속성을 사용하는 <html>이나 <body> 요소를 통해 전체 방향을 설정하는 것이 바람직합니다.