연결 문서

앵커 링크

앵커 링크(Anchor Link)는 웹 페이지 내에서 특정 위치로 이동할 수 있도록 해주는 하이퍼링크의 한 유형임. 사용자가 앵커 링크를 클릭하면 해당 페이지 내의 지정된 위치(일반적으로 특정 제목이나 섹션)로 스크롤됨.

주요 개념:

1. 앵커(Anchor):
   • 앵커는 HTML에서 특정 요소에 고유한 ID를 지정하여 페이지 내의 특정 지점을 나타냄.
   • 예를 들어, <h2 id="section1">섹션 1</h2>처럼 제목에 ID를 추가하면, 이 ID가 앵커가 됨.
2. 링크 생성:
   • 앵커 링크는 일반적인 링크와 유사하지만, 링크가 웹 페이지 외부로 이동하는 대신 페이지 내의 특정 위치로 이동하게 함.
   • 링크를 만들 때, href 속성에 앵커의 ID를 사용함. 예를 들어, 아래와 같이 ID가 “section1”인 위치로 이동하는 링크를 만들 수 있음.

     <a href="#section1">섹션 1으로 이동</a>
     

   • 클릭하면 해당 페이지 내에서 “section1”이라는 ID가 있는 곳으로 바로 이동함.
3. URL 프래그먼트(Fragment):
   • 앵커 링크를 클릭하면 웹 페이지 URL에 프래그먼트가 추가됨. 예를 들어, #section1이 URL에 추가되며, 이는 사용자가 페이지의 그 부분으로 스크롤된다는 의미임.
   • URL 예시: https://example.com/page#section1.

사용 예:

앵커 링크는 긴 문서나 여러 섹션으로 나뉜 페이지에서 유용함. 예를 들어, FAQ 페이지나 블로그 포스트의 목차에서 각 섹션으로 쉽게 이동할 수 있게 해줌.

예시 코드:

<!-- 앵커가 있는 제목 -->
<h2 id="introduction">Introduction</h2>

<!-- 앵커 링크 -->
<a href="#introduction">Introduction으로 이동</a>

주요 특징:

• 페이지 내 빠른 이동을 가능하게 함.
• URL을 통해 특정 섹션에 직접 접근할 수 있음.
• 사용자가 긴 문서에서 필요한 정보를 빠르게 찾는 데 도움을 줌.