HTML <blockquote> 태그

<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>

<!-- 기본 사용법 -->
<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>