본문 바로가기
share/html

[HTML] 인용구 (Quotation) - <q><blockquote><abbr><address>

by santamonicaboy 2022. 1. 23.

 

 

 

인용구(Quotation)

HTML에서 인용구를 표현하는 방법은 두가지가 있습니다.

 

1. 짧은 인용구

2. 블록 인용구

 

 


 

 

짧은 인용구

짧은 인용구는 <q>태그(quotation)를 사용하여 표현할 수 있으며, 자동으로 앞뒤에 큰따옴표가 붙습니다.

 

<p>
	HTML의 정의는
	<q>웹 페이지를 만들기 위한 하이퍼텍스트 마크업 언어</q>
	입니다.
</p>

짧은인용구 결과값

 


 

 

블록 인용구

길이가 긴 인용문은 <blockquote>태그(block quatation)를 사용하여 표현할 수 있습니다.

<blockquote>태그는 이러한 인용 부분을 별도의 단락으로 구분하여 나타냅니다. (들여쓰기)

 

<p>HTML의 정의</p>

<blockquote>
인터넷 서비스의 하나인 월드 와이드 웹을 통해 볼 수 있는 문서를 만들 때 사용하는 프로그래밍 언어의 한 종류이다.
</blockquote>

 

블록 인용구 결과값

 

 


 

 

축약형 표현

HTML에서 용어의 축약형을 표현하기 위해서는 <abbr>태그(abbreviation)를 사용합니다.

<abbr>태그 위에 마우스를 위치시키면 title 속성에 명시한 용어의 원형이 나타납니다.

 

<p>아래의 단락에서 HTML5이라는 단어 위에 마우스를 올려놓아 보세요!</p>
<p><strong><abbr title="HyperText Markup Language 5">HTML5</abbr></strong>
란 웹 문서를 제작하는 데 쓰이는 프로그래밍 언어인 HTML의 최신규격입니다.</p>

축약형 표현 결과값

 


 

주소 표현

<address>태그를 사용하면 HTML에서 주소를 표현할 수 있습니다.

이러한 주소는 이탤릭체로 표현되며, 위아래로 약간의 공백이 자동으로 삽입됩니다.

 

<address>
    서울특별시<br>
    강동구 올림픽로
</address>

주소 결과괎

 

 

 

 


 

 

위의 HTML 인용 및 약어 태그들을 정리하면 아래와 같습니다.

(글의 인용이나 작품 제목, 약어를 표시하는 태그이며 사용 빈도수는 많지 않습니다.)

 

 

<q></q>
짧은 인용문을 작성할 때 사용하며, 끈 따옴표 처리가 됨
<blockquote></blockquote>
장문의 인용문을 작성할 때 사용하며 들여쓰기 처리가 됨
<cite></cite>
미술품, 책, 공연, 영화 등 작품의 제목을 지정할 때 사용하며, 이탤릭체 처리가 됨
<abbr></abbr>
WWF (세계자연기금)과 같은 약어에 사용하며, 점선 밑줄 처리가 됨
<address></address>
주소를 표현할 때 사용되며 위 아래로 약간의 공백이 삽입되며 이탤릭체로 표현 됨

 

※ <abbr>은 title 속성에 반드시 약어에 대한 풀 네임을 써줘야 한다.

세계환경기금 <abbr title="World Wide Fund for Nature">WWF</abbr>