목차(TOC)
문서나 웹페이지의 내용을 구조화하고, 사용자가 원하는 섹션으로 쉽게 이동할 수 있도록 돕는 탐색 목록입니다.
개요
목차(Table of Contents, TOC)는 긴 문서의 핵심 내용을 요약하고, 각 섹션으로 연결되는 링크를 제공하는 역할을 합니다. 이를 통해 사용자는 문서의 전체 구조를 빠르게 파악하고, 관심 있는 내용에 효율적으로 접근할 수 있습니다.
참고
웹사이트에서 목차는 일반적으로 문서의 상단이나 사이드바에 위치하여, 스크롤을 따라다니는 형태로 제공되기도 합니다.
기능 및 역할
목차는 다음과 같은 주요 기능을 제공합니다:
- 문서 구조화: 문서의 계층적 구조(예: 제목, 소제목)를 시각적으로 보여줍니다.
- 쉬운 탐색: 각 목차 항목은 문서의 특정 위치로 바로 이동하는 하이퍼링크 역할을 합니다.
- 사용자 경험 개선: 사용자가 필요한 정보를 빠르게 찾을 수 있도록 도와 웹사이트의 유용성을 높입니다.
HTML 구조
목차는 주로 HTML의 링크(<a>)와 목록 태그(<ul>, <li>)를 사용하여 구현됩니다.
링크의 href 속성에는 이동할 섹션의 id를 지정합니다.
| 태그 | 속성 | 설명 |
|---|---|---|
<div class="toc"> |
- | 목차 전체를 감싸는 컨테이너입니다. |
<ul> |
- | 목차 항목들을 담는 순서 없는 목록입니다. |
<li> |
- | 목차의 개별 항목을 나타냅니다. |
<a> |
href="#id값" |
특정 섹션의 id로 이동하는 하이퍼링크입니다. |
<section>, <div> |
id="id값" |
목차의 링크가 연결될 실제 콘텐츠 영역입니다. |
예시
아래 HTML 코드는 목차와 실제 콘텐츠 섹션이 어떻게 연결되는지 보여줍니다.
HTML
<div class="toc"> <div class="toc-title">목차</div> <ul> <li><a href="#intro">소개</a></li> <li><a href="#details">상세 내용</a></li> </ul> </div> <section id="intro"> <h2>소개</h2> <p>문서의 첫 번째 섹션입니다.</p> </section> <section id="details"> <h2>상세 내용</h2> <p>문서의 두 번째 섹션입니다.</p> </section>
댓글