HTML에서 책갈피(bookmark) 링크를 만들면 방문자가 웹 페이지의 특정 섹션으로 바로 이동할 수 있어 사용자 경험이 크게 향상됩니다. 특히 내용이 긴 페이지에서 목차처럼 활용하면 매우 유용합니다.
책갈피 링크란?
책갈피는 '명명된 앤커(named anchor)'라고도 불리며, 페이지 내의 특정 위치에 이름을 지정해 두고 링크를 통해 해당 위치로 점프하는 기능입니다. 기본적인 원리는 다음과 같습니다.
- 먼저 이동하고 싶은 위치에 책갈피(앤커)를 생성합니다.
- 그다음 해당 책갈피를 가리키는 링크를 추가합니다.
HTML5에서 주의할 점
예전에는 <a> 태그의 name 속성을 사용해 책갈피를 만들었지만, 이 속성은 HTML5에서 폐기(deprecated)되었습니다. 따라서 새로운 프로젝트에서는 사용하지 않는 것이 좋습니다.
HTML5에서는 대신 id 속성을 사용하는 것이 표준적인 방법입니다. 어떤 요소든 id를 부여하면 그 위치가 곧 책갈피가 됩니다.
예제 코드
아래 예제는 목차 링크를 클릭하면 페이지 하단의 '스크립팅 언어' 섹션으로 이동하는 코드입니다. 먼저 전통적인 name 속성 방식을 살펴보겠습니다.
<html> <head> <title>HTML Bookmark Link</title> </head> <body> <h1>Tutorials</h1> <p> <a href="#z">Learn about Scripting Languages</a> </p> <h2>Programming</h2> <p>Here are the tutorials on Programming.</p> <h2>Mobile</h2> <p>Here are the tutorials on App Development</p> <h2>Design</h2> <p>Here are the tutorials on Website Designing</p> <h2>Databases</h2> <p>Here are the tutorials on Databases.</p> <h2>Networking</h2> <p>Here are the tutorials on Networking</p> <h2>Java Technologies</h2> <p>Here are the tutorials on Java Technologies.</p> <h2>Digital Marketing</h2> <p>Here are the tutorials on Digital Marketing.</p> <h2> <a name="z">Scripting Languages</a> </h2> <p>Here are the tutorials on Scripting Languages.</p> </body> </html>
동작 원리
링크의 href 값이 #z이므로, 클릭 시 브라우저는 name 또는 id가 z인 요소를 찾아 그 위치로 스크롤합니다. 여기서 # 기호는 같은 페이지 내부의 앤커를 가리킨다는 의미입니다.
HTML5 권장 방식: id 속성 사용하기
앞서 언급했듯이 name 속성은 더 이상 권장되지 않으므로, 아래와 같이 id 속성을 활용하는 것이 좋습니다.
<a href="#scripting">스크립팅 언어 배우기</a> ... <h2 id="scripting">Scripting Languages</h2>
이 방식은 <a> 태그뿐 아니라 <h2>, <div>, <p> 등 모든 HTML 요소에 적용할 수 있어 더욱 유연합니다.
마무리 정리
- 책갈피 링크는 페이지 내 특정 위치로 이동시키는 앤커 기능이다.
- 링크는
href="#이름", 목적지는id="이름"으로 지정한다. - <a> 태그의 name 속성은 HTML5에서 폐기되었으므로 id 속성을 사용하자.
이 간단한 기법만 익혀도 긴 문서나 FAQ 페이지의 네비게이션을 훨씬 깔끔하게 구성할 수 있습니다.