HTML의 <blockquote> 태그와 <q> 태그

이 포스트에서는 <blockquote> … </blockquote> 태그와 <q> … </q> 태그에 관한 내용을 설명합니다.

이 두 태그는 인용문을 표현하기 위해 사용하는 태그라는 공통점이 있습니다. 하지만 다른 점이 있는데, 이 두 태그의 차이는 요약하자면 <div> 태그와 <span> 태그의 차이와 비슷합니다. <blockquote> 태그는 이름이 block과 quote의 합성어라는 특징에 걸맞게 인용문을 통째로 하나의 블록으로 할당합니다. 반면에 <q> 태그는 인용문을 통째로 하나의 블록으로 할당하지 않고 요소 안에 인라인 형태로 편입시켜서 표현합니다.

이를테면 다음과 같이 쓸 수 있습니다.

<p>스티브 잡스는 다음과 같이 말했습니다.</p>
<blockquote>
	위대한 업을 위한 길은, 당신이 무엇을 좋아하느냐 입니다.
	아직 찾지 못했다면, 계속 찾으세요.
	포기하지 않는다면, 마음은 모든걸 알게됩니다.
	그리고 당신은 그 길을 찾게 될 것입니다.
</blockquote>

이는 다음과 같이 표시될 것입니다.

이와 같이 인용문이 한 블록으로 표시되는 것을 볼 수 있습니다. 기본값은 양 옆에 여백이 있는데, 이는 물론 CSS를 지정해서 없앨 수도 있고 상자 모양으로 표시되게 하는 등의 구현도 가능합니다.

<p>한국 속담에
<q>십 년이면 강산도 변한다</q>라는 말이 있습니다.
오랜 세월이 흐르면 모든 것은 변하게 마련입니다.</p>

이는 <q> 태그를 쓴 예입니다.

이와 같이 문단 중간에 인용문이 삽입되어 있을 것입니다.

잘 보면 양쪽으로 큰따옴표가 있는데, 이는 기본적으로 <q> 태그가 다음과 같은 CSS로 구현되기 때문입니다.

q { 
    display: inline;
}

q:before { 
    content: open-quote;
}

q:after { 
    content: close-quote;
}

<q> 자체는 인라인 요소로 표시되고, 시작은 여는 따옴표로, 끝은 닫는 따옴표로 표시됩니다. 이 CSS를 바꿔주면 따옴표를 없애고 다른 모양으로 표시되게 하는 것도 가능합니다.

추가로, <blockquote> 태그와 <q> 태그는 속성값으로 cite를 줄 수 있습니다. 여기에는 인용문의 출처 URL이 들어갑니다.