페이지 내부에서 이동되는 하이퍼링크 만드는 방법

블로그나, 웹사이트를 제작하다 보면 글이 길거나 참조할만한 위치를 나타내기 위해 페이지 내 위치로 이동시키게 하고 싶을 때가 있습니다.

기존 a태그와 id속성을 이용해서 링크를 #문자로 이동시키게 하는 방법을 소개합니다.

레퍼런스 사이트에서는 하이퍼링크 종류 가운데 북마크(Bookmark)기능으로 정의하고 있네요.

기본적으로 다음과 같이 사용됩니다.

①'이동시키고자 하는 곳'을 클릭하면 페이지 내의 ②'이동된 곳'으로 이동합니다.

실제로 어떻게 사용하는지 예를 들어보겠습니다.~

① 이동시키고자 하는 곳

<a href="#there">이동시키고자 하는 곳으로 바로가기 클릭</a>

기본적으로 <a>태그의 이동경로 href속성에 #을 붙여 네임을 달아줍니다. 네임은 ①, ② 번 서로 연결이 가능한 인식가능한 표지 같은 기능이라고 생각하시면 될 듯 합니다. 따라서 서로 연결되도록 동일한 네이밍을 써주면 됩니다. 네이밍은 영문과 숫자가 가능합니다.

만일 웹 사이트라면 웹페이지 파일명 뒤에 #네임이 붙습니다.

예) test.html#go

② 이동된 곳

실제로 이동 되어 보여질 곳에 id="네임"의 속성을 달아줍니다. 위 예제의 h3뿐 아니라, h1, h2... 및 span, p 태그 모두 가능하지요.

▶▶실제로 동작되는 데모소스 보기

실제로 웹 페이지 외에 티스토리나 네이버 블로그 같은 블로그 페이지에도 글이 길어지거나 할 때, 글 내에 위처럼 바로가기 링크를 넣을 수 있습니다.

위와 같은 형식으로 HTML태그 편집 모드로 전환하여 편집기상에서 사용해주면 되는것이죠.

생각보다 간단하니 한번만 감을 잡으면 어렵지 않을 듯 합니다.

혹시 궁금사항 있으면 댓글 남겨주세요 :)