ruby element - by. UXKM

요약 설명

<ruby> 요소는 동아시아 문자(특히 한자)에 대한 발음이나 의미를 보조적으로 표시할 때 사용하는 시맨틱 태그로, 본문 텍스트 위나 옆에 작은 글씨 형태의 설명(주석)을 함께 보여줄 수 있도록 합니다.
<rt>(루비 텍스트)와 함께 사용되어 발음을 표시하고, <rp>를 통해 루비를 지원하지 않는 브라우저에서 대체 괄호 문자를 제공할 수 있습니다. 주로 일본어 후리가나, 중국어 병음, 한자 음독 표시 등에 활용되며, 다국어 문서에서 읽기 보조를 위한 중요한 역할을 합니다.

주요 역할 및 특징

  1. 한자의 발음 또는 설명 표시
    • <ruby> 요소 안에 한자와 보조 설명(발음, 의미 등)을 함께 제공할 수 있습니다.
    • 예: 日本語(にほんご), 北京(베이징)
  2. 주석(설명) 기능

    <ruby> 요소는 단순한 발음 안내뿐만 아니라, 단어의 뜻이나 부가 설명을 표시하는 데도 사용할 수 있습니다.

  3. <rt> 요소와 함께 사용
    • <rt>(Ruby Text)는 보조 설명(발음, 번역 등)을 제공하는 요소입니다.
    • <rp>(Ruby Parentheses)는 루비를 지원하지 않는 브라우저에서 대체 텍스트(괄호 포함)를 표시하는 데 사용됩니다.
  4. 브라우저 렌더링
    • 브라우저는 기본적으로 <ruby> 내의 <rt> 요소를 작고 위쪽(또는 오른쪽)에 표시합니다.
    • CSS를 사용하여 루비 텍스트의 위치와 크기를 조정할 수 있습니다.
  5. SEO 및 접근성 향상
    • 검색 엔진이 한자와 해당 발음을 함께 인식할 수 있도록 도와줍니다.
    • 스크린 리더가 <ruby> 요소를 통해 발음을 제공할 수 있습니다.
  6. 다국어 콘텐츠 지원

    일본어 후리가나, 중국어 병음, 한국어 한자 음독 표시 등에 활용할 수 있습니다.

CSS 기본 값

<ruby> 요소는 기본적으로 인라인 레벨 요소입니다.

기본 문법

속성

<ruby> 요소는 고유 속성을 가지지 않으며, 글로벌 속성(class, id, style, aria-*, data-* 등)만 사용할 수 있습니다.

<ruby> 요소의 세부 요소와 예제

<ruby> 세부 요소의 종류

  • 요소
  • 설명

  • <ruby>

    루비 주석을 감싸는 부모 요소

  • <rt>

    루비 텍스트(발음 또는 추가 정보)를 제공하는 요소

  • <rp>

    루비 텍스트를 지원하지 않는 브라우저에서 대체 괄호 표시

<rt> (루비 텍스트) 예제

<rp> (대체 괄호) 예제

루비를 지원하지 않는 브라우저에서는 <rp> 요소의 텍스트(괄호)가 표시되며, 기본적으로 옆으로 나란히 정렬됩니다.

접근성을 고려한 루비 표시

주의사항

  • <ruby> 요소만 단독으로 사용하면 의미가 없으며, 반드시 <rt> 요소를 포함해야 합니다.
  • 기본적으로 <rt> 요소는 작은 글씨로 표시됩니다. 필요하면 CSS를 이용하여 font-size를 조정할 수 있습니다.
  • <ruby> 요소는 단순히 발음 표기뿐만 아니라 단어의 뜻을 설명하는 용도로도 사용 가능합니다.