2020. 12. 15. 09:06ㆍ카테고리 없음
블로그를 운영할 때 필요한 기능이 하나 있다. 바로 내부 링크 목차 기능이다. 이 기능은 내부 링크된 글을 클릭하면 그 위치로 이동한다. 플러그인에 이전 글 넣기는 다른 포스팅으로 넘어가는 기능이지만, 내부 링크 목차 만드는 것은 포스팅 내에서 이뤄지는 기능이다. HTML 링크 목차 만드는 방법은 이용자의 편의를 돕기 위해서 활용한다. 포스팅 글이 길어 원하는 정보를 일일이 찾을 수 없을 때, 작성자가 목록에 링크를 달아 바로 이동할 수 있는 편의를 제공하는 것이다.
티스토리 블로그 내부에서 기능을 제공해주면 편하게 작성하겠지만, 아쉽게도 제공하지 않는 기능이다. 따라서 이 기능을 사용하기 위해서는 HTML 편집이 필요하다. 그렇다고 어려운 HTML 편집이 아니기 때문에 누구나 쉽게 따라할 수 있다. 티스토리 블로그 HTML 링크 목차 만드는 방법을 소개한다.
HTML 링크 목차 만드는 방법
딱 2가지만 기억하면 된다. 기억하기 어렵다면 메모장에 저장해 두고 활용하면 된다.
<a href="#이동할 위치 영문 또는 숫자">목차 클릭 누를 때 제목</a>
<a id="이동할 위치 영문 또는 숫자">이동할 위치 제목</a>
정리가 제대로 됐는지 모르겠다. 중요한 점은 이동할 위치 영문 또는 숫자는 동일해야 한다. 그리고 <a id= 부분은 이동할 위치의 코드이고, <a href= 클릭할 제목 코드이다. 이해가 되지 않을 땐 만들어보면 이해가 쉽다. 밑에 간단히 적용방법과 예시를 적어보았다.
▷ 적용 방법
목차
<a href="#aaa">✔ 정말 보고 싶은 하늘</a>
<a href="#bbb">✔ 꼭 한번 살아보고 싶은 집</a>
<a href="#ccc">✔ 자연과 어울리는 나무</a>
<a href="#ddd">✔ 타보고 싶은 자동차</a>
이동
<a id="aaa">정말 보고 싶은 하늘</a>
<a id="bbb">꼭 한번 살아보고 싶은 집</a>
<a id="ccc">자연과 어울리는 나무</a>
<a id="ddd">타보고 싶은 자동차</a>
▶ 적용 예시
<목차>
✔ 정말 보고 싶은 하늘
✔ 꼭 한번 살아보고 싶은 집
✔ 자연과 어울리는 나무
✔ 타보고 싶은 자동차
정말 보고 싶은 하늘
꼭 한번 살아보고 싶은 집
자연과 어울리는 나무
타보고 싶은 자동차
목차 생성은 구글 SEO 최적화에 효과적이라고 알려져 있다. 블로그 운영은 최적화를 하는 과정이 중요하다. 따라서 최적화에 좋다고 생각하는 부분들은 불편해도 적극 적용해 보아야 한다.
이번에 소개한 티스토리 블로그 HTML 링크 목차 만드는 방법은 수동으로 목차 만드는 방법이었다. 검색해 보면 자바 스크립트를 활용하여 목차 자동 생성도 가능하다. 또한 jquery.toc를 한번 설정해놓으면 쉽게 목차 설정을 할 수 있다.
