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

텍스트 관련 태그

• 굵기와 기울기 태그(b, strong, i, em)
• 개행과 가로줄 태그(br, hr)
• 윗첨자와 아랫첨자 태그(sup, sub)
• 텍스트의 추가, 제외 태그(ins, del)
• 취소선(s)과 밑줄 표현
• 인용 태그(q, blockquote)현재 글
• 하이라이트 태그(mark)
• small 태그
• code, pre 태그
• 번외 - 탈출문자 사용하기
• 그 외의 텍스트 태그들

개요

2021년도 막바지에 이르렀습니다. 사실 올해도 그닥 대단한 일은 한 게 없고 공부만 주야장천 한 것 같습니다. 다가오는 2022년에는 좀 더 새로운 변화를 주고 좀 더 나은 사람이 되려고 노력해보려고 합니다. 그래서 새로운 마음으로 밤낮도 바꿔보고 있습니다. 잘 안된다는 게 함정이지만.

그래서 상쾌한 마음으로 오랜만에 글을 하나 남겨봅니다. 이번 글은 웹 개발을 위한 HTML 가이드 20편입니다. 텍스트 관련 태그의 6번째 글이고 이번 글에서 다룰 내용은 인용 태그입니다. 인용이라는 것은 우리가 일상 생활을 하면서도 볼 수 있고 다양한 글에서도 발견할 수 있죠. 인용은 다른 사람의 말을 가져와서 비유하는데에 쓰거나 설명하는데에 쓰는 것을 말합니다. 자신이 하고 싶은 말이 있을 때 인용을 통해서 대신할 수도 있고 말입니다.

CSS를 함께 다뤄야 좀 더 의미가 있는 태그지만 일단은 그냥 알아보도록 합시다.

인용 태그

암튼 그래서 이번에 알아볼 인용 태그에는 두 가지의 태그가 존재합니다. 하나는 블럭 형식의 태그고 나머지 하나는 인라인 형식의 태그입니다. 이 두가지의 태그를 경우에 따라서 사용하면 되겠습니다.

q 태그

문단 내에 인용문을 넣고 싶을 때에 사용하는 q태그는 인라인 형식의 태그입니다. 긴 인용문이 아닌 짧은 인용문을 표현할 때에 사용합니다.

<p>
  아이유가 맡은 장만월이라는 캐릭터는 <q cite="url">넌 0순위야. 너 아니면 안 되는 거 맞아. 내 마음에 쏙 들었으니까.</q> 라는 말을 한 적이 있다.
</p>

크게 보기 (새 창)

q태그는 이렇게 열고 닫는 태그입니다. 안에 내용을 넣어주면 됩니다. 브라우저에서는 보이는 것처럼 따옴표가 둘러쌓이게 됩니다. 인라인 형식의 태그이기 때문에 p태그 안에서 사용하는 게 보통입니다.

사용 가능한 속성으로는 cite속성이 있습니다. 여기에는 출처가 되는 url를 넣으면 됩니다.

blockquote 태그

이번에는 블럭 형식의 인용 태그를 알아봅시다. 블럭 형식이기 때문에 줄바꿈을 함께 사용할 수 있습니다. 짧은 인용이 아닌 긴 인용문을 넣을 때에 이 blockquote태그를 사용합니다.

<p>아이유는 호텔 델루나라는 드라마에서 장만월이라는 역할을 맡았다. 그 캐릭터는 아래와 같은 대사를 한 적이 있다.</p>
<blockquote cite="url">
  넌 0순위야. 너 아니면 안 되는 거 맞아.
  내 마음에 쏙 들었으니까.
</blockquote>

크게 보기 (새 창)

이 태그도 여는 태그와 닫는 태그가 있어서 이런식으로 사용하면 됩니다. blockquote태그는 따옴표가 생기지 않는 대신 자동으로 들여쓰기가 되고 일반 문단이랑 구분된 모습을 갖게 됩니다.

blockquote태그에도 cite속성이 사용됩니다. url을 넣어주시면 됩니다. blockquote태그는 이렇게만 사용하면 당연히 밋밋하고 심심한 디자인이죠. 그래서 CSS를 통해 바꾸는 편입니다. 가 아니라 그냥 바꿔야 합니다. HTML은 CSS와 떼려야 뗄 수 없는 관계입니다. 언젠가는 알게 되실겁니다.

이번 글에서는 간단하게 인용 태그들에 대해서 알아봤습니다. 인용 태그는 두가지가 있고 인라인 형식인 q태그와 블럭 형식인 blockquote태그가 있습니다. 이 두 태그는 상황에 맞게 사용하면 되겠습니다. 이번 글에서 준비된 내용은 여기까지입니다. 다음 글에서는 하이라이트 태그에 대해서 알아보도록 합시다.

이번 글은 여기서 마치도록 하겠습니다. 다음 글에서 봅시다.