1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
|
---
title: '<rb>: 루비 베이스 요소'
slug: Web/HTML/Element/rb
tags:
- Element
- HTML
- HTML text-level semantics
- Reference
- Ruby
- Text
- Web
translation_of: Web/HTML/Element/rb
---
<div>{{HTMLRef}}</div>
<p><span class="seoSummary"><strong>HTML <code><rb></code> 요소</strong>는 {{HTMLElement("ruby")}} 표기의 기반 텍스트 구성요소(루비 주석을 적용하려는 글자)를 나눌 때 사용합니다.</span> 하나의 <code><rb></code> 요소는 기반 텍스트에서의 최소 단위를 하나 감싸야 합니다.</p>
<div class="hidden">\{{EmbedInteractiveExample("pages/tabbed/rb.html", "tabbed-standard")}}</div>
<table class="properties">
<tbody>
<tr>
<th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
<td>없음.</td>
</tr>
<tr>
<th scope="row">가능한 콘텐츠</th>
<td>{{htmlelement("ruby")}} 요소의 자손.</td>
</tr>
<tr>
<th scope="row">태그 생략</th>
<td>바로 뒤따르는 요소가 {{HTMLElement("rt")}}, {{HTMLElement("rtc")}}, {{HTMLElement("rp")}}, 다른 <code><rb></code> 요소거나, 자신이 부모의 마지막 요소라면 닫는 태그를 생략할 수 있습니다.</td>
</tr>
<tr>
<th scope="row">가능한 부모 요소</th>
<td>{{htmlelement("ruby")}} 요소.</td>
</tr>
<tr>
<th scope="row">가능한 ARIA 역할</th>
<td>모두</td>
</tr>
<tr>
<th scope="row">DOM 인터페이스</th>
<td>{{domxref("HTMLElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="특성">특성</h2>
<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p>
<h2 id="사용_일람">사용 일람</h2>
<ul>
<li>루비 주석은 일본어 후리가나, 타이완어 주음부호와 같이 동아시아 문자의 발음 표기에 사용합니다. <code><rb></code> 요소는 기반 텍스트의 각 조각을 나타내는 용도입니다.</li>
<li><code><rb></code>는 {{glossary("empty element", "빈 요소")}}가 아니지만, 보통 소스 코드에는 여는 태그만 사용해 루비 마크업을 덜 복잡하고 읽기 쉽게 합니다. 브라우저가 렌더링 때 알아서 닫는 태그를 추가합니다.</li>
<li>각각의 <code><rb></code> / 기반 조각 하나마다 {{htmlelement("rt")}} 요소 하나를 작성해야 합니다.</li>
</ul>
<h2 id="예제">예제</h2>
<p>다음 예제는 "경복궁"의 한자/한글 표기를 병행합니다.</p>
<pre class="brush: html"><ruby>
<rb>景<rb>福<rb>宮
<rp>(</rp><rt>경<rt>복<rt>궁<rp>)</rp>
</ruby></pre>
<p>세 개의 <code><rb></code> 요소를 사용해 기반 글자(한자)를 세 개로 나눴습니다. 반면, 한글 표기는 세 개의 {{htmlelement("rt")}} 요소를 사용합니다.</p>
<p>세 개의 기반 조각을 완전히 분리해 작성할 수도 있다는 점을 알아두세요. 이 때는 <code><rb></code> 요소를 사용하지 않아도 됩니다.</p>
<pre class="brush: html"><ruby>
景 <rp>(</rp><rt>경</rt><rp>)</rp>
福 <rp>(</rp><rt>복</rt><rp>)</rp>
宮 <rp>(</rp><rt>궁</rt><rp>)</rp>
</ruby></pre>
<div class="hidden">
<div id="with-ruby">
<pre class="brush: html"><ruby> <rb>景<rb>福<rb>宮 <rp>(</rp><rt>경<rt>복<rt>궁<rp>)</rp> </ruby>
</pre>
<pre class="brush: css">body {
font-size: 22px;
}</pre>
</div>
</div>
<p>결과는 다음과 같습니다.</p>
<p>{{EmbedLiveSample("with-ruby", "100%", 60)}}</p>
<p>루비 주석을 지원하지 않는 브라우저에서는 아래와 같이 출력합니다.</p>
<div id="without-ruby">
<div class="hidden">
<pre class="brush: html">景福宮 (경복궁)</pre>
<pre class="brush: css">body {
font-size: 22px;
}
</pre>
</div>
</div>
<p>{{EmbedLiveSample("without-ruby", "100%", 60)}}</p>
<div class="note">
<p><strong>참고</strong>: {{HTMLElement("ruby")}} 요소 참고서를 방문해 다른 예제도 살펴보세요.</p>
</div>
<h2 id="명세">명세</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-rb-element', '<rb>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="브라우저_호환성">브라우저 호환성</h2>
<p>{{Compat("html.elements.rb")}}</p>
<h2 id="같이_보기">같이 보기</h2>
<ul>
<li>{{HTMLElement("ruby")}}</li>
<li>{{HTMLElement("rt")}}</li>
<li>{{HTMLElement("rp")}}</li>
<li>
<p>{{HTMLElement("rtc")}}</p>
</li>
</ul>
|
