티스토리 뷰

HTML

[HTML] <rp>

<rp>

<ruby> 태그는 루비 문자의 상단 주석을 정의합니다. 루비 문자란 한자에 대한 읽는 법이나 일반적인 읽기 방법과 다르게 읽을 때 작은 글씨로 표현해주는 문자를 의미합니다. <ruby> 태그는 루비 문자를 정의하며, <rt> 태그는 상단에 작은 주석 글씨를 나타내며, <rp> 태그는 루비 태그가 지원되지 않을 경우 괄호('(')를 표현해주는 역할을 합니다. <rb> 태그는 발음을 나타내며, <rtc> 태그는 텍스트 컨테이너 역할을 합니다.


<rp>

<rp> 태그는 루비 주석을 괄호로 표현하기 위해서 사용합니다.

정의(Definition)

  • <rp> 태그는 루비 주석을 괄호로 표현하기 위해서 사용합니다.

비교(Compare)

  • 루비 문자를 정의한다면 <ruby> 태그를 사용합니다.
  • 루비 문자의 상단 주석을 표현하려면 <rt> 태그를 사용합니다.
  • 루비 문자가 지원되지 않을 경우 괄호를 표현하려면 <rp> 태그를 사용합니다.
  • 루비 문자의 발음을 표현하려면 <rb> 태그를 사용합니다.
  • 루비 문자의 텍스트 영역을 표현하려면 <rtc> 태그를 사용합니다.

Sample1

루비 문자를 표현하기 위한 가장 기본적인 예제입니다.

결과
語不成說 (eobulseongseol)
html
<ruby>
    語不成說 <rp>(</rp><rt>eobulseongseol</rt><rp>)</rp>
</ruby>

Sample2

만약 루비 문자가 지원되지 않는다면 <rp> 태그가 표현되는 예제입니다.

결과
語不成說(eobulseongseol)
html
<ruby>
    語不成說 <rp>(</rp><rt>eobulseongseol</rt><rp>)</rp>
</ruby>

Sample3

글자와 발음에 맞게 설정한 루비 문자 표현 예제입니다.

결과
(eo) (bul) (seong) (seol)
html
<ruby>
    <rb>語</rb><rp>(</rp><rt>eo</rt><rp>)</rp>
    <rb>不</rb><rp>(</rp><rt>bul</rt><rp>)</rp>
    <rb>成</rb><rp>(</rp><rt>seong</rt><rp>)</rp>
    <rb>說</rb><rp>(</rp><rt>seol</rt><rp>)</rp>
</ruby>

Sample4

발음 영역과 문자영역을 표현한 예제입니다.

결과
(eo) (bul) (seong) (seol) (어불성설)
html
<ruby>
    <rb>語</rb><rp>(</rp><rt>eo</rt><rp>)</rp>
    <rb>不</rb><rp>(</rp><rt>bul</rt><rp>)</rp>
    <rb>成</rb><rp>(</rp><rt>seong</rt><rp>)</rp>
    <rb>說</rb><rp>(</rp><rt>seol</rt><rp>)</rp>
    <rtc><rp>(</rp><rt>어불성설</rt><rp>)</rp></rtc>
</ruby>

호환성(Compatibility) 더보기 caniuse.com

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 네이버 웨일 익스플로러6 아이콘6 익스플로러7 아이콘7 익스플로러8 아이콘8 익스플로러9 아이콘9 익스플로러10 아이콘10 익스플로러11 아이콘11 엣지 아이콘 안드로이드 아이콘 ios 아이콘
<ruby> 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능
<rp> 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 사용가능 사용가능
<rt> 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 사용가능 사용가능
<rtc> 사용안됨 사용가능 사용안됨 사용안됨 사용안됨 사용안됨 사용안됨 사용안됨 사용안됨 사용안됨 사용안됨 사용안됨 사용안됨 사용안됨

참고(Reference)

  • MDN
  • HTML5

공유하기(Share) 더보기

  • 네이버 블러그 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 트위터 공유하기
  • 트위터 공유하기

공감하기(Like) 더보기

UP NEXT : Ads by Google

질문하기(Questions)
댓글쓰기 폼