참조 또는 인용 문구를 나타내는 방법 - q, blockquote
인용
다른 블로그나 웹 사이트의 글을 인용할 경우, 인용임 나타내는 태그에는
<blockquote> >와 <q> >가 있습니다. <blockquote> 태그는
새로운 문단에서 인용하는 블록 요소이고,
<q> 태그는 문단 안에서 인용할 때
사용하는 인라인 요소입니다.
기본형
<blockquote cite="xxx">...</blockquote>
<q cite="xxx">...</q>
인용문의 출처는 cite 속성으로 나타냅니다. cite 속성 입력은 선택 사항이고, 웹
브라우저에서는 보이지 않습니다.
blockquote
blockquote 요소의 기본 모양은 양쪽에 여백이 있는 것입니다.
<p>Blockquote</p>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla.</p></blockquote>data-default-tab="html,result"
data-editable="true"
data-preview="true"
data-height="441"
data-pen-title="HTML 인용하기 q,blockquote 예제2"
data-slug-hash="eYZQaWQ"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 441px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
q
q 요소의 기본 모양은 인용 문구를 큰 따옴표로 감싸는 것 입니다.
<p>Lorem ipsum dolor sit amet <q cite="https://google.com">consectetur adipiscing</q> elit.</p>data-default-tab="html,result"
data-editable="true"
data-preview="true"
data-height="441"
data-pen-title="HTML 인용하기 q,blockquote 예제1"
data-slug-hash="poyQmja"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 441px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
예제
인용문을 꾸미는 몇 가지 예제를 살펴봅니다.
href="https://urliveblogger.blogspot.com/2021/01/css-blockquote.html"
>인용문(blockquote) 스타일링하기>
기타 HTML 참조
>제목 >
>문단 >
>줄바꿈 >
>공백 >
>목록 >
>이미지 >
>동영상 >
>오디오 >
>링크 >
>표 >
>양식 >
- 인용구
>기초 >