HTML 루비(ruby) 만들기

HTML 루비(ruby) 만들기

 

루비는 텍스트 상단에 붙은 작은 글씨는 보여줄 때 사용합니다. 루비 만들기에 사용하는 HTML 요소들에 대해 알아보겠습니다.

 

 

루비 만들기를 알아봅니다

 

 

 

ruby 태그 요소

 

 

루비를 만들 때 사용되는 태그는 ruby, rt, rp 요소들이 있습니다. 각각의 설명은 다음과 같습니다.

 

 

 

• ruby: 루비 텍스트를 사용할 영역을 지정
• rt: 루비로 표시되는 텍스트
• rp: 루비를 지원하는 않는 프라우저에서 괄호로 표시할 때 사용

 

 

 

 

ruby 태그 사용 예시

 

루비 태그는 다음과 같이 사용할 수 있습니다.

 

<p>

루비에 대해 알아봅니다. 루비는

<ruby>
프레이징콘텐츠<rt>phrasing content</rt>

</ruby>

라고 할 수 있습니다.

</p>

 

실행 결과는 다음과 같습니다.

 

루비 실행 결과창

 

 

rp 요소를 사용하여 루비를 지원하지 않는 브라우저도 대비할 수 있습니다.

<p>

루비에 대해 알아봅니다. 루비는

<ruby>
프레이징콘텐츠<rp>(</rp><rt>phrasing content</rt><rp>)</rp>

</ruby>

라고 할 수 있습니다.

</p>

 

위와 같이 작성할 경우, 루비를 지원하는 브라우저에서는 다음과 같이 표시됩니다.

 

루비에 대해 알아봅니다. 루비는 프레이징콘텐츠(phrasing content)라고 할 수 있습니다.

 

루비를 지원하는 브라우저는 괄호를 표시하지 않고, 처음 실행창과 동일하게 표시됩니다. 즉, rp 요소를 무시한다고 이해하시면 됩니다.