HTML로 참고 문헌 목록 만드는 방법 완벽 가이드

참고 문헌(Bibliography)이란?

참고 문헌은 논문, 보고서, 서적 등에서 인용하거나 참조한 도서 및 자료의 목록을 정리해 놓은 섹션입니다. 학술적인 글쓰기에서 필수적인 요소이며, 독자가 출처를 확인하고 추가 자료를 찾아볼 수 있도록 돕는 중요한 역할을 합니다.

HTML만으로도 이러한 참고 문헌 목록을 손쉽게 만들 수 있습니다. 이를 위해 도서 목록을 나열하는 <ol>(순서 있는 목록) 태그와 저작물의 제목을 표시하는 <cite> 태그를 함께 사용합니다.

<cite> 태그의 역할과 활용

<cite> 태그는 단순히 책 제목뿐만 아니라 노래, 그림, 영화, TV 프로그램 등 다양한 저작물의 제목을 표시할 때 사용됩니다. 이 태그는 인용(citation)을 의미하며, 태그 안에 들어가는 내용은 모두 해당 저작물의 제목임을 브라우저와 검색 엔진에 알려줍니다.

참고로 <cite> 태그로 감싼 텍스트는 대부분의 브라우저에서 기본적으로 기울임꼴(italic)로 표시되므로, 별도의 CSS 스타일 없이도 시각적으로 구분됩니다.

예제: HTML로 참고 문헌 작성하기

다음 예제를 통해 <ol> 태그와 <cite> 태그를 조합하여 참고 문헌 목록을 만드는 방법을 살펴보겠습니다.

<!DOCTYPE html>
<html>
    <head>
        <title>Bibliography</title>
    </head>
    <body>
        <h1>Bibliography</h1>
        <ol>
            <li>
                <p>E.Balagurusamy, <cite>Programming with JAVA: A Primer</cite>, 3rd edition, (2007)</p>
            </li>
            <li>
                <p>Reto Meier, <cite>Professional Android 4 Application Development</cite>, 3rd edition, (2012)</p>
            </li>
        </ol>
    </body>
</html>

코드 설명

<ol> 태그: 참고 문헌 항목들을 번호가 매겨진 순서 있는 목록으로 표시합니다.
<li> 태그: 각 참고 문헌 항목을 개별 리스트 아이템으로 감싸 줍니다.
<cite> 태그: 책 제목처럼 저작물의 이름 부분만 감싸 의미론적으로 강조합니다.

위 코드를 실행하면 번호가 매겨진 참고 문헌 목록이 출력되며, 각 책 제목은 기울임꼴로 자동 표시됩니다. 필요에 따라 CSS를 활용해 글꼴, 들여쓰기, 간격 등을 자유롭게 꾸밀 수 있습니다.