티스토리 블로그 게시물내에 원하는 위치로 이동하기

블로그를 운영하던중에 한페이지 내에서 많은 정보가 포함되면서

제 블로그를 방문하시는 분이 원하는 정보를빠르게 볼수있게 하고싶다는 생각이 들었습니다.

물론 PC로 접속하시는 분들은 CTRL + F 를 통해 원하시는 키워드를 검색하셔서

바로 해당 부분으로 이동해 원하는 정보를 빠르게 얻어가실수 있지만

요즘 PC보다 모바일로 접속하여 보시는 분들이 더 많은 세상이라

목차를 적어놓고 해당 목차를 눌렀을때 해당 정보로 바로 이동할수 있게 하는 방법을 찾아

저와 같은 고민을 하고 계신 분들께 도움이 되고자 포스팅을 하게 되었습니다.

(그러고 보니 저 또한 PC보다 모바일을 통해 검색하는 빈도가 훨씬 높긴 하네요)

그럼 티스토리 블로그 게시물내에서 원하는 위치로 이동하도록 설정하는 방법에 대해 알아보겠습니다.

티스토리 게시물의 경우 Html을 Base로 작성되기 때문에

HTML기능중 Anchor라는 Tag를 통해 해당 부분을 구현할 수 있습니다.

티스토리 블로그 게시물내 원하는 위치 이동 설정하기 (Anchor)

기본적인 Anchor 사용방법은 다음과 같습니다.

1. 이동할 위치 정하기

#이동할 위치를 지정하기
<div id="여기로이동"></div>

위에서 "여기로이동" 부분에 고유한 이름을 넣어주시면 됩니다.

2. 지정된 위치로 이동을 하는 링크 만들기

#지정된 위치로 이동링크 만들기
<a herf="여기로이동">노출될이름</a>

1번에서 설정한 부분으로 이동을 설정하기 위해서 "여기로이동" 부분에 1번에서 설정한 고유한 이름을 넣어주시면됩니다. 또한 "노출될이름" 부분에 해당 링크를 표시할 이름을 정해주면 됩니다.

실제 사용되는 예시를 그림을 통해 보여드리겠습니다.

이동될 위치에 앞서 설명한것과 같이 작성하였던 예시입니다.

위 그림에서 설정한 위치로 이동할 링크를 작성하였던 예시입니다.

이렇게 링크를 설정하시면 실제 화면상에서는 타 사이트에 링크를 건것 처럼 아래와 같이 표시가 됩니다.

Anchor설정에 대한 설명은 이쯤하고 티스토리 게시글에서

어떻게 진입하여 적용해야 되는지에 대해 추가적으로 설명드리도록 하겠습니다.

1. 티스토리에 로그인후 새글 또는 이전에 작성할 글을 수정하는 페이지로 이동합니다.

2. 우측 상단에 기본모드를 HTML로 변경합니다.

(아래 노란색으로 마킹해둔 부분입니다)

3. 아래와 같이 창이 변경되며, 변경된 부분에서 위에 Anchor설정하기를 통해 가이드 드린대로 적용해 주시면 됩니다.

갑자기 이상한 글자들이 튀어나온다고 놀라지 마세요 :)

마지막으로 해당 게시글에도 다시 맨 위로 돌아가도록

Anchor 예제 링크를 아래 달아두며 마무리 하도록 하겠습니다 :)