0023 HTML에서 인용하기(Quotation)
글을 쓰다보면 소설이나 뉴스 등 다른 글을 인용해야하는 상황이 종종 생긴다. 이런 상황을 위하여 HTML에도 글의 성격이 인용인지 단순한 텍스트인지 등의 요소를 구별할 수 있도록 이에 맞는 요소들을 갖추고 있다.
<q> 요소는 짧은 인용구를 정의하는 요소다. 브라우저는 보통 <q> 요소의 주위에 큰 따옴표를 둘렀거나 굵게 표시한다.
<blockquote> 요소는 다른 자료로부터 거의 문단 단위 이상을 인용할 때 사용한다. 브라우저는 <blockquote> 요소를 보통 들여쓰기(indent)로 나타낸다.
<q> 요소가 짧고 핵심적인 인용구라면, <blockquote> 요소는 책이나 시처럼 완전한 문단을 기억하는 인용구이다.
<abbr> 요소는 약어(abbreviation)이나 두문자(acronym)를 정의하는 요소이다.
<address> 요소는 해당 문건의 작가나 저작자의 연락처를 정의하는 요소이다. <address> 요소는 보통 이탤릭으로 표시되고 대부분의 브라우저는 <address> 요소 위아래로 줄바꿈(line break)을 집어넣는다.
<cite> 요소는 해당 작품의 작품명(타이틀)을 정의하는 요소이다. 브라우저에는 보통 이탤릭으로 표시된다.
이제 배운 내용들이 실제로 브라우저에 어떻게 나타나는지 확인해보기 위해서 다음과 같이 작성해서 
0023.html 파일로 저장하고 실행해보자.
<!DOCTYPE html>
<html>
<head><title>HTML로 인용하기 예제</title></head>
<body>
<p>
최근 말라리아로 고생하는 사람이 자주 보인다. 특히 해외여행으로 인한 감염이 많은 것으로 나타났다. 다음은 신문기사다.
</p>
<blockquote>
말라리아의 위험성은 해외에서 더 심각하다. <abbr title="world health orginization">who</abbr>는 <q>2015년 전 세계 말라리아감염자가 2억 1400만명, 사망자가 43만8000명에 달한다</q>라고 밝혔다. 이 중 상당수는 아프리카에서 발생했고 국내에도 지난해 해외에서 감염되어 온 환자가 72명으로 전체 국외유입감염병 중 2번째로 많은 수가 감염되었다.
</blockquote>
<P>말라리아에 대해서 좀 더 알고 싶다면 로버트 데소비츠가 쓴 <cite>말라리아의 씨앗</cite>을 추천한다.
</p>
<address>
저자 : 방구석 책벌레<br>
블로그 : deliciouslearning.tistrory.com
</address>
</body>
</html>
그러면 크롬 브르우저에서 아래와 같이 나타난다.
우선 <blockquote> 요소로 인용한 곳은 들여쓰기(indent)가 된 문단처럼 나타났다. 그리고 <abbr> 요소로 집어넣은 내용은 아래에 점선으로 밑줄이 그어졌다. <q>요소는 큰 따옴표("")로 내용을 묶었고, <cite> 요소와 <address> 요소로 묶인 내용들은 이탤릭체로 나타났다.
브라우저에 어떻게 표현되었는지는 별로 중요하지 않다. 중요한 것은 브라우저가 각각의 내용에서 어떤 것이 인용구이고 어떤 것이 두문자이고 어떤 것이 인용된 작품명인지 안다는 사실이 중요하다.그러면 검색엔진은 이 웹 페이지가 말라리아에 대한 신문기사나 공신력 있는 단체의 말을 인용하고 있으며, 말라리아의 씨앗이라는 작품을 소개하고 있다는 것을 알게 되고 저자 자신과 접촉할 수 있는 연락처를 제시하고 있는 신뢰할만한 문서라고 판단하여 적절하게 이 웹 페이지를 소개할 것이다. 또, <abbr> 요소를 적절히 사용함으로써 브라우저와 검색엔진, 번역 시스템 등에 잘못된 단어 사용으로 오해받지 않게 될 것이다.
게다가 CSS를 이용하면 인용구가 전부 적절한 요소로 묶여 있으므로 각각의 요소에 대한 스타일을 명확하게 지정할 수 있게 된다.
Anki 파일
아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다.
Ankilog 파일: 
0023 HTML에서 인용하기(Quotation).apkg
'Anki로 공부하기 > HTML공부' 카테고리의 다른 글
| 0025 HTML style 속성(attribute) 및 배경색 설정 (0) | 2018.11.27 |
|---|---|
| 0024 블록(block) 요소와 인라인(inline) 요소 (0) | 2018.11.26 |
| 0022 HTML로 글자의 형식 정하기 (0) | 2018.11.23 |
| 0021 HyperText 링크를 제공하는 앵커(anchor)의 a요소 03 target 속성 (0) | 2018.11.22 |
| 0020 HyperText 링크를 제공하는 앵커(anchor)의 a요소 02 title 추가하기 (0) | 2018.11.21 |