HTML에서 출처를 밝히거나 본문과 인용문을 구분해야 할 때 활용할 수 있는 방법은 여러 가지입니다. 이번 글에서는 HTML의 대표적인 인용 관련 요소인 <blockquote>, <q>, <abbr>, <address>, <bdo>, <cite>를 하나씩 살펴봅니다. 각 요소는 저마다 고유한 용도가 있으므로, 그 차이를 정확히 이해하고 마크업에 올바르게 적용하는 방법을 예제 코드와 함께 알아보겠습니다.
blockquote – 긴 인용문을 위한 블록 요소
<blockquote> 요소는 여러 줄에 걸친 긴 인용문을 담을 때 사용합니다. 이 요소를 활용하면 인용문 자체를 주변 문단이나 다른 HTML 요소와 시각적·의미적으로 깔끔하게 구분할 수 있습니다. 다음은 유명 극작가의 독백을 인용한 예제입니다.
<html>
<head>
<style>
body {
font-family: 'Roboto';
margin: 20px;
}
blockquote p {
width: 80%;
margin: 0px 20px;
text-align: right;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora doloribus quae mollitia vitae inventore minus sed id ut facere officiis cupiditate corporis, ratione, neque repellat cumque temporibus, dicta at labore.</p>
<blockquote>
"To be, or not to be: that is the question:
Whether 'tis nobler in the mind to suffer
The slings and arrows of outrageous fortune,
Or to take arms against a sea of troubles,
And by opposing end them?..."
<p>—<em>Hamlet</em>, Act III, Scene I</p>
</blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora doloribus quae mollitia vitae inventore minus sed id ut facere officiis cupiditate corporis, ratione, neque repellat cumque temporibus, dicta at labore.</p>
</body>
</html>
q – 짧은 인라인 인용문
<q> 요소는 짧은 인용문 앞뒤에 자동으로 따옴표를 붙여 줍니다. <span>이나 <strong>처럼 인라인(inline) 요소이며, 인용문 전용으로 쓰입니다. 만약 인용문이 여러 줄에 걸친다면 앞서 소개한 <blockquote>를 사용하는 것이 좋습니다.
<html>
<head>
<style>
body {
font-family: 'Roboto';
margin: 20px;
}
</style>
</head>
<body>
<p>
The mission statement for the Make-A-Wish Foundation is <q>Together, we create life-changing wishes for children with critical illnesses.</q>
</p>
</body>
</html>
abbr – 약어 정의하기
본문 흐름을 해치지 않으면서 특정 약어나 두문자어의 의미를 설명하고 싶을 때가 있습니다. 이럴 때 <abbr> 태그를 사용합니다. 이 역시 <span>, <em>, <q>처럼 인라인 요소입니다. 약어의 전체 의미는 title 속성 안에 정의하면 되며, 사용자가 마우스를 올리면 툴팁 형태로 표시됩니다.
<html>
<head>
<style>
body {
font-family: 'Roboto';
margin: 20px;
}
</style>
</head>
<body>
<abbr title="COrona VIrus Disease 2019">COVID-19</abbr> was first discovered in December 2019 in Wuhan, China.
</body>
</html>
address – 연락처 정보 표시
<address> 요소는 문서 작성자(개인 또는 기업)의 연락처 정보를 정의합니다. 실제 주소, 이메일, 소셜 미디어 링크, 전화번호, 개인 웹사이트 등 연락과 관련된 항목이 모두 해당됩니다.
이 요소 안의 텍스트는 기본적으로 이탤릭체로 렌더링되며, 주소 블록 앞뒤로 자동으로 줄바꿈이 적용됩니다.
<html>
<head>
<style>
body {
font-family: 'Roboto';
margin: 20px;
}
</style>
</head>
<body>
<address>
Written by Christina Kopecky<br />
Other Articles: <a href="https://example.com/author/christina-kopecky/">Author Page</a><br/>
Twitter: <a href="https://twitter.com/cmvnk" target="_blank" rel="noopener noreferrer">@cmvnk</a><br />
Github: <a href="https://github.com/ckopecky" target="_blank" rel="noopener noreferrer">ckopecky</a><br />
</address>
</body>
</html>
bdo – 텍스트 표시 방향 제어
아랍어, 히브리어처럼 오른쪽에서 왼쪽으로 읽는 언어를 다룰 때는 일일이 수동으로 조작하는 것보다 텍스트 방향을 자동으로 처리해 주는 태그를 쓰는 것이 훨씬 편리합니다. <bdo>(bi-directional override) 요소를 사용하면 텍스트의 표시 방향을 강제로 지정할 수 있습니다. 방향은 dir 속성으로 지정하며, 기본값은 "ltr"(왼쪽→오른쪽)이고, "rtl"로 설정하면 오른쪽→왼쪽으로 렌더링됩니다.
<html>
<head>
<style>
body {
font-family: 'Roboto';
margin: 20px;
}
</style>
</head>
<body>
<bdo dir="rtl">This renders Right-to-Left</bdo><br />
<bdo>This renders Left-to-Right</bdo>
</body>
</html>
cite – 창작물 제목 표기
<cite> 요소는 오늘 소개할 마지막 인용 관련 요소입니다. 이 태그는 책, 그림, 영화 등 창작물(creative work)의 제목을 정의할 때 사용하며, 인라인 요소로 이탤릭체로 렌더링됩니다.
<html>
<head>
<style>
body {
font-family: 'Roboto';
margin: 20px;
}
p {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<p>
<cite>Mona Lisa</cite>, Leonardo da Vinci <br />
<sup>The Louvre (since 1797)</sup>
</p>
</body>
</html>
마무리
지금까지 살펴본 내용을 정리하면 다음과 같습니다.
<blockquote>– 여러 줄에 걸친 긴 인용문에 사용<q>– 한 줄 이내의 짧은 인용문에 사용<abbr>– 본문 속 약어를 정의할 때 사용<address>– 작성자 또는 제작자의 연락처 정보를 정의할 때 사용<bdo>– 텍스트가 왼쪽→오른쪽 또는 오른쪽→왼쪽으로 표시되도록 제어할 때 사용<cite>– 창작물의 제목을 정의할 때 사용
HTML에는 다양한 인용 관련 요소가 있으며, 각각의 용도가 분명하게 나뉘어 있습니다. 프로젝트의 성격에 맞는 올바른 요소를 선택해 시맨틱하고 가독성 좋은 마크업을 작성하시기 바랍니다!