<ruby> 태그 위첨자 사용방법

<ruby> 태그의 정의와 사용방법

<ruby> 태그는 일본어의 후리가나와 같이 해당 문자의 발음이나 설명을 위 첨자로 표시할 수 있는 특징이 있습니다. 루비 주석(ruby annotation>을 정의할 때 사용할 수 있습니다. 일반적으로 <ruby> 태그는 <rt> 태그와 <rp> 태그와 함께 사용될 수 있습니다.

코드 예시 사용방법

<p>米津玄師 MV「LOSER」<ruby>歌詞<rt>かし</rt></ruby></p>

米津玄師 MV「LOSER」歌詞かし

이렇게 사용할 경우 <rt>와 </rt>부분은 윗 첨자를 정의할 때 사용할 수 있습니다. <rt> 태그는 <ruby> 태그 내부에 위치합니다. 함께 사용할 수 있는 <rp> 태그는 <ruby>에서 요소를 지원하지 않는 브라우저에서만 표시될 문자를 정의할 수 있습니다. 보통은 자주 사용하지는 않는 태그입니다.

위 첨자로 표시되기때문에 rt의 스타일시트를 지정해줘야 합니다. 기본형은 line-height: normal;로 사용하지만, 아래와 같이 글씨의 크기를 조절하는 등 다양한 스타일을 줄 수 있습니다.

스타일시트(CSS)

ruby {
    text-indent: 0px;
}
rt {
    text-indent: 0px;
    line-height: normal;
    -webkit-text-emphasis: none;
    display: block;
    font-size: 50%;
    text-align: start;
}
/* 이는 예제일 뿐, 취향에 맞게 수정하세요. */

일본어 공부할 때, 이거 쓰면 조금 더 일본어를 잘할 수 있게 된다는 장점이 있습니다. 각 브라우저마다 지원 환경이 다르기 때문에 표기되는 방식이 조금 다를 수 있습니다.