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
|
---
title: '<rp>: 루비 대체 괄호 요소'
slug: Web/HTML/Element/rp
tags:
- Element
- HTML
- HTML text-level semantics
- Reference
- Ruby
- Web
translation_of: Web/HTML/Element/rp
---
<div>{{HTMLRef}}</div>
<p><span class="seoSummary"><strong>HTML <code><rp></code> 요소</strong>는 {{htmlelement("ruby")}} 요소를 사용한 루비 주석을 지원하지 않는 경우 보여줄 괄호를 제공할 때 사용합니다.</span> {{htmlelement("rt")}} 요소를 감싸는 여는 괄호와 닫는 괄호를 각각의 <code><rp></code> 요소로 나타내야 합니다.</p>
<div>{{EmbedInteractiveExample("pages/tabbed/rp.html", "tabbed-shorter")}}</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>텍스트.</td>
</tr>
<tr>
<th scope="row">태그 생략</th>
<td>바로 뒤따르는 요소가 {{HTMLElement("rt")}}, 다른 <code><rp></code> 요소거나, 자신이 부모의 마지막 요소라면 닫는 태그를 생략할 수 있습니다.</td>
</tr>
<tr>
<th scope="row">가능한 부모 요소</th>
<td>{{htmlelement("ruby")}} 요소. <code><rp></code>는 {{htmlelement("rt")}} 요소의 바로 앞 또는 바로 뒤에 위치해야 합니다.</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><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>만을 포함합니다.</p>
<h2 id="사용_일람">사용 일람</h2>
<ul>
<li>루비 주석은 일본어 후리가나, 타이완어 주음부호와 같이 동아시아 문자의 발음 표기에 사용합니다. <code><rp></code> 요소는 {{htmlelement("ruby")}} 요소를 지원하지 않는 브라우저에서 루비 주석을 구분할 수 있는 텍스트(주로 괄호)를 제공합니다.</li>
</ul>
<h2 id="예제">예제</h2>
<p>다음 예제는 한자료 표기한 "경복궁"의 각 글자에 루비 주석을 적용합니다.</p>
<div id="with-ruby">
<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">
<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>
<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('HTML WHATWG', 'text-level-semantics.html#the-rp-element', '<rp>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-rp-element', '<rp>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="브라우저_호환성">브라우저 호환성</h2>
<p>{{Compat("html.elements.rp")}}</p>
<h2 id="같이_보기">같이 보기</h2>
<ul>
<li>{{HTMLElement("ruby")}}</li>
<li>{{HTMLElement("rt")}}</li>
<li>{{HTMLElement("rb")}}</li>
<li>{{HTMLElement("rtc")}}</li>
</ul>
|
