💡 퀵 접속: htm.kr/blockquote

HTML <blockquote> 태그

태그 설명

<blockquote> 태그는 다른 출처에서 인용한 긴 인용문을 정의할 때 사용합니다. 브라우저는 보통 <blockquote> 요소를 들여쓰기하여 표시합니다.

주요 속성

속성 설명
cite URL 인용문의 출처 URL을 지정합니다.

기본 예제

<blockquote cite="https://www.example.com/quote">
    이것은 인용문입니다. 다른 출처에서 가져온 긴 인용문을 표시할 때 사용합니다.
</blockquote>

실제 사용 예제

<blockquote cite="https://www.gutenberg.org/files/1342/1342-h/1342-h.htm">
    "It is a truth universally acknowledged, that a single man in possession of a good fortune, must be in want of a wife."
    <footer>— Jane Austen, <cite>Pride and Prejudice</cite></footer>
</blockquote>

블로그 실전 예제

<!-- 1. 책 인용 예제 -->
<blockquote class="book-quote" cite="https://www.gutenberg.org/ebooks/1342">
    "인생은 당신이 만나는 사람들로 이루어져 있습니다. 그들이 당신의 인생을 만듭니다."
    <footer>— <cite>작은 아씨들</cite>, 루이자 메이 올컷</footer>
</blockquote>

<!-- 2. 인터뷰 인용 예제 -->
<blockquote class="interview-quote" cite="https://example.com/interview/2024">
    "성공의 비결은 실패를 두려워하지 않는 것입니다. 실패는 성공으로 가는 과정의 일부입니다."
    <footer>— <cite>2024년 1월 인터뷰</cite>, 김개발 개발자</footer>
</blockquote>

<!-- 3. 뉴스 기사 인용 예제 -->
<blockquote class="news-quote" cite="https://example.com/news/2024/01">
    "새로운 기술 트렌드는 AI와 머신러닝이 주도할 것으로 예상됩니다."
    <footer>— <cite>2024 기술 트렌드 리포트</cite>, 테크뉴스</footer>
</blockquote>

<style>
/* 블로그용 스타일링 */
.book-quote {
    background-color: #f8f9fa;
    border-left: 4px solid #e83e8c;
    padding: 20px;
    margin: 20px 0;
    font-style: italic;
}

.interview-quote {
    background-color: #e3f2fd;
    border-left: 4px solid #2196f3;
    padding: 20px;
    margin: 20px 0;
}

.news-quote {
    background-color: #fff3e0;
    border-left: 4px solid #ff9800;
    padding: 20px;
    margin: 20px 0;
}

blockquote footer {
    margin-top: 15px;
    font-size: 0.9em;
    color: #666;
}

blockquote cite {
    font-style: normal;
    font-weight: 600;
    color: #333;
}

/* 반응형 스타일링 */
@media (max-width: 768px) {
    blockquote {
        padding: 15px;
        margin: 15px 0;
    }
    
    blockquote footer {
        font-size: 0.85em;
    }
}
</style>

실제 보여지는 모양

1. 책 인용문

"인생은 당신이 만나는 사람들로 이루어져 있습니다. 그들이 당신의 인생을 만듭니다."
작은 아씨들, 루이자 메이 올컷

2. 인터뷰 인용문

"성공의 비결은 실패를 두려워하지 않는 것입니다. 실패는 성공으로 가는 과정의 일부입니다."
2024년 1월 인터뷰, 김개발 개발자

3. 뉴스 기사 인용문

"새로운 기술 트렌드는 AI와 머신러닝이 주도할 것으로 예상됩니다."
2024 기술 트렌드 리포트, 테크뉴스

짧은 인용문 <q> 태그 사용법

<!-- 기본 사용법 -->
<p>아인슈타인이 말했듯이, <q cite="https://example.com/einstein-quote">상상력은 지식보다 중요합니다.</q></p>

<!-- 여러 인용문 사용 예제 -->
<p>
    <q class="quote-inline">삶이 있는 한 희망은 있다.</q> - 키케로<br>
    <q class="quote-inline">오늘 할 수 있는 일을 내일로 미루지 마라.</q> - 벤자민 프랭클린
</p>

<style>
.quote-inline {
    color: #2196f3;
    font-style: italic;
    quotes: "«" "»";
}
</style>

q 태그 실제 보여지는 모양

아인슈타인이 말했듯이, 상상력은 지식보다 중요합니다.

삶이 있는 한 희망은 있다. - 키케로
오늘 할 수 있는 일을 내일로 미루지 마라. - 벤자민 프랭클린

참고사항

  • <blockquote> 태그는 긴 인용문에 사용하며, 짧은 인용문은 <q> 태그를 사용합니다.
  • cite 속성을 사용하여 인용문의 출처를 명시하는 것이 좋습니다.
  • 인용문의 출처를 명확히 하기 위해 <footer>와 <cite> 태그를 함께 사용할 수 있습니다.
  • CSS를 사용하여 들여쓰기나 스타일을 추가로 지정할 수 있습니다.

블로그 작성 팁

  • 인용문의 종류에 따라 다른 스타일을 적용하여 시각적 구분을 만듭니다.
  • 출처를 명확히 표시하여 신뢰성을 높입니다.
  • 모바일 환경을 고려한 반응형 스타일링을 적용합니다.
  • 인용문의 내용이 너무 길지 않도록 적절한 길이를 유지합니다.
  • 인용문 주변에 여백을 주어 가독성을 높입니다.

브라우저 지원

모든 주요 브라우저에서 지원됩니다.

  • Chrome: 지원
  • Firefox: 지원
  • Safari: 지원
  • Edge: 지원
  • Opera: 지원