이 포스트는 HTML5에서 추가된 <ruby> … </ruby> 태그에 관한 내용입니다.
이 태그는 글 내용에 넣는 태그로, 글자 혹은 단어에 덧말을 붙이는 태그입니다. 한자문화권에서 한자 위에 독음을 작은 글씨로 써서 붙이는 경우가 있는데 바로 이러한 표현을 구현하는 태그입니다. 현재도 일본어에서는 한자를 음독과 훈독을 둘 다 하는 특성 때문에 한자 위에(세로쓰기는 한자의 오른쪽에) 히라가나 혹은 가타카나를 조그맣게 써 넣어서 어떻게 읽는지를 표시하는데 이를 위해 쓸 수 있는 태그입니다.
(주: 한자에서 음독은 한자를 그 음대로 읽는 것을 의미하고 훈독은 그 한자의 의미와 같은 고유어로 읽는 것을 의미합니다. 예를 들어, 家(집 가)라는 한자를 ‘가’라고 읽으면 음독이고 ‘집’이라고 읽으면 훈독입니다. 현재 한국어에서는 음독법만 쓰고 있지만 일본어에서는 음독법과 훈독법을 모두 쓰고 있어서 후리가나가 필요하게 되었습니다.)
다음 코드를 봅시다.
<p><b>도쿠가와 이에야스</b>(<ruby> 德川家康<rp>(</rp><rt>とくがわ いえやす</rt><rp>)</rp> </ruby>)는 에도 막부의 초대 쇼군이다.</p>
<ruby> 태그 시작과 함께 덧말을 붙일 한자어 ‘德川家康’을 쓰고 그 다음 <rt> 태그를 열어 그 위에 붙일 덧말인 ‘とくがわ いえやす’를 씁니다. 그리고 </rt>로 닫은 다음 바로 </ruby>로 완전히 닫습니다. 참고로 <rt> … </rt> 바깥의 양 끝에 두 괄호가 <rp> … </rp> 태그에 싸여 있는데 이는 <ruby> 태그를 지원하는 브라우저에서는 숨겨지는 부분입니다. 즉, 이 예제의 경우 <rp> … </rp> 안의 괄호는 <ruby> 태그를 지원하지 않는 브라우저에서만 표시됩니다.
이 예제는 다음과 같이 표시될 것입니다.
만약 <ruby> 태그를 지원하지 않는 브라우저라면,
이렇게 표시될 것입니다.
이렇게 HTML5에서는 <ruby> 태그를 이용하여 글자 위에 덧말 넣기 기능을 구현할 수 있습니다.
좋은 자료 감사합니다. 예재로 알려주신 내용을 입력해보았는데
한자와 후리가나로 표시된 부분과 간격이 한줄이 더 생기는데 간격을 좁힐수 있는 방법이 있을까요?.
정확히 어떤 현상인지 모르겠는데,
혹시 한자와 후리가나가 있는 줄의 간격이 늘어난다는 이야기인가요?
ruby 태그를 쓰면 줄 간격이 좁아 후리가나를 넣을 공간이 부족할 경우 그 줄의 간격을 강제로 늘리게 됩니다.
또, 예제에 쓰인 <p> 태그는 기본적으로 위와 아래에 여백(margin)이 있기 때문에 ruby 태그가 첫 줄에 나오면 그만큼 간격이 더 늘어납니다.
CSS의 line-height 속성을 통해 줄 간격을 후리가나가 들어갈 정도로 넓게 하면 ruby 태그가 들어간 줄도 다른 줄과 간격이 같아집니다.
아래는 그 예제입니다.
<div style="width: 300px; line-height: 2; border: 1px solid;"> 1909년 10월 26일, 안중근 의사는 하얼빈 역에서 이토 히로부미(<ruby> 伊藤博文<rp>(</rp><rt>いとう ひろぶみ</rt><rp>)</rp> </ruby>)를 저격하는 의거를 일으켰다. </div>왼쪽은 위 코드의 예제, 오른쪽은 비교를 위해 ruby를 없앤 버전입니다.
Juwan Park님 답변해주셔서 감사합니다. 알려주신 내용을 토대로 다시한번 시도해 보겠습니다. 매우 유용한 정보 아주 큰 도움이 되었습니다. 감사합니다^^
좋은 자료 감사합니다! 🙂