| 2023-09-29 219 View 공개 |
HTML 문서에 목차를 만들고 목차 항목을 바로가게 (하이퍼링크) 만들려면 다음과 같이 HTML과 앵커 태그를 사용하여 수행할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML 목차와 바로가기</title>
</head>
<body>
<h1>HTML 문서 목차</h1>
<ul>
<li><a href="#section1">섹션 1</a></li>
<li><a href="#section2">섹션 2</a></li>
<li><a href="#section3">섹션 3</a></li>
</ul>
<h2 id="section1">섹션 1</h2>
<p>이 섹션은 첫 번째 섹션입니다.</p>
<h2 id="section2">섹션 2</h2>
<p>이 섹션은 두 번째 섹션입니다.</p>
<h2 id="section3">섹션 3</h2>
<p>이 섹션은 세 번째 섹션입니다.</p>
</body>
</html>
위 예제에서는 제목 태그에 id 속성을 추가하여 각 섹션에 고유한 식별자를 할당하고, 목차 항목 에서 해당 식별자를 사용하여 앵커로 링크합니다.
이제 사용자가 목차 항목을 클릭하면 해당 섹션으로 바로 이동하도록 설정해야 합니다. 이는 HTML의 기본 기능이며, 위 예제에서는 이미 사용되고 있습니다. 목차 항목의 링크는 태그를 사용하여 만들었으며, 이렇게 만든 앵커는 목차 항목을 클릭하면 앵커의 href 속성 값과 일치하는 id를 가진 섹션으로 스크롤하여 이동합니다. 이렇게 하면 사용자가 목차를 클릭하면 해당 섹션으로 즉시 이동할 수 있습니다.
-6516936cd8c9d0.33481675.png)