🧭 티스토리 자동 목차 설정법 완전 정복
✨ 서론: 목차 하나로 블로그 완성도가 달라진다?
티스토리 블로그를 운영하다 보면 콘텐츠가 길어질수록 목차의 필요성을 절실히 느끼게 됩니다. 방문자는 정보를 빠르게 찾고 싶어 하고, 검색 엔진도 체계적인 구조를 좋아하죠. 특히 개발 블로그나 튜토리얼 중심 블로그라면 자동 목차는 선택이 아닌 필수입니다.
이번 글에서는 Tocbot 라이브러리를 활용해 자동 목차를 적용하고, 일반적인 적용법으로는 해결되지 않는 아래와 같은 4가지 문제점까지 완벽하게 해결하는 방법을 안내합니다.
✅ 적용 스킨: Letter 기준
✅ 주요 키워드: 티스토리, 자동 목차, Tocbot
📌 본론: 자동 목차 적용 + 문제 해결 실전 가이드
1️⃣ 기본 구성 – Tocbot 자동 목차 생성
HTML 편집
- 관리자 페이지 → 꾸미기 > 스킨 편집 > HTML 편집
- <head> 태그 바로 위에 아래 코드 삽입
|
html
<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>
|
|
html
<div class="toc toc-fixed"></div>
|
CSS 편집
- 상단 탭에서 CSS로 이동해 가장 아래에 붙여넣기:
|
css
.toc-absolute {
display: flex;
position: absolute;
margin-top:165px;
}
.toc-fixed {
position: fixed;
top: 165px;
}
.toc {
right: calc((100% - 850px) / 2 - 300px);
width: 250px;
padding: 10px;
box-sizing: border-box;
}
.toc-list { margin-top: 10px !important; font-size: 0.9em; }
.toc > .toc-list li { margin-bottom: 10px; }
.toc > .toc-list .toc-link::before { margin-top: -0.45em; }
.toc-default-header { display: none; }
.toc > .toc-list li a { text-decoration: none; }
.toc-list-item .is-collapsed { max-height: 3000px; }
|
JavaScript 삽입 (스크립트)
- </body> 바로 위에 삽입:
|
html
<script>
var content = document.querySelector('.article_view');
var startContent = document.createElement("h7");
startContent.classList.add('toc-default-header');
content.insertBefore(startContent, content.firstChild); var headings = content.querySelectorAll('h1, h2, h3, h4, h5, h6, h7');
var headingMap = {};
Array.prototype.forEach.call(headings, function (heading) {
if (heading.parentElement.classList.contains('another_category')) {
heading.classList.add('another_category_header');
} else {
var id = heading.id ? heading.id : heading.textContent.trim().toLowerCase()
.split(' ').join('-').replace(/[\!\@\#\$\%\^\&\*\(\):]/ig, '');
headingMap[id] = !isNaN(headingMap[id]) ? ++headingMap[id] : 0;
heading.id = headingMap[id] ? id + '-' + headingMap[id] : id;
}
});
tocbot.init({
tocSelector: '.toc',
contentSelector: '.article_view',
headingSelector: 'h1, h2, h3, h4, h7',
hasInnerContainers: false,
ignoreSelector: '.another_category_header'
});
$(document).ready(function(){
var toc = $('.toc');
toc.addClass('toc-absolute');
var toc_top = toc.parent().offset().top;
$(window).scroll(function() {
if ($(this).scrollTop() >= toc_top) {
toc.addClass('toc-fixed').removeClass('toc-absolute');
} else {
toc.addClass('toc-absolute').removeClass('toc-fixed');
}
});
});
</script>
|
2️⃣ 주요 문제 해결 4가지
🔍 문제 1: '카테고리 글 더 보기' 플러그인과 충돌
- 해당 h4 태그에 .another_category_header 클래스를 부여하고
- tocbot.init()의 ignoreSelector 속성으로 제외 처리
🔍 문제 2: 스크롤 전 목차가 안 보임
- CSS 탭에서 .inner_index의 overflow: hidden을 visible로 수정
|
css
.inner_index {
overflow: visible; } |
- 혹시 몰라 하위 요소에 overflow: hidden 재지정해 레이아웃 보호
🔍 문제 3: 왼쪽 표시 바 정렬 문제
- CSS에서 .toc-link::before에 margin-top: -0.45em으로 조정
🔍 문제 4: 콘텐츠 시작 전 목차 강조 오류
- <h7> 태그를 눈에 보이지 않게 생성해 첫 섹션 전 목차 표시 해결
🔚 결론: 깔끔한 자동 목차로 UX와 SEO를 동시에
자동 목차는 단순한 장식이 아닙니다. 콘텐츠 구조를 명확히 하고, **사용자 경험(UX)**과 검색엔진 최적화(SEO) 모두에 긍정적인 영향을 줍니다. 이 글에서 소개한 방법과 개선 방안을 적용한다면 여러분의 티스토리 블로그도 훨씬 더 전문적이고 신뢰감 있는 모습을 갖출 수 있습니다.
📣 이제 여러분의 블로그에 자동 목차를 추가해보세요!
지금 바로 스킨 편집에 들어가 적용해보면, 효과를 바로 체감할 수 있을 거예요!
❓ Q&A 섹션
Q1. Tocbot은 무료인가요?
A. 네, 오픈소스 라이브러리로 누구나 자유롭게 사용할 수 있습니다.
Q2. 다른 스킨에서도 작동하나요?
A. 대부분 작동하지만, 클래스 구조가 다르기 때문에 약간의 수정이 필요할 수 있습니다.
Q3. 목차가 작동하지 않을 땐 어떻게 하나요?
A. 개발자 도구(F12)를 켜서 콘솔 오류를 확인하거나, tocbot.init() 위치 및 headingSelector 설정을 확인해보세요.
Q4. 제목에 아이콘을 넣고 싶은데 가능할까요?
A. 가능합니다. CSS에서 ::before 선택자를 활용하면 텍스트 앞에 아이콘을 추가할 수 있어요.
Q5. 다른 목차 플러그인은 없나요?
A. tocify, smooth-scroll, anchor-js 등 다양한 대안이 있으나, 사용 편의성과 커스터마이징을 고려할 때 Tocbot이 가장 추천됩니다.
