Elements

<rb>: 루비 베이스 요소

HTML <rb> 요소는 <ruby> 표기의 기반 텍스트 구성요소(루비 주석을 적용하려는 글자)를 나눌 때 사용합니다. 하나의 <rb> 요소는 기반 텍스트에서의 최소 단위...

· 1min read · 1 views

HTML <rb> 요소<ruby> 표기의 기반 텍스트 구성요소(루비 주석을 적용하려는 글자)를 나눌 때 사용합니다. 하나의 <rb> 요소는 기반 텍스트에서의 최소 단위를 하나 감싸야 합니다.

콘텐츠 카테고리 없음.
가능한 콘텐츠 <ruby> 요소의 자손.
태그 생략 바로 뒤따르는 요소가 <rt>, <rtc>, <rp>, 다른 <rb> 요소거나, 자신이 부모의 마지막 요소라면 닫는 태그를 생략할 수 있습니다.
가능한 부모 요소 <ruby> 요소.
가능한 ARIA 역할 모두
DOM 인터페이스 `HTMLElement`

특성

이 요소는 전역 특성만 포함합니다.

사용 일람

  • 루비 주석은 일본어 후리가나, 타이완어 주음부호와 같이 동아시아 문자의 발음 표기에 사용합니다. <rb> 요소는 기반 텍스트의 각 조각을 나타내는 용도입니다.
  • <rb>는 빈 요소가 아니지만, 보통 소스 코드에는 여는 태그만 사용해 루비 마크업을 덜 복잡하고 읽기 쉽게 합니다. 브라우저가 렌더링 때 알아서 닫는 태그를 추가합니다.
  • 각각의 <rb> / 기반 조각 하나마다 <rt> 요소 하나를 작성해야 합니다.

예제

다음 예제는 "경복궁"의 한자/한글 표기를 병행합니다.

<ruby>
  <rb>景</rb><rb>福</rb><rb>宮 </rb><rp>(</rp><rt>경</rt><rt>복</rt><rt>궁</rt
  ><rp>)</rp>
</ruby>

세 개의 <rb> 요소를 사용해 기반 글자(한자)를 세 개로 나눴습니다. 반면, 한글 표기는 세 개의 <rt> 요소를 사용합니다.

세 개의 기반 조각을 완전히 분리해 작성할 수도 있다는 점을 알아두세요. 이 때는 <rb> 요소를 사용하지 않아도 됩니다.

<ruby>
  景 <rp>(</rp><rt>경</rt><rp>)</rp> 福 <rp>(</rp><rt>복</rt><rp>)</rp> 宮
  <rp>(</rp><rt>궁</rt><rp>)</rp>
</ruby>

결과는 다음과 같습니다.

루비 주석을 지원하지 않는 브라우저에서는 아래와 같이 출력합니다.

景福宮 (경복궁)
body {
  font-size: 22px;
}

<ruby> 요소 참고서를 방문해 다른 예제도 살펴보세요.

같이 보기

  • <ruby>
  • <rt>
  • <rp>
  • <rtc>

Related Docs

Elements

<strong>: 강한 중요 요소

<strong> HTML 요소는 강한 중요성, 중대함 혹은 긴급한 내용임을 나타냅니다. 브라우저는 일반적으로 이 내용을 굵은 글씨로 렌더링합니다. <p> ... the most...

1min read 1 views
Elements

<style>: 스타일 정보 요소

HTML <style> 요소는 문서나 문서 일부에 대한 스타일 정보를 포함합니다. <style> p { color: #26b72b; } code { font-weight: bold; } </styl...

2min read 3 views
Elements

<sub>: 아래 첨자 요소

HTML <sub> 요소는 활자 배치를 아래 첨자로 해야 하는 인라인 텍스트를 지정합니다. 아래 첨자는 보통 더 작은 글씨 크기를 가지고, 기준선을 아래로 내려 렌더...

2min read 3 views
Elements

<template>: 콘텐츠 템플릿 요소

HTML <template> 요소는 페이지를 불러온 순간 즉시 그려지지는 않지만, 이후 JavaScript를 사용해 인스턴스를 생성할 수 있는 HTML 코드를 담을 방법을 제공합...

1min read 3 views

Comments (0)

No comments yet. Be the first to comment!

Leave a Comment

로그인 후 댓글을 남길 수 있습니다.