HTML에서 앵커(<a>) 링크를 사용하면 다른 페이지나 다른 웹사이트로 연결할 수 있습니다. 그렇다면 웹페이지의 특정 부분으로 바로 이동하려면 어떻게 해야 할까요?
그 답은 바로 점프 링크(Jump Link)입니다.
점프 링크는 단순히 페이지를 불러오는 데 그치지 않고, 페이지 내 특정 위치로 화면을 즉시 이동시켜 주는 링크입니다. 사이트 내부의 다른 페이지로 연결할 때도 사용할 수 있고, 소셜 미디어나 이메일 등으로 외부에 공유할 때도 활용할 수 있습니다.
이러한 링크는 방문자가 어디서 접속했는지에 관계없이 항상 작동하며, 기본적인 HTML만 있으면 별도의 추가 설정 없이 구현할 수 있다는 장점이 있습니다.
앵커 점프 링크 만들기
HTML에서 앵커 링크는 텍스트가 들어 있는 <a> 태그 한 쌍으로 만들 수 있습니다. 아래는 그 예시입니다:
<a>아무 곳으로도 이동하지 않는 링크입니다!</a>링크 대상에는 id 속성 사용하기
점프 링크를 만들려면 '링크'와 '대상(target)', 두 가지 요소가 필요합니다. 대상은 웹페이지 안에서 id 속성을 가진 어떤 요소든 될 수 있습니다.
가장 흔하게 사용되는 대상은 <h1>, <h2>, <h3> 같은 제목 태그(H 태그)입니다. 일반적으로 이런 용도를 위해 모든 H 태그에 미리 id를 추가해 두는 것이 좋은 습관입니다.
예를 들어, 아주 긴 웹페이지가 있고 그중 다음과 같은 섹션으로 이동시키고 싶다고 가정해 보겠습니다:
<h2 id="extra_content">링크하지 않으려는 추가 콘텐츠</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed porta est, nec pretium lectus. Quisque sit amet porta risus, sed faucibus magna.
</p>
<h2 id="linked_content">연결하고 싶은 섹션의 소제목</h2>
<p>
Vivamus orci erat, sagittis vitae aliquam at, pretium sagittis neque. Curabitur vel eros in turpis elementum sollicitudin.
</p>URL에 대상 요소 연결하기
대상 요소가 준비되었다면, 해당 페이지 URL 끝에 #linked_content를 붙여 점프 링크를 만들 수 있습니다. 대상 요소의 id 값이 무엇이든 #(샵/해시태그) 기호 뒤에 붙여주면 됩니다.
같은 페이지 안에서 특정 섹션으로 이동하는 내부 링크를 만들 경우, href 속성에 https://www.WebsiteName.com 같은 도메인 주소를 적어줄 필요가 없습니다.
내부 점프 링크의 예시는 다음과 같습니다:
<a href="#linked_content">같은 페이지의 소제목으로 이동하는 링크</a>만약 다른 웹사이트에 링크를 추가하거나, 소셜 미디어·이메일 등으로 링크를 공유해야 한다면 어떻게 할까요? 전체 URL 끝에 똑같이 #linked_content를 붙여주면 동일하게 작동합니다:
<a href="https://www.WebsiteName.com/PageName/#linked_content">다른 페이지의 소제목으로 이동하는 링크</a>추가 팁: 부드러운 스크롤 효과 넣기
점프 링크 클릭 시 화면이 갑자기 이동하는 대신 부드럽게 스크롤되도록 하려면 CSS의 scroll-behavior 속성을 활용할 수 있습니다:
html {
scroll-behavior: smooth;
}'name' 속성에 대한 참고 사항
과거에는 비어 있는 앵커 태그에 'name' 속성을 지정하는 방식으로 점프 링크의 대상을 설정했습니다. 하지만 Mozilla Developer Network(MDN)에 따르면 HTML5부터 이 방식은 폐기된(deprecated) 문법입니다. 일부 브라우저에서는 여전히 작동할 수 있지만, 최신 표준 방식인 id 속성을 사용하는 것을 강력히 권장합니다.
이 글이 웹페이지의 특정 부분으로 이동하는 점프 링크를 만드는 데 도움이 되기를 바랍니다!