티스토리 블로그에 목차 넣는 방법 - jQuery TOC와 Tocbot 활용
티스토리 블로그에서 목차 넣는 방법을 찾고 계시다면, 이 글을 통해 두 가지 실전 방법을 자세히 배워보실 수 있습니다. 블로그 글이 길어질수록 목차 넣는 방법은 독자의 가독성을 높이고, 검색엔진 최적화(SEO) 측면에서도 매우 효과적인 전략입니다.
이 글에서는 티스토리 블로그에 목차 넣는 방법으로 jQuery TOC 플러그인을 직접 업로드해서 사용하는 방식과, 외부 라이브러리인 Tocbot을 활용하는 방식을 소개합니다. 목차 넣는 방법을 처음 접하시는 분들도 쉽게 따라하실 수 있도록 단계별로 설명합니다.
목차
- 1. 문단 제목 구조와 목차 넣는 방법
- 2. 방법 1 - jQuery TOC 플러그인을 활용한 목차 넣는 방법
- 3. 방법 2 - Tocbot을 사용하는 목차 넣는 방법
- 4. 마무리
1. 문단 제목 구조와 목차 넣는 방법
목차 넣는 방법을 적용하려면 먼저 문단 제목에 HTML의 h2, h3 태그를 활용해야 합니다. 이는 jQuery TOC와 Tocbot 모두 제목 태그를 기준으로 목차를 생성하기 때문입니다.
<h2>소개</h2> <p>이 블로그는 목차 넣는 방법을 소개합니다.</p> <h3>특징</h3> <p>목차 넣는 방법의 장점은 가독성과 SEO 향상입니다.</p>
2. 방법 1 - jQuery TOC 플러그인을 활용한 목차 넣는 방법
2-1. 파일 다운로드
2-2. 티스토리 업로드
티스토리 관리자 → 꾸미기 → 스킨 편집 → HTML 편집 → 파일 업로드 →
jquery.toc.min.js 업로드 후 경로 확인2-3. 스크립트 삽입
<script src="./images/jquery.toc.min.js"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
2-4. 글 본문에 목차 넣는 방법 적용
<ul id="toc"></ul> <script> $(function() { $("#toc").toc({ content: ".tt_article_useless_p_margin", headings: "h2,h3,h4" }); }); </script>
목차 넣는 방법에서 중요한 점은
.tt_article_useless_p_margin이 본문 영역 클래스라는 점입니다. 스킨마다 다를 수 있으니 확인 후 수정하세요.3. 방법 2 - Tocbot을 사용하는 목차 넣는 방법
3-1. CDN 코드 삽입
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.25.0/tocbot.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.25.0/tocbot.min.js"></script>
3-2. 목차 표시 위치 지정
<div class="toc toc-fixed"></div>
3-3. 스타일 추가
.toc-fixed { position: fixed; top: 165px; right: 20px; width: 250px; padding: 10px; background-color: #f9f9f9; border: 1px solid #ddd; }
3-4. 목차 넣는 방법 스크립트 실행
<script> tocbot.init({ tocSelector: '.toc', contentSelector: '.tt_article_useless_p_margin', headingSelector: 'h2, h3', collapseDepth: 3 }); </script>
Tocbot은 목차 넣는 방법 중에서도 가장 깔끔한 디자인을 제공하며 고정형 목차로도 사용 가능합니다.
4. 마무리
지금까지 티스토리 블로그에 목차 넣는 방법 두 가지를 살펴보았습니다. 목차 넣는 방법을 제대로 활용하면 블로그의 구조가 체계적으로 정리되고 방문자의 체류 시간도 증가합니다. jQuery TOC 방식과 Tocbot 방식 중에서 블로그 스타일에 맞게 선택해보세요.