blockquote element - by. UXKM

요약 설명

<blockquote> 요소는 다른 사람의 말이나 글 등 인용문을 표시할 때 사용하는 시맨틱 태그로, 문서 외부에서 가져온 긴 인용 콘텐츠를 구분하는 데 사용됩니다.
기본적으로 들여쓰기가 적용되어 시각적으로 인용이라는 의미를 강조하며, 출처가 명확할 경우 cite 속성을 통해 원본 링크를 명시할 수도 있습니다. 짧은 인라인 인용에는 <q> 요소가 적합하며, <blockquote>는 일반적으로 단락 수준의 인용에 사용됩니다.

주요 역할 및 특징

  1. 긴 인용문 표현
    • 문서에서 긴 인용문을 강조하거나 독립적으로 표현할 때 사용합니다.
    • 짧은 인용문에는 <q> 요소를 사용하는 것이 더 적합합니다.
  2. 독립적인 블록 요소

    <blockquote>는 블록 레벨 요소로, 인용된 콘텐츠를 문서의 다른 텍스트와 시각적으로 구분합니다.

  3. 출처 정보 제공
    • cite 속성을 사용해 인용문의 출처를 URL로 지정할 수 있습니다.
    • 출처를 명확히 하기 위해 <footer>와 함께 사용할 수도 있습니다.
  4. 기본 스타일

    브라우저에서 기본적으로 들여쓰기가 적용됩니다.

CSS 기본 값

<blockquote> 요소는 기본적으로 블록 레벨 요소이며, 별도의 CSS를 지정하지 않아도 아래와 같은 기본값이 적용됩니다.

기본 문법

속성

[cite] 선택 사항 <blockquote cite="URL">

인용문의 출처를 URL로 지정합니다. 브라우저에는 표시되지 않지만, 메타데이터로 사용됩니다.

예제

기본 인용문

출처가 포함된 인용문

출처를 명시한 인용문

접근성을 고려한 인용문

주의사항

  • cite 속성은 선택적이지만, 출처를 명확히 제공하는 것이 좋습니다. 이는 인용의 정확성을 높이며, 신뢰성을 부여합니다.
  • 인용문을 작성할 때, 다른 사람의 말을 그대로 가져오는 경우에는 반드시 출처를 명시하는 것이 중요합니다.