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

<q>태그는 인용한 내용을 표기하기 위한 것으로 quote의 줄임말입니다. 주로 짧은 인용구(short quotation)를 정의할 때 사용되며 보통 브라우저에서는 줄 바꿈 없이 앞뒤에 따옴표를 추가하여 표현합니다. 긴 인용문 블록을 정의할 때는 <q>태그가 아닌 <blockquote>태그의 사용을 권장합니다.

 

※ 구 익스플로러에서는 <q>태그 따옴표가 표시되지 않을 수 있습니다.

 

<q>태그가 <blockquote>태그의 다른 점
<q>태그와 <blockquote>태그는 모두 인용문을 나타내는 것으로 쓰임새는 같지만 다른 점이 있다면 <blockquote> 태그는 블록 레벨 태그이기 때문에 인용 내용이 줄이 바뀌어 나타나고 다른 내용들과도 구분되도록 안으로 들여 써지지만 <q>태그는 인라인 레벨 태그이기 때문에 줄 바꿈 없이 다른 내용들과 함께 한 줄로 표시되며 따옴표로 강조된다는 차이점이 있습니다.

 

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

 

 q태그(인용문) 사용법 

<q cite=인용한URL>인용 할 내용</q>

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

 

 

See the Pen q태그 사용법1 by wjdxo513 (@wjdxo513) on CodePen.

 

위와 같이 <q>태그를 사용하면 따옴표로 내용을 감싸서 화면에 표현합니다. 참고로 cite 속성은 선택사항이라 생략하셔도 무방합니다. 웹 문서를 작성할 때 <p>태그만 활용하시지 마시고 <q>태그나 다른 글자 강조체들도 사용해보세요. 더 가독성 있고 보기 좋은 문서를 만들 수 있습니다.

 

 

 CSS로 q 태그 꾸미기 

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

 

인용문 테두리

See the Pen q태그 사용법2 by wjdxo513 (@wjdxo513) on CodePen.

 

 

인용문 색상 넣기

See the Pen q태그 사용법3 by wjdxo513 (@wjdxo513) on CodePen.