HTML <blockquote>, <q>, <cite>요소

안녕하세요 찐망고입니다.

 

html요소 중 인용에 해당하는 두 요소가 있는데요

긴 인용문은 <blockquote>요소를, 짧은 인용문은 <q>요소를 사용합니다.

 

<blockquote>는 블록레벨요소이고, 다른 웹페이지나 문서에서 인용한 텍스트를 표시할 수 있습니다.

<blockquote cite="https://terms.naver.com/entry.naver?docId=1154798&cid=40942&categoryId=33384">
    <header>
    	<h1>홍범도</h1>
    </header>
    <section>
    	<p>한말의 독립운동가. 만주 대한독립군의 총사령군이 되어 일본군을 급습하여 전과를 거두었다. 
    	독립군 본거지인 봉오동 전투에서 독립군 최대의 승전을 기록하였으며, 
    	청산리 전투에서는 제1연대장으로 참가하였다. 
    	그 후 항일단체들의 통합을 주선하여 대한독립군단을 조직, 부총재가 되었으며, 
    	고려혁명군관학교를 설립했다./p>
    </section>
    <footer>
    	<cite>[네이버 지식백과] 홍범도 [洪範圖] (두산백과 두피디아, 두산백과)</cite>
    </footer>
</blockquote>

<blockquote>요소에는 제목요소인 h요소나 문단요소인 p요소와 같은 블록요소를 자식으로 포함할 수 있고, 

시멘틱요소들도 포함하여 좀 더 의미론적으로 사용할 수 있습니다.

 

 

 

<q>요소는 짧은 인라인 인용문을 나타내는데 주로 사용하고,

인용문을 따옴표로 감싸서 시각적으로 강조할 때 사용합니다.

<p>책에선 말한다<q cite="출처url">시간은 사람에 따라 다르게 흘러</q></p>

q::before {
	content: '"';
}
q::after {
	content: '"';
}

<q>요소는 시각적으로 따옴표로 감싸는 것이 일반적이지만, css를 통해 따옴표의 모양을 변경할 수 있습니다.

 

cite속성을 이용하여 출처 url를 연결할 수 있고, 인용된 작품이름과 같은 더 긴 정보를 표현하는 건 적합하지 않고

<blockquote>요소에 <q>요소를 포함할 수도 있습니다.

<blockquote>
  <p>셰익스피어의 5대희극중 하나인 As You Like It에서 말하길, 
  	<q cite="출처url">Time travels in diverse paces with diverse persons.</q>라고 했다.
  </p>
</blockquote>

 

 

<cite>요소는 출처정보를 나타낼 때 사용하고

인용된 작품, 책, 영화, 논문등의 제목을 표시하는데 유용합니다.

주로 <blockquote>, <q>, <p>와 같은 블록요소나, <i>, <em>, <span>요소과 같은 인라인요소 내에 사용합니다.

cite를 속성으로 사용할 경우 출처의 URL을 나타내는 데 사용하고

<blockquote>, <q>, <del>, <ins>와 같은 요소와 함께 사용할 수 있습니다.