동아시아 활판 인쇄에서 루비 텍스트 (ruby text) 는 일반적으로 문자 위나 오른쪽에 배치되는 작은 텍스트 주석입니다. 이 텍스트는 문자의 발음 또는 번역을 제공합니다. 루비 텍스트는 HTML 에서 루비 주석의 중요한 구성 요소입니다. 이 랩에서는 HTML <rt> 태그를 사용하여 루비 주석을 만드는 방법을 배우게 됩니다.
참고:
index.html에서 코딩을 연습할 수 있으며, Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단 모서리에 있는 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.
먼저, index.html 파일에 새로운 HTML 문서를 생성해 보겠습니다. 다음 코드를 파일에 추가하십시오:
<!doctype html>
<html>
<head>
<title>Ruby Annotation Example</title>
</head>
<body>
<h1>Ruby Annotation Example</h1>
</body>
</html>이 기본 구조는 루비 주석 예제를 생성하는 데 사용할 문서를 설정합니다.
다음으로, 루비 텍스트로 주석을 달고 싶은 텍스트를 추가하겠습니다. h1 태그 뒤에 다음 코드를 추가하십시오:
<p>
Here is some text that we want to annotate with ruby text. In East Asian
typography, ruby text is used to provide the pronunciation or translation of a
character.
</p>이제 텍스트의 문자에 대한 루비 주석을 생성해 보겠습니다. <ruby> 태그를 사용하여 문자를 묶고, <rt> 태그를 사용하여 루비 텍스트를 제공합니다. 단락 뒤에 다음 코드를 추가하십시오:
<p>
Here is some text that we want to annotate with ruby text. In East Asian
typography, ruby text is used to provide the pronunciation or translation of a
character.
</p>
<ruby> 漢 <rt>hàn</rt> </ruby>이 예제에서는 문자 '漢'을 <ruby> 태그로 묶고 있습니다. 그런 다음 <rt> 태그를 사용하여 루비 텍스트 'hàn'을 제공합니다.
예제에 더 많은 문자를 추가해 보겠습니다. <ruby> 태그 코드를 다음으로 바꾸십시오:
<ruby> 漢 <rt>hàn</rt> </ruby>
<ruby> 字 <rt>zì</rt> </ruby>
<ruby> 表 <rt>biǎo</rt> </ruby>이 코드에서는 예제에 두 개의 문자를 더 추가하고 해당 루비 텍스트로 주석을 답니다.
index.html 파일을 저장하고 웹 브라우저에서 엽니다. 다음과 같은 출력이 표시됩니다:
이 출력에서, 각 루비 텍스트와 함께 주석 처리된 문자를 볼 수 있습니다.
축하합니다! HTML <rt> 태그를 사용하여 루비 주석을 성공적으로 생성했습니다. 루비 텍스트는 HTML 에서 루비 주석의 중요한 구성 요소이며, 동아시아 타이포그래피에서 문자의 발음 또는 번역을 제공하는 데 사용됩니다.
