HTML5 Rp 태그 사용법

1. Rp 태그란?

Rp 태그는 ruby 태그 내에서 주석 텍스트(rt)를 괄호로 감싸는 데 사용됩니다. 주로 ruby 태그를 지원하지 않는 브라우저에서 주석 텍스트를 괄호로 표시할 때 활용됩니다.

2. 기본 구조

Rp 태그의 기본 사용법

<ruby>
    <rb>漢字</rb>
    <rp>(</rp>
    <rt>한자</rt>
    <rp>)</rp>
</ruby>

<ruby>
    <rb>日本語</rb>
    <rp>(</rp>
    <rt>にほんご</rt>
    <rp>)</rp>
</ruby>

3. 자주 사용되는 속성

속성 설명 예시
class CSS 클래스 지정 <rp class="japanese">
id 고유 식별자 지정 <rp id="bracket1">

4. 실제 사용 예제

<!-- 한자 훈독 예제 -->
<div class="kanji-example">
    <h3>한자 훈독 예제</h3>
    <p>
        <ruby>
            <rb>漢字</rb>
            <rp>(</rp>
            <rt>한자</rt>
            <rp>)</rp>
        </ruby>
        <ruby>
            <rb>日本語</rb>
            <rp>(</rp>
            <rt>일본어</rt>
            <rp>)</rp>
        </ruby>
        <ruby>
            <rb>中国語</rb>
            <rp>(</rp>
            <rt>중국어</rt>
            <rp>)</rp>
        </ruby>
    </p>
</div>

<!-- 일본어 음독 예제 -->
<div class="japanese-example">
    <h3>일본어 음독 예제</h3>
    <p>
        <ruby>
            <rb>日本語</rb>
            <rp>(</rp>
            <rt>にほんご</rt>
            <rp>)</rp>
        </ruby>
        <ruby>
            <rb>漢字</rb>
            <rp>(</rp>
            <rt>かんじ</rt>
            <rp>)</rp>
        </ruby>
        <ruby>
            <rb>中国語</rb>
            <rp>(</rp>
            <rt>ちゅうごくご</rt>
            <rp>)</rp>
        </ruby>
    </p>
</div>

<!-- 중국어 병음 예제 -->
<div class="chinese-example">
    <h3>중국어 병음 예제</h3>
    <p>
        <ruby>
            <rb>汉字</rb>
            <rp>(</rp>
            <rt>hàn zì</rt>
            <rp>)</rp>
        </ruby>
        <ruby>
            <rb>日语</rb>
            <rp>(</rp>
            <rt>rì yǔ</rt>
            <rp>)</rp>
        </ruby>
        <ruby>
            <rb>中文</rb>
            <rp>(</rp>
            <rt>zhōng wén</rt>
            <rp>)</rp>
        </ruby>
    </p>
</div>

<style>
    /* 한자 예제 스타일 */
    .kanji-example {
        margin: 20px 0;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

    .kanji-example rp {
        display: none;
    }

    /* 일본어 예제 스타일 */
    .japanese-example {
        margin: 20px 0;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

    .japanese-example rp {
        display: none;
    }

    /* 중국어 예제 스타일 */
    .chinese-example {
        margin: 20px 0;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

    .chinese-example rp {
        display: none;
    }

    /* 반응형 스타일 */
    @media (max-width: 768px) {
        .kanji-example,
        .japanese-example,
        .chinese-example {
            margin: 10px 0;
            padding: 10px;
        }
    }
</style>

💡 주의사항

5. 스타일링 예제

<style>
    /* 기본 rp 스타일 */
    rp {
        display: none;
    }

    /* ruby 태그를 지원하지 않는 브라우저용 스타일 */
    @supports not (display: ruby) {
        rp {
            display: inline;
            color: #666;
        }
    }

    /* 한자 괄호 스타일 */
    .kanji rp {
        font-family: 'Noto Sans KR', sans-serif;
    }

    /* 일본어 괄호 스타일 */
    .japanese rp {
        font-family: 'Noto Sans JP', sans-serif;
    }

    /* 중국어 괄호 스타일 */
    .chinese rp {
        font-family: 'Noto Sans SC', sans-serif;
    }

    /* 강조 스타일 */
    rp.emphasis {
        color: #007bff;
        font-weight: bold;
    }

    /* 인용 스타일 */
    rp.quote {
        font-style: italic;
        color: #666;
    }

    /* 반응형 스타일 */
    @media (max-width: 768px) {
        rp {
            font-size: 0.9em;
        }
    }
</style>

6. 성능 최적화 팁

7. 검증 및 테스트

rp 태그가 올바르게 사용되었는지 확인하는 방법: