HTML <blockquote> 요소는 안쪽의 텍스트가 긴 인용문임을 나타냅니다. 주로 들여쓰기를 한 것으로 그려집니다. (외형을 바꾸는 법은 사용 일람을 참고하세요) 인용문의 출처 URL은 cite 특성으로, 출처 텍스트는 <cite> 요소로 제공할 수 있습니다.
<div>
<blockquote cite="https://www.huxley.net/bnw/four.html">
<p>
Words can be like X-rays, if you use them properly—they’ll go through
anything. You read and you’re pierced.
</p>
</blockquote>
<p>—Aldous Huxley, <cite>Brave New World</cite></p>
</div>
div:has(> blockquote) {
background-color: #ededed;
margin: 10px auto;
padding: 15px;
border-radius: 5px;
}
blockquote p::before {
content: "\201C";
}
blockquote p::after {
content: "\201D";
}
blockquote + p {
text-align: right;
}
| 콘텐츠 카테고리 | 플로우 콘텐츠, 구획 루트, 뚜렷한 콘텐츠. |
|---|---|
| 가능한 콘텐츠 | 플로우 콘텐츠. |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는 것은 필수입니다. |
| 가능한 부모 요소 | 플로우 콘텐츠를 허용하는 모든 요소 |
| 암시적 ARIA 역할 | 대응하는 역할 없음 |
| 가능한 ARIA 역할 | 모두 |
| DOM 인터페이스 | `HTMLQuoteElement` |
특성
이 요소는 전역 특성을 포함합니다.
cite- : 인용문의 출처 문서나 메시지를 가리키는 URL. 인용문의 맥락 혹은 출처 정보를 가리킬 용도입니다.
사용 일람
인용문의 들여쓰기를 바꾸려면 CSS margin-left와 margin-right, 혹은 margin 단축 속성을 사용하세요.
별도의 블록을 쓰지 않아도 될 짧은 인용문은 <q> 요소를 사용하세요.
예제
다음 예제는 <blockquote> 요소를 사용해 A Standard for the Transmission of IP Datagrams on Avian Carriers의 문단을 인용합니다.
<blockquote cite="https://tools.ietf.org/html/rfc1149">
<p>
Avian carriers can provide high delay, low throughput, and low altitude
service. The connection topology is limited to a single point-to-point path
for each carrier, used with standard carriers, but many carriers can be used
without significant interference with each other, outside of early spring.
This is because of the 3D ether space available to the carriers, in contrast
to the 1D ether used by IEEE802.3. The carriers have an intrinsic collision
avoidance system, which increases availability.
</p>
</blockquote>
같이 보기
- 인라인 인용문을 위한
<q>요소. - 인용문 출처 표기를 위한
<cite>요소.