[Html] 인용문 blockquote 태그 사용법 & 예제(CSS) 총정리

글을 인용할 경우 blockquote 태그를 활용해 표시해줄 수 있습니다. 이 blockquote 태그는 사용하게 되면 다른 텍스트보다 글이 안쪽으로 써지는 효과를 줍니다. 또한 꼭 인용글이 아니더라도 CSS를 통해 blockquote 태그를 꾸며서 글을 강조할 수 있는 효과도 줄 수 있는 등 다양하게 활용될 수 있는 태그입니다. 이번 포스팅에서는 blockquote 태그의 사용법에 대해 알아보도록 하겠습니다.

 

※ 참고로 길이가 짧은 인용구를 나타낼 때는 블록으로 감싸는 <blockquote> 태그보다는 <q> 태그를 사용하는 것이 바람직합니다.

 

[Html] q태그(짧은 인용문) 사용법 & 예제 총정리

 

 blockquote태그(인용문) 사용법 

<blockquote cite="인용한URL">인용 할 내용</blockquote>

사용하는 방법은 blockquote 태그로 텍스트를 감싸주면 됩니다. 인용의 출처는 cite 속성으로 나타냅니다. cite 속성 입력은 선택 사항이고, 웹 브라우저에서는 보이지 않습니다.

 

blockquote 기본

See the Pen blockquote1 by wjdxo513 (@wjdxo513) on CodePen.

 

 

cite태그 (인용구 제목 표시)

See the Pen blockquote2 by wjdxo513 (@wjdxo513) on CodePen.

 

cite 속성 말고 cite 태그를 활용해 인용구 제목을 표시해 줄 수 있습니다. cite태그를 사용하면 웹 브라우저에 이탤릭체로 표시됩니다. 

 

 

 CSS로 blockquote 태그 꾸미기 

아래 코드의 CSS탭을 클릭하시면 CSS 코드를 확인하실 수 있습니다.

 

인용부호 넣기

See the Pen blockquote3 by wjdxo513 (@wjdxo513) on CodePen.

 

 

인용문 테두리1

See the Pen blockquote4 by wjdxo513 (@wjdxo513) on CodePen.

 

 

인용문 테두리2

See the Pen blockquote5 by wjdxo513 (@wjdxo513) on CodePen.

 

 

인용문 색상 넣기

See the Pen blockquote6 by wjdxo513 (@wjdxo513) on CodePen.