HTML <cite> 태그

<p>
    <cite>해리 포터와 마법사의 돌</cite>은 
    J.K. 롤링의 첫 번째 소설입니다.
</p>

<p>
    빈센트 반 고흐의 <cite>별이 빛나는 밤</cite>은 
    1889년에 그려진 유명한 작품입니다.
</p>

<!-- 1. 책 리뷰 -->
<article class="book-review">
    <h2>이번 주 추천 도서</h2>
    <p>
        <cite title="저자: 유발 하라리">사피엔스</cite>는 
        인류의 역사를 새로운 관점에서 바라보는 
        혁신적인 책입니다.
    </p>
    <blockquote>
        "인류는 이야기를 통해 협력한다."
        <footer>— <cite>사피엔스</cite>, 유발 하라리</footer>
    </blockquote>
</article>

<!-- 2. 영화 리뷰 -->
<article class="movie-review">
    <h2>주말 영화 추천</h2>
    <p>
        <cite title="감독: 크리스토퍼 놀란">인터스텔라</cite>는 
        시간과 공간을 넘나드는 SF 영화의 걸작입니다.
    </p>
</article>

<!-- 3. 스타일링 예제 -->
<style>
.cite-custom {
    font-style: normal;
    color: #2196f3;
    border-bottom: 1px dotted #2196f3;
    text-decoration: none;
}

.cite-custom:hover {
    background-color: #e3f2fd;
    padding: 2px 4px;
    border-radius: 3px;
}

.book-review cite {
    font-weight: 600;
    color: #e91e63;
}

.movie-review cite {
    font-style: normal;
    background-color: #f5f5f5;
    padding: 2px 6px;
    border-radius: 3px;
}
</style>

<p>
    <cite class="cite-custom" title="발매일: 2024년">새로운 앨범</cite>이 
    출시되었습니다.
</p>