HTML의 <cite> 태그는 영화, 노래, 그림, 책 등 저작물(창작물)의 제목을 표시할 때 사용합니다. 브라우저에서는 기본적으로 이탤릭체로 렌더링되며, 검색 엔진과 스크린 리더가 해당 텍스트를 저작물 제목으로 인식할 수 있도록 의미론적(semantic) 정보를 제공합니다.
아래 예제를 통해 <cite> 태그의 실제 사용 방법을 살펴보겠습니다.
예제 코드
<!DOCTYPE html> <html> <body> <h1>Books</h1> <h2>Java</h2> <p>Refer the following books to learn Core Java:</p> <p><cite>Core Java: An Integrated Approach</cite> by R. Nageswara Rao.</p> <p><cite>Java - The Complete Reference</cite> by Herbert Schildt.</p> <h2>AngularJS</h2> <p>Refer the following books to learn AngularJS:</p> <p><cite>Pro AngularJS</cite> by Adam Freeman</p> <p><cite>Learning AngularJS: A Guide to AngularJS Development</cite> by Ken Williamson</p> </body> </html>
실행 결과
위 코드를 실행하면 각 도서 제목이 이탤릭체로 표시됩니다. 예제에서는 <cite> 태그를 활용해 여러 프로그래밍 서적의 제목을 마크업했습니다.
핵심 코드 분석
위 예제에서 저작물 제목을 설정한 부분은 다음과 같습니다.
<h2>Java</h2> <p>Refer the following books to learn Core Java:</p> <p><cite>Core Java: An Integrated Approach</cite> by R. Nageswara Rao.</p> <p><cite>Java - The Complete Reference</cite> by Herbert Schildt.</p>
보시다시피 책 제목은 다음과 같이 <cite> 태그로 감싸서 표시합니다.
<cite>Core Java: An Integrated Approach</cite> by R. Nageswara Rao
<cite> 태그 사용 시 참고 사항
- 표시 범위: HTML5 명세에 따르면
<cite>는 영화, TV 프로그램, 연극, 음악 작품, 회화, 조각, 전시회, 소프트웨어, 게임, 웹사이트 등 창작된 저작물의 제목에만 사용해야 합니다. - 사람 이름에는 부적합: 저자나 아티스트의 이름은
<cite>가 아닌 일반 텍스트 또는<span>으로 표기하는 것이 권장됩니다. - CSS 커스터마이징: 기본 이탤릭체가 마음에 들지 않으면 CSS의
font-style속성으로 자유롭게 변경할 수 있습니다.