초간단 티스토리 자동 목차 만들기

안녕하세요, 50대월급쟁이 입니다.

블로그를 운영하면서 몇가지 팁들을 적용한 경험이 있습니다. 그 중에서 첫번째로 소개해 드리고 싶은 것은 바로, "자동 목차 만들기" 입니다. 아무래도 블로그의 SEO 점수도 높여야 하고, 가독성도 좋아지는 만큼, 목차가 꼭 필요한데, 한땀한땀 수동으로 만들기에는 너무나 품이 많이 들어간다 생각했습니다. HTML 문법에 대한 이해도 필요하지만, 내가 작성하는 글의 순서나 제목이 변경될 때마다 수정하는 경우 휴먼 에러의 여지도 많기에, 가급적 자동으로 만들어지는 목차를 찾아보고 사용하게 되었습니다.

다행히(?) 많은 분들께서 자동으로 목차를 만들 수 있는 방법을 알려 주고 계시며, 저도 이런 저런 방법을 사용하다가 아래 "Galam님"의 블로그에 올라온 방법으로 사용하고 있습니다. 원본을 보실 분들은 아래 블로그 참고하시기 바랍니다~

티스토리 자동목차 만들기 part 5 (초간단 버전)

티스토리 자동목차 만들기. 📌 알림 웹서핑을 하다 보면 제가 만든 코드, 태그 속성, 그리고 오탈자까지 그대로 가져가 본인 작성한 글인 것처럼 사용하는 경우가 있습니다. 코드를 가져가는 것

galam.tistory.com

1. 자동 목차 만들기 요약

블로그 관리 메뉴에서 [스킨 편집]을 선택합니다.
스킨 편집 메뉴에서 [HTML 편집]을 선택합니다.
HTML 편집 상단메뉴 HTML | CSS | 파일업로드에서 HTML을 선택합니다.
아래 txt 파일로 제공된 내용을 복사하여 <body> ~ </body> 사이에 붙여넣습니다.
스킨 편집 메뉴에서 [적용] 버튼을 클릭합니다.
기존 작성된 글을 확인하여 [목차]가 나오는지 확인합니다.
[목차]가 잘 나오면 끝~~~!!!

2. 티스토리 블로그 자동목차 1단계 (HTML 편집)

자동목차를 만들기 위해서는 스킨 편집을 통해 HTML을 수정(코드 추가)해야 합니다. 그림과 같이 관리 메뉴에서 스킨편집, HTML 편집, HTML 선택하시면 됩니다.

블로그 관리 메뉴에서 [스킨 편집]을 선택합니다.
스킨 편집 메뉴에서 [HTML 편집]을 선택합니다.
HTML 편집 상단메뉴 HTML | CSS | 파일업로드에서 HTML을 선택합니다.

3. HTML 코드 수정 (추가)

HTML 코드를 수정(추가)하기 위해서는 아래 txt 파일을 먼저 다운 받으시기 바랍니다.

자동목차 HTML 편집.txt

0.01MB

그리고, HTML에서 [body]를 검색하여, <body> ~ </body> 사이에 다운받은 코드를 붙여넣기로 추가합니다. 저는 맨 아래에 추가하여 아래와 같이 수정하였습니다.

4. HTML 적용 후 결과 확인

HTML 편집이 완료되면 잊지말고 상단의 [적용] 버튼을 클릭하셔야 수정한 내용이 저장이 됩니다. 그리고, 수정된 HTML이 적용될 약간의 시간 (5~10초)이 지난 뒤 블로그의 글을 새로고침하시면 위와 같이 새로운 목차가 적용된 것을 확인할 수 있습니다.

이번 글에서 보여드리는 목차 항목들은 본문에서 사용된 <h2>, <h3>, <h4> 태그의 소제목을 이용해서 만들어 지기 때문에, 본문 작성 시 꼭 h2, h3, h4 태그를 이용하여 작성하시기 바랍니다.

5. 마무리

앞서 서론에서 말씀드린 것과 같이, 인터넷을 찾아보면 다양한 방법으로 자동목차를 구현한 사례들이 많이 있습니다. 어쩌면 제가 사용한 목차보다 더 좋아 보이는 것도 분명히 많습니다. 하지만, 저와 같이 HTML 문법이나 스킨 편집에 익숙하지 않은 초보자들이 사용하기에는 "Galam님"의 방법이 제일 쉽고 좋았던 것 같습니다. Galam님의 블로그에 보시면, 목차 색상을 변경하는 자동목차 코드, 글자색상을 변경하는 코드 등도 포함되어 있으니 직접 방문하여 확인해 보시면 더 많은 도움이 되실 것 같습니다.