---
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>&lt;rp&gt;</code> 요소</strong>는 {{htmlelement("ruby")}} 요소를 사용한 루비 주석을 지원하지 않는 경우 보여줄 괄호를 제공할 때 사용합니다.</span> {{htmlelement("rt")}} 요소를 감싸는 여는 괄호와 닫는 괄호를 각각의 <code>&lt;rp&gt;</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>&lt;rp&gt;</code> 요소거나, 자신이 부모의 마지막 요소라면 닫는 태그를 생략할 수 있습니다.</td>
  </tr>
  <tr>
   <th scope="row">가능한 부모 요소</th>
   <td>{{htmlelement("ruby")}} 요소. <code>&lt;rp&gt;</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>&lt;rp&gt;</code> 요소는 {{htmlelement("ruby")}} 요소를 지원하지 않는 브라우저에서 루비 주석을 구분할 수 있는 텍스트(주로 괄호)를 제공합니다.</li>
</ul>

<h2 id="예제">예제</h2>

<p>다음 예제는 한자료 표기한 "경복궁"의 각 글자에 루비 주석을 적용합니다.</p>

<div id="with-ruby">
<pre class="brush: html">&lt;ruby&gt;
  景 &lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;경&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;
  福 &lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;복&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;
  宮 &lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;궁&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;
&lt;/ruby&gt;</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', '&lt;rp&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-rp-element', '&lt;rp&gt;')}}</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>