페이지 위치 링크, 웹 페이지에서 위치 이동하기 : 앵커태그

인터넷을 사용하다 보면 유용하게 사용되는 기능 중 하나가 버튼을 클릭했을 때 특정 위치로 이동하는 것이다. 흔히 볼 수 있는 곳 중 하나라면 xx위키 가 아닐까 한다. 

예시 사진을 보면 "1." 을 누르게 되면 밑에 있는 '1. 개요'로 이동하도록 되어 있다.

덕분에 원하는 정보로 쉽고 빠르게 이동할 수 있도록 되어 있다. 이러한 기능은 길게 작성되는 블로그 포스트에서도 이용할 수 있다. 

이 기능이 자바스크립트를 사용한다는 얘기가 있는 것 같기도 하고.. 아닌 거 같기도 하다.. 문제는 필자는 아직 자바스크립트를 배우지 않았다. 때문에 특정 사이트에서 안된다 하더라도 도와줄 수 없다는 것을 알아줬으면 한다. 티 스토리와 대부분의 사이트에서 가능할 거라 생각한다.

먼저 필자가 소개해줄 기능은 다음과 같다. [맨 밑으로] 버튼을 클릭하게 되면 맨 밑으로 이동하게 되고, 하단의 버튼을 누르게 되면 맨 위로 이동하게 된다.

이 기능을 활용하게 되면, 다음 페이지에서와 같은 포스트에서도 활용할 수 있게 된다.

인제 하는 법을 알기만 하면 된다. html 에 대해 조금이라도 안다면 정말 간단한 .. 작업이다.

이 기능을 만드는데 필요한 태그는 다음과 같다.

<a href="#여기"> 클릭 </a>

<a name="여기"> 이동한 곳 </a>

이것만으로 구현할 수 있는 기능이다. 한 가지 흠이라면 부드러운 화면 이동이 안된다는 것인데, 가볍고 심플하게 구현할 수 있기 때문에 괜찮다.

원리는 이렇다. '클릭'이란 글씨를 누르면 '이동한 곳'이라는 텍스트가 있는 곳으로 이동되는 것이다. '#여기' 에서 #는 현재 페이지를 뜻하며 여기라는 이름으로 저장된 곳으로 이동시킨다는 뜻이 된다. 그리고 <a name="여기"></a> 가 있는 곳이 해당 영역이 되어 클릭 시 이동되는 것이다.

인제 적용 방법을 알아보자.

한두 번 이런 기능을 사용해 보았다면 바로 알 것이다. 블로그나 보통의 커뮤니티 사이트에 보면 HTML 이라는 체크 박스가 보일 것이다. 해당 체크 박스를 누르면 내가 지금까지 작성한 글이 HTML에 맞추어 표시된다. 그 곳에서 자신이 원하는 구조에 맞추어 위에 있는 html 태그를 이용하여 사용하면 된다.

[맨 위로]