<ruby>와 <rt> 태그의 정의 및 사용법

<ruby> 태그는
문자와 해당 문자에 표시할 루비 주석 텍스트의 범위를 나타내기 위해 감싸주는 태그입니다.

<rt> 태그는
<ruby> 태그 내에서 루비 주석의 루비 텍스트 구성 요소를 나타냅니다.

이 태그들을 사용하면 하나 이상의 구문 콘텐츠에 루비 주석을 표시할 수 있습니다.

<ruby>와 <rt> 태그를 이해하려면 루비 주석에 대한 이해가 먼저 필요합니다.

루비 주석(ruby annotations)

루비 주석이란, 문장 내 특정 문자나 단어의 발음을 안내하거나 의미를 보충하기 위해 사용하는 텍스트입니다.
일반적으로 해당 문자 위나 옆에 작게 표시되며, 일본어나 중국어 등 동아시아 문자에서 어려운 한자의 발음이나 특별한 읽기 방법을 안내하는 데 자주 사용됩니다.

특히, 루비 주석은 일본어에서 한자의 음 표기로 많이 사용되며, 중국어에서는 한어병음(拼音)이나 주음부호(注音符號) 등을 표시할 때 자주 활용됩니다.

일본어에서 사용된 루비 주석 일본어에서 漢字(한자)라는 단어는 "かんじ"(kanji)라고 발음되며, 이 발음은 루비 주석을 사용하여 나타낼 수 있습니다.

루비 주석은 마치 전 세계에서 공통적으로 사용되는 교통 표지판처럼, 기본 텍스트의 위나 아래에 추가 정보를 제공하는 역할을 합니다. 교통 표지판이 도로에서의 방향을 안내하듯, 루비 주석은 단어의 발음이나 해석을 돕습니다.

html rubyd와 rt 태그

루비(ruby)라고 불리는 이유

"루비(ruby)"라는 용어는 일본에서 메이지 유신 시절 영국에서 수입한 활자체에서 유래했습니다. 영국에서는 활자의 크기를 구분할 때 보석의 이름을 사용했고, 그 중 하나가 '루비'였는데, 이는 작은 크기의 활자를 나타내는 용어였습니다. 일본은 이 개념을 채택해 발음 안내 등의 목적을 위해 사용되는 작은 글씨 크기를 '루비'라고 불렀습니다.

<ruby>와 <rt> 태그의 사용법

<ruby> 태그는 문자와 해당 문자에 표시할 루비 주석 텍스트의 범위를 감싸는 데 사용되며, 루비 주석을 나타내는 <rt> 태그와 함께 구성됩니다.
다음의 예제 코드를 통해 살펴보겠습니다.

HTML 
<ruby>漢字<rt>かんじ</rt></ruby>
실제 적용된 모습

위 예제 코드에서

  • <ruby>는 루비 주석을 포함하는 전체 요소입니다.
  • <rt>는 루비 주석, 즉 발음 안내나 추가 설명을 표시하는 요소입니다. 여기서는 '漢字'라는 한자의 발음을 'かんじ'로 안내하고 있습니다.

다양한 사용 예제

<ruby>와 <rt> 태그의 사용법에 대한 더 구체적이고 이해하기 쉬운 다양한 예제들입니다.

인위적인 예

다음은 인위적인 예제로 만든 것입니다. 기호로 영어와 프랑스어로 이름을 만들었습니다.

HTML 
<ruby>
    ♥ <rt> Heart <rt lang=fr>Cœur</rt>
    ☘ <rt> Shamrock <rt lang=fr>Trèfle</rt>
    ✶ <rt> Star <rt lang=fr>Étoile</rt>
</ruby>
실제 적용된 모습

여러 개의 루비 주석 사용

다음의 예제를 통해서 여러 개의 문자와 해당 루비 주석이 어떻게 작성되는지 살펴보세요.

HTML 
<p>
    <ruby>君<rt>くん</rt></ruby><ruby>子<rt>し</rt></ruby>は<ruby>和<rt>わ</rt></ruby>して<ruby>同<rt>どう</rt></ruby>ぜず。
</p>
실제 적용된 모습

간체 중국어

이 예에서는 간체 중국어 텍스트 汉字의 각 표의문자는 병음 읽기로 주석이 달려 있습니다.

HTML 
<ruby>汉<rt>hàn</rt>字<rt>zì</rt></ruby>
실제 적용된 모습

중첩된 루비 주석

중첩된 루비 요소의 주석은 각 기본 문자에 대한 단일한 일본 히라가나 주석을 제공하는 반면, 바깥쪽 루비 요소의 자식 요소인 <rt>의 주석은 영어를 사용하여 의미를 제공합니다.

HTML 
<p>
    <ruby><ruby>東<rt>とう</rt>南<rt>なん</rt></ruby><rt lang=en>Southeast</rt></ruby>の方角
</p>
실제 적용된 모습

속성

  • <ruby> 태그는 모든 글로벌 속성을 사용할 수 있습니다. 하지만, <ruby>만을 위한 관련 속성은 없습니다.
  • <rt> 태그는 모든 글로벌 속성을 사용할 수 있습니다. 하지만, <rt>만을 위한 관련 속성은 없습니다.

<ruby> 태그의 기술적인 문법 요약

ruby 태그의 구문 형식
가능한 부모 요소 구문 콘텐츠를 허용하는 모든 요소
허용되는 콘텐츠 구문 콘텐츠
암시적인 role 속성 값 없음
허용된 role 속성 값 모두(Any)

<rt> 태그의 기술적인 문법 요약

rt 태그의 구문 형식
가능한 부모 요소 <ruby>
허용되는 콘텐츠 구문 콘텐츠
암시적인 role 속성 값 없음
허용된 role 속성 값 모두(Any)

브라우저 호환성

ruby와 rt 태그의 브라우저 호환성
태그
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
ruby 5 12 38 5
rt 5 12 38 5

명세서

ruby와 rt 태그의 명세서 사양
명세서 사양
ruby HTML
#the-ruby-element
rt HTML
#the-rt-element

같이 보기