티스토리 블로그 게시물내에 원하는 위치로 이동 - 앵커(Anchor) 활용하기

게시물 상단

상단으로 이동 | 하단으로 이동 | 이미지로 이동 

블로그를 운영하면서 생기는 고민 중 한가지... 내가 작성한 게시물에서 핵심내용, 즉 전달하고자 하는 부분을 좀더 많은 분들이 봤으면 하는 생각이 들게 됩니다. 지금 알려드릴 방법은 다음과 같은 상황에서 활용하시면 좋은 팁이 될 수 있으니 적절한 곳에서 활용해 보시기 바랍니다. 

앵커(Anchor) 활용 방법

 - 게시물 내에서 원하는 위치로 바로 이동 (링크를 통해서 다른 게시물로 이동과는 다름)

 - 게시물의 흐름을 조절 할 수 있음 (1번, 2번, 3번 원하는 곳으로 이동)

 - 가장 하단에서 블로그 최상단으로 이동 (스크롤을 귀찮아 하시는 분들을 위한 친절한(?) 서비스 ^^)

사용법은 Anchor라는 태그를 활용하여 원하는 위치에 이름을 부여하고 해당 위치로 이동하게 하는 방법입니다. 링크를 통해서 다른 게시물로 이동하는게 아니라 본인의 게시물 내에서 원하는 위치로 이동하게 하는 방법입니다. 

이 방법은 HTML로 입력해야하기 때문에 본문 작성시에는 HTML모드로 변경하거나 블로그 전체에 적용할때에는 꾸미기>HTML/CSS 편집에서 입력해야 합니다. 

사용법#1 : 이동할 위치를 지정

이동하려는 블로그 위치에 이름을 지정해 줍니다. 

<div id="goto01"></div>    // goto01이 고유한 이름이 됩니다.

사용법#2 : 지정된 위치로 이동이 가능한 링크 만들기

링크할곳에 고유한 이름으로 이동하는 이름으로 링크를 생성합니다. 

<a herf="#goto01">상단으로 이동</a>  // a href는 링크로 이동하라는 html이며 #고유한 이름으로 입력해 주시면 됩니다. html에서 저렇게 입력하시면 실제 게시물에서는 링크가 걸린 상단으로 이동이라는 내용이 보이게 됩니다.

그럼 지금 게시물에 앵커를 삽입해서 게시물 상단, 하단, 싸이 뮤비 이미지로 이동하는 링크를 만들어 보겠습니다. 

싸이 뮤비 이미지

상단으로 이동 | 하단으로 이동 | 이미지로 이동 

실전 적용방법

아래 내용을 게시물 최상단, 하단, 싸이 뮤비 이미지에 삽입했습니다. 위에서 부터 순서대로 상단, 하단, 이미지가 있는 각각 위치에 삽입해 주시기 바랍니다. 반드시 HTML상태에서 입력해야 합니다. 

<div id="PostTop"></div>    

<div id="PostBottom"></div>

<div id="PostImage"></div>

그리고 각 위치로 이동하는 링크를 포함한 텍스트가 있습니다. 파란색 텍스트만 실제 게시물에서 보이게 됩니다.

<a href="#PostTop">상단으로 이동</a> | <a href="#PostBottom">하단으로 이동</a> | <a href="#PostImage" target="_top">이미지로 이동</a>

이렇게 입력하게 되면 상단, 하단, 그밖에 특정 위치로 자유롭게 이동이 가능하기 때문에 본인의 작성한 게시물 중 핵심내용으로 방문자를 좀더 쉽게 유도할 수 있습니다. 

제 블로가 하단에 있는 블로그 메뉴로 이동도 이 방법을 통해서 구현된 내용입니다. 

게시물 하단

상단으로 이동 | 하단으로 이동 | 이미지로 이동