앵커(anchor) 만들어서 페이지 내 위치 이동시키기

앵커라는 단어는 많이 들어보았을 것이다. 앵커(anchor)의 사전적 의미는 '배의 닻'을 의미하며, 웹상의 html 페이지에서는 어떤 대상의 시작 지점을 알리는 의미로 쓰이기도 한다. 페이지의 내용이 많아 스크롤이 너무 길 때, 원하는 컨텐츠를 쉽게 찾을 수 없을 때 - 앵커 태그(anchor tag)를 이용하여 편리하게 이동할 수 있다.

 

아래의 이미지와 같이 section1~4로 이루어진 페이지가 있다고 가정해보자. 페이지의 상단 부분에 버튼 4개를 만들어서 클릭 시에 해당 섹션으로 바로 이동하게 한다면 방문객들이 훨씬 쉽고 편리하게 컨텐츠를 이용할 수 있을 것이다.

앵커 태그는 각 섹션의 시작 지점에 아이디값을 설정하고, a 태그를 이용하여 링크를 아이디값으로 지정해 주면 된다.

<a href="#아이디"> </a>
<div id="아이디"> </div>

예시로 div에 아이디값을 설정했지만 h2, p 등 시작 지점에 자유롭게 id값을 줄 수 있다. 아래는 버튼 1,2,3,4를 클릭했을 때에 각 섹션으로 이동하는 앵커 태그를 활용한 것이다.

버튼 2를 클릭하면 section2의 시작 지점으로 스크롤이 이동할 것이다. 

 

[추가 TIP]

특별히 위치를 지정하지 않아도 <a href="#top"></a>를 사용하면 최상단으로 이동하게 된다. 하지만 #bottom을 쓴다고 해서 하단으로 이동하지는 않는다. #top만 적용 가능하다.