[HTML] blockquote 태그 (긴 인용문)

728x90

HTML <blockquote> 태그란?

<blockquote> 태그는 긴 인용문을 표시할 때 사용됩니다. 즉, 다른 출처에서 가져온 내용을 인용할 때 사용하며, 브라우저는 기본적으로 들여쓰기를 적용하여 인용문임을 강조합니다.

긴 인용문에 사용
- 한두 단어가 아닌 여러 문장 이상의 긴 인용문을 포함할 때 <blockquote>를 사용합니다.
- 짧은 인용문은 <q> 태그를 사용하는 것이 적절합니다.
자동 들여쓰기 효과
- 대부분의 브라우저는 <blockquote>를 사용하면 좌우 여백을 추가하여 들여쓰기 효과를 적용합니다.
- CSS를 이용해 스타일을 조정할 수 있습니다.
출처(cite 속성) 추가 가능
- cite 속성을 사용하면 인용한 출처(URL 또는 설명)를 명시할 수 있습니다.
- 하지만 cite 속성은 브라우저에 직접 표시되지 않으며, 보조 기술(screen reader 등)에서 활용될 수 있습니다.

<p>아인슈타인은 이렇게 말했습니다:</p>
<blockquote>
  "삶은 자전거를 타는 것과 같다. 균형을 유지하려면 계속 움직여야 한다."
</blockquote>

출력 결과:

아인슈타인은 이렇게 말했습니다:

"삶은 자전거를 타는 것과 같다. 균형을 유지하려면 계속 움직여야 한다."

브라우저는 기본적으로 <blockquote> 태그에 들여쓰기 효과를 적용하여 인용문임을 강조합니다.

<blockquote cite="https://www.example.com/einstein-quote">
  "삶은 자전거를 타는 것과 같다. 균형을 유지하려면 계속 움직여야 한다."
</blockquote>

출력 결과:

"삶은 자전거를 타는 것과 같다. 균형을 유지하려면 계속 움직여야 한다."

<blockquote>
  "삶은 자전거를 타는 것과 같다. 균형을 유지하려면 계속 움직여야 한다."
  <cite>- 알베르트 아인슈타인</cite>
</blockquote>

출력 결과:

"삶은 자전거를 타는 것과 같다. 균형을 유지하려면 계속 움직여야 한다." - 알베르트 아인슈타인

<cite> 태그는 출처를 명시할 때 사용하며, 브라우저에서 기울임꼴(italic)로 표시됩니다.

cite 속성 : 인용문의 출처(웹페이지 URL 또는 텍스트)를 명시 (화면에는 직접 표시되지 않음)

→ cite 속성은 선택 사항이며, 인용문의 신뢰성을 높이는 데 도움을 줍니다.

<p>뉴턴은 이렇게 말했습니다: <q>나는 거인의 어깨 위에 서 있었다.</q></p>

<blockquote>
  "나는 거인의 어깨 위에 서 있었다."
  <cite>- 아이작 뉴턴</cite>
</blockquote>

<q> 태그는 자동으로 따옴표가 추가됨, <blockquote>는 따옴표가 없음.

728x90