블로그 목차 이동 링크 만드는 방법

티스토리, 블로거(Blogger)와 같은 블로그를 포함해 HTML을 사용한 문서의 목차 이동을 만드는 방법에 대한 글입니다. 

 

예시를 먼저 보여드리며 시작하겠습니다. 

 

목차

1. 지금 이 글을 클릭하면

 

 

 

 

 

 

 

여기로 이동하게 됩니다. 

 

 

이렇게 링크를 클릭해 글에서 내가 원하는 부분으로 이동할 수 있습니다. 많은 웹사이트들에서 이렇게 클릭하면 이동하는 경험을 해 보셨을 겁니다. 보통 이 방법을 목차에 적용시켜 해당 목차를 클릭하면 본문으로 이동하게 만듭니다. 

 

이 기능을 어떻게 만들 수 있을까요? 지금부터 알아보겠습니다. 

 

목차 링크 클릭시 이동 만드는 방법

이 기능은 HTML 편집 기능을 활용해야 합니다. 구글 블로거 같은 경우는 글 작성 화면 맨 왼쪽 위에서 사용 가능합니다. 

 

구글 블로거

티스토리 같은 경우 글 작성 화면 오른쪽 위에서 사용 가능합니다. 

 

 

티스토리

HTML 모드를 열면 이런 화면이 나올 겁니다. 

 

 

HTML 모드

이 화면에 전혀 두려워하실 필요 없습니다. 블로그에다 적은 글을 컴퓨터의 언어로 변환해 놓은 것일 뿐입니다.

 

이 화면에서 딱 두 가지를 변경해 줄 것입니다. 

 

1. 클릭할 링크를 만들어주기

 

먼저 첫 번째, 클릭할 링크를 만들어 줘야합니다. 글로 치면 "목차" 부분이죠. 이 부분을 클릭할 수 있는 무언가로 만들어 줘야 합니다. 

 

HTML모드에서 목차에 해당하는 텍스트에 <a href="#1"> <a/> 를 추가해줍시다. 

 

 

이렇게 만들어 주었습니다. " " 사이에 들어가는 숫자 혹은 문자는 아무거나 해도 상관 없습니다. <a href="#1">이라 하거나 <a href="#ABCD">로 해도 상관 없습니다.

 

 

2. 클릭하면 이동하는 장소 만들어주기

이제 클릭했을 때 이동하는 부분을 설정해 줘야 합니다. 이동할 부분의 텍스트를 찾은 다음 해당 텍스트의 태그 <h></h> 혹은 <p></p> id=" "를 추가해 주시면 됩니다. 밑의 예시처럼 태그 뒤에 id를 넣어 주시면 됩니다. 

 

 

 

id의 값은 위에 <a href="#">에서 #뒤에 추가한 값입니다. 또, 만약 태그 뒤에 style같은 것들이 붙어 있으면 꼭 컴마를 넣어주셔야 합니다. 

 

이렇게 하면 글자 클릭시 해당 내용으로 이동하는 링크가 완성됩니다. 

 

 

정리

정리하자면 이렇습니다. 

 

1. 클릭할 텍스트에 코드 추가

 

<a href="#1"> <a/>

 

ex) <p><a href='#ABCD"> </a></p>

 

2. 이동할 텍스트에 코드 추가

 

id=" "

 

ex)  <p id="ABCD"> </p>

 

 

이해가 좀 되셨나요? 블로그 운영에 도움이 되길 바라겠습니다. 감사합니다.