HTML 인용문(Quotations)은 웹 문서 안에 다른 출처의 글이나 발언을 인용해 표현할 때 사용되는 기능입니다. HTML에서는 크게 두 가지 태그로 인용문을 만들 수 있는데, 하나는 문장 중간에 들어가는 짧은 인용구를 정의하는 <q> 태그이고, 다른 하나는 다른 출처에서 가져온 인용 구간 전체를 정의하는 <blockquote> 태그입니다.
q 태그와 blockquote 태그의 차이점
<q> 태그는 인라인(inline) 요소로, 본문 흐름 속에서 자연스럽게 짧은 인용을 표현할 때 사용합니다. 대부분의 브라우저는 이 태그로 감싼 텍스트 앞뒤에 큰따옴표(" ")를 자동으로 붙여 줍니다.
반면 <blockquote> 태그는 블록 레벨(block-level) 요소로, 별도의 단락 형태로 표시되며 기본적으로 들여쓰기가 적용됩니다. 글 전체나 여러 문단을 인용할 때 적합합니다.
문법(Syntax)
두 인용문 태그의 기본 문법은 다음과 같습니다.
<q>인용문</q>
또는
<blockquote>인용문</blockquote>
예제
HTML 인용문 태그의 실제 사용 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
text-align: center;
}
</style>
<body>
<h1>HTML Quotations</h1>
<q>I'm a quote element with some dummy text.</q>
<blockquote>I'm a block quote element with some dummy text.</blockquote>
</body>
</html>실행 결과
위 코드를 실행하면 <q> 태그로 감싼 문장에는 자동으로 따옴표가 추가되어 인라인 형태로 표시되고, <blockquote> 태그로 감싼 문장은 들여쓰기가 적용된 독립적인 단락으로 출력되는 것을 확인할 수 있습니다.
