
import {
  A, Bold, Details, Dl, H, Message, NoteBottom, NoteTop, P,
  Quote, Score, Youtube, Ul, Ol, Em, Gray, Code, Kbd, Image,
  Q, Strong, Spoiler, Strike, Line, Mark, HtmlGuideMessage, Name,
  Dt, Dd, HTMLTextPosts
} from '@/components/Post';

<HtmlGuideMessage />

<HTMLTextPosts />

# 개요
2021년도 막바지에 이르렀습니다. 사실 올해도 그닥 대단한 일은 한 게 없고 공부만 주야장천 한 것 같습니다. 다가오는 2022년에는 좀 더 새로운 변화를 주고 좀 더 나은 사람이 되려고 노력해보려고 합니다. 그래서 새로운 마음으로 밤낮도 바꿔보고 있습니다. 잘 안된다는 게 함정이지만.

그래서 상쾌한 마음으로 오랜만에 글을 하나 남겨봅니다. 이번 글은 **웹 개발을 위한 HTML 가이드** 20편입니다. 텍스트 관련 태그의 6번째 글이고 이번 글에서 다룰 내용은 **인용 태그**입니다. 인용이라는 것은 우리가 일상 생활을 하면서도 볼 수 있고 다양한 글에서도 발견할 수 있죠. 인용은 다른 사람의 말을 가져와서 비유하는데에 쓰거나 설명하는데에 쓰는 것을 말합니다. 자신이 하고 싶은 말이 있을 때 인용을 통해서 대신할 수도 있고 말입니다.

**CSS**를 함께 다뤄야 좀 더 의미가 있는 태그지만 일단은 그냥 알아보도록 합시다.

# 인용 태그
암튼 그래서 이번에 알아볼 인용 태그에는 **두 가지의 태그**가 존재합니다. 하나는 **블럭 형식의 태그**고 나머지 하나는 **인라인 형식의 태그**입니다. 이 두가지의 태그를 경우에 따라서 사용하면 되겠습니다.

## q 태그
문단 내에 **인용문을 넣고 싶을 때**에 사용하는 `q`태그는 인라인 형식의 태그입니다. 긴 인용문이 아닌 **짧은 인용문을 표현**할 때에 사용합니다.

```html file=q.html
<p>
  아이유가 맡은 장만월이라는 캐릭터는 <q cite="url">넌 0순위야. 너 아니면 안 되는 거 맞아. 내 마음에 쏙 들었으니까.</q> 라는 말을 한 적이 있다.
</p>
```

![q 태그는 따옴표가 붙는다.](https://drive.google.com/uc?export=view&id=1U-Cps5tBoWcDnftiyjx3VC8aNkUp2BfQ)

`q`태그는 이렇게 열고 닫는 태그입니다. 안에 내용을 넣어주면 됩니다. 브라우저에서는 보이는 것처럼 따옴표가 둘러쌓이게 됩니다. 인라인 형식의 태그이기 때문에 `p`태그 안에서 사용하는 게 보통입니다.

사용 가능한 속성으로는 `cite`속성이 있습니다. 여기에는 **출처가 되는 url**를 넣으면 됩니다.

## blockquote 태그
이번에는 블럭 형식의 인용 태그를 알아봅시다. 블럭 형식이기 때문에 줄바꿈을 함께 사용할 수 있습니다. **짧은 인용이 아닌 긴 인용문을 넣을 때**에 이 `blockquote`태그를 사용합니다.

```html file=blockquote.html
<p>아이유는 호텔 델루나라는 드라마에서 장만월이라는 역할을 맡았다. 그 캐릭터는 아래와 같은 대사를 한 적이 있다.</p>
<blockquote cite="url">
  넌 0순위야. 너 아니면 안 되는 거 맞아.
  내 마음에 쏙 들었으니까.
</blockquote>
```

![blockquote 태그는 문단과 구분된다.](https://drive.google.com/uc?export=view&id=1aZtSZNoX3xeKIvPhvOC1sQNAeg0Co5RG)

이 태그도 여는 태그와 닫는 태그가 있어서 이런식으로 사용하면 됩니다. `blockquote`태그는 따옴표가 생기지 않는 대신 자동으로 **들여쓰기가 되고 일반 문단이랑 구분된 모습**을 갖게 됩니다.

`blockquote`태그에도 `cite`속성이 사용됩니다. **url**을 넣어주시면 됩니다. `blockquote`태그는 이렇게만 사용하면 당연히 밋밋하고 심심한 디자인이죠. 그래서 CSS를 통해 바꾸는 편입니다. 가 아니라 그냥 바꿔야 합니다. HTML은 CSS와 떼려야 뗄 수 없는 관계입니다. 언젠가는 알게 되실겁니다.

<Line />

이번 글에서는 간단하게 인용 태그들에 대해서 알아봤습니다. **인용 태그는 두가지**가 있고 **인라인 형식인 `q`태그**와 **블럭 형식인 `blockquote`태그**가 있습니다. 이 두 태그는 상황에 맞게 사용하면 되겠습니다. 이번 글에서 준비된 내용은 여기까지입니다. 다음 글에서는 **하이라이트 태그**에 대해서 알아보도록 합시다.

이번 글은 여기서 마치도록 하겠습니다. 다음 글에서 봅시다.


2021년도 막바지에 이르렀습니다. 사실 올해도 그닥 대단한 일은 한 게 없고 공부만 주야장천 한 것 같습니다. 다가오는 2022년에는 좀 더 새로운 변화를 주고 좀 더 나은 사람이 되려고 노력해보려고 합니다. 그래서 새로운 마음으로 밤낮도 바꿔보고 있습니다. 잘 안된다는 게 함정이지만. 그래서 상쾌한 마음으로 오랜만에 글을 하나 남겨봅니다. 이번 글은 웹 개발을 위한 HTML 가이드 20편입니다. 텍스트 관련 태그의 6번째 글이고 이번 글에서 다룰 내용은 인용 태그입니다. 인용이라는 것은 우리가 일상 생활을 하면서도 볼 수 있고 다양한 글에서도 발견할 수 있죠. 인용은 다른 사람의 말을 가져와서 비유하는데에 쓰거나 설명하는데에 쓰는 것을 말합니다. 자신이 하고 싶은 말이 있을 때 인용을 통해서 대신할 수도 있고 말입니다.

“ 인용 태그 ” 태그 관련 포스트 1건

웹 개발을 위한 HTML 가이드 20편 - 인용 태그