티스토리 블로그 작성시 HTML모드나 마크다운 모드를 활용해서 문단모양의 제목모양으로 설정한 항목 기준으로 최상단에 목차 및 해당 내용 이동 하이퍼링크를 만들고 싶을때 어떻게하는 게 유용할까
- 답변
티스토리 블로그에서 목차(TOC, Table of Contents)를 만들고 해당 위치로 이동하는 하이퍼링크를 설정하는 것은 독자의 가독성을 높이고 SEO(검색엔진 최적화)에도 매우 좋은 습관입니다. 티스토리에서 이를 구현하는 방법은 크게 1) 글을 쓸 때마다 수동으로 태그를 넣는 방법과 2) 스킨 자체를 수정해 자동으로 생성되게 하는 방법 두 가지가 있습니다. 상황에 맞게 더 유용한 방식을 선택해 보세요.
1. 수동 생성 방식 (HTML / 마크다운 모드)
글을 어쩌다 한 번 쓰거나, 특정 글에만 목차를 넣고 싶을 때 직관적으로 사용할 수 있는 방법입니다. '앵커(Anchor)' 태그의 원리를 이용합니다.
1단계: 이동할 도착지(본문 제목)에 ID 부여하기
본문 내의 제목(Heading) 요소에 고유한 이름(id)을 달아주어야 합니다.
HTML 모드일 때: 기존 제목 태그(<h3>, <h4> 등) 안에 id="원하는이름"을 추가합니다.
HTML
<h3 id="section1">1. 첫 번째 문단 제목</h3> <h3 id="section2">2. 두 번째 문단 제목</h3>
마크다운 모드일 때: 순수 마크다운만으로는 ID 부여가 호환되지 않는 경우가 많습니다. 따라서 마크다운 모드 안에서도 제목 부분 앞에는 HTML 앵커 태그를 섞어 쓰는 것이 가장 확실합니다.
Markdown
<a id="section1"></a> ### 1. 첫 번째 문단 제목
<a id="section2"></a> ### 2. 두 번째 문단 제목
2단계: 최상단 목차에 하이퍼링크 걸기
글 맨 위 목차 부분에서, 방금 만든 id를 찾아가도록 링크를 겁니다. 링크 주소에 #을 붙이면 해당 ID로 이동합니다.
HTML 모드일 때:
HTML
<ul> <li><a href="#section1">1. 첫 번째 문단 제목으로 이동</a></li> <li><a href="#section2">2. 두 번째 문단 제목으로 이동</a></li> </ul>
마크다운 모드일 때: (대괄호와 소괄호 활용)
Markdown
* [1. 첫 번째 문단 제목으로 이동](#section1) * [2. 두 번째 문단 제목으로 이동](#section2)
2. 자동 생성 방식 (스킨 편집 활용 - 💡가장 추천)
글을 자주 작성하신다면 매번 HTML 모드로 들어가 id를 수동으로 입력하는 것은 매우 번거롭습니다. 가장 유용한 방법은 자바스크립트(TOCbot 또는 jQuery TOC 플러그인 등)를 티스토리 스킨에 한 번만 설치해 두는 것입니다. 이 세팅을 한 번만 해두면, 글을 쓸 때 기본 모드에서 '제목1', '제목2' 서식만 지정해 주어도 최상단에 자동으로 클릭 가능한 목차가 생성됩니다. 자동 생성 방식의 장점:
글 작성 시간이 비약적으로 단축됩니다.
마크다운이나 HTML을 몰라도 기본 에디터 서식만으로 목차가 만들어집니다.
스크롤을 내릴 때 현재 읽고 있는 목차 위치가 하이라이트 되는 등 디자인적으로 훨씬 뛰어납니다.
어떻게 진행하는 것이 좋을까요? 당장 작성 중인 글 하나에만 수동으로 목차를 넣어보시겠어요? 아니면 앞으로의 편리함을 위해 티스토리 스킨 편집(HTML/CSS)에 코드를 넣어 자동 목차(TOCbot)를 구축하는 방법을 자세히 단계별로 안내해 드릴까요?
자동목차 구축법을 알려줘
- 자동 세팅 설정법
월한 선택입니다! 초반 세팅에 10~15분 정도만 투자하시면 앞으로 글을 쓰실 때마다 기본 서식의 **'제목1', '제목2', '제목3'**만 지정해 주면 알아서 깔끔한 목차가 생성됩니다. 가장 가볍고 최신 블로그에서 많이 쓰이는 'TOCbot(톡봇)' 라이브러리를 활용하여 구축하는 방법을 단계별로 안내해 드리겠습니다. 코드를 그대로 복사해서 붙여넣기만 하시면 됩니다.
티스토리 자동 목차(TOCbot) 설정 가이드
먼저 티스토리 관리자 페이지에 접속하신 후, 왼쪽 메뉴에서 **[꾸미기] > [스킨 편집]**으로 들어갑니다. 우측 상단의 [html 편집] 버튼을 눌러주세요.
목차가 본문 상단에 표시되도록 자리를 만들고, 스크립트가 '본문'이 어디서부터 어디까지인지 인식할 수 있도록 영역을 묶어줍니다. HTML 창 내부를 클릭한 후 Ctrl + F (맥은 Cmd + F)를 눌러 를 검색합니다. (이 태그가 실제 글이 출력되는 본문 태그입니다.)
찾은 태그를 아래와 같이 **목차 자리(.toc)**와본문 껍데기(.article-content)코드로 감싸듯 수정해 줍니다. HTML 모드일 때:
</div class="toc" style="margin-bottom: 30px;">
</div class="article-content">
3단계: 자동 ID 부여 및 실행 스크립트 넣기 (HTML)
티스토리는 기본적으로 제목에 ID(이름표)를 달아주지 않기 때문에, 목차가 제목을 찾아갈 수 있도록 자동으로 ID를 달아주고 목차를 실행시키는 스크립트를 넣어야 합니다.
맨 밑으로 스크롤을 내려 </body> 태그를 찾습니다.
</body> 바로 윗줄에 아래 코드를 붙여넣습니다. HTML 모드일 때:
<script> // 1. 본문 내 제목 태그(h2, h3, h4)에 ID 자동 부여 var content = document.querySelector('.article-content'); if (content) { var headings = content.querySelectorAll('h2, h3, h4'); for (var i = 0; i < headings.length; i++) { // 각 제목에 고유한 id 생성 headings[i].id = 'toc-heading-' + i; }
// 2. TOCbot 실행 tocbot.init({ // 목차가 들어갈 위치 tocSelector: '.toc', // 목차를 추출할 본문 영역 contentSelector: '.article-content', // 목차로 만들 제목 태그 (티스토리 본문 제목1은 h2, 제목2는 h3, 제목3은 h4입니다) headingSelector: 'h2, h3, h4', // 스크롤 시 부드럽게 이동 scrollSmooth: true, // 스크롤 이동 시 제목이 상단 메뉴바에 가려지지 않도록 여백 조절 (필요시 숫자 조절) scrollSmoothOffset: -20, }); } </script>
4단계: 디자인 다듬기 (CSS)
기본 목차 디자인을 내 블로그에 어울리게, 보기 좋게 꾸며주는 단계입니다.
HTML 에디터 상단의CSS탭을 클릭합니다.
맨 아래 빈 공간에 아래의 CSS 코드를 붙여넣고 우측 상단의 **[적용]**을 누릅니다. CSS 모드일 때:
여기까지 하셨다면 모든 세팅이 완료되었습니다! 🎉 이제 글쓰기 에디터로 가셔서 테스트용 글을 작성하시고, 상단 메뉴바를 통해'제목1', '제목2'서식을 넣어 글을 발행해 보세요. 최상단에 클릭 가능한 예쁜 목차가 자동으로 뜬 것을 확인하실 수 있을 것입니다. 코드를 적용하시다가 헷갈리는 부분이 있거나, 배경색이나 글씨 크기 등 목차의 디자인(CSS)을 조금 더 취향에 맞게 수정하고 싶으시다면 언제든 말씀해 주세요. 어떻게 도와드릴까요?
