HTML <ruby> tag 정리, 한글 설명

---

HTML <ruby> element

mdn, W3C 정리 & 한국어 설명

 

 

자료 수집 : 2022년 3월

 

ruby 태그란?

루비 주석(ruby annotation)을 나타낸다.

ruby의 하위 요소로 사용하는 rt 태그 내의 글자가 상단에 작게 표시된다.

 

 

ruby 태그와 함께 사용하는 요소

• rt 요소 : 발음이나 설명을 정의
• rp 요소 : ruby 요소를 지원하지 않는(글자 상단에 작게 표시되는 것) 구형 브라우저에서만 표시될 문자를 정의. 즉, ruby 요소를 지원하는 브라우저에서는 rp 요소를 무시한다.

 

 

ruby 태그를 어디에서 사용할까?

• 동아시아 문자 (일본어의 후리가나, 중국어의 병음 및 주음, 한자의 독음 등) 의 발음을 표기할 때

 

 

ruby 태그의 사용 예제

rp 태그는 구형 브라우저를 위해서 사용한다. 구형 브라우저에서는 "漢字(kanji)"로 표현된다.

<!-- 문자별 표기 예 -->
<ruby>
  漢
  <rp>(</rp>
  <rt>Kan</rt>
  <rp>)</rp>
  
  字
  <rp>(</rp>
  <rt>ji</rt>
  <rp>)</rp>
</ruby>

 

漢 (Kan) 字 (ji)

 

<!-- 단어별 표기 예 -->
<ruby>
韓國<rt>한국</rt>
</ruby>

 

韓國한국

 

 

기타사항

• 가능한 ARIA role : all
• ruby를 지원하는 웹브라우저에서 rp 태그의 내용은 무시된다.
• ruby 태그는 HTML5에서 추가된 요소이다.

 

 

출처

W3schools, MDN, TCPschool, 제타위키