티스토리 목차 생성기(TTG) 소개(확장 프로그램)

티스토리 목차 생성기(TTG)는 티스토리 글쓰기 에디터에서 목차를 손쉽게 생성할 수 있도록 도와주는 크롬 및 웨일, 엣지 브라우저 확장 프로그램입니다.

티스토리 목차 생성기(TTG) 장점

일반적으로, 티스토리에서 사용되는 대부분의 목차 생성 플러그인은 브라우저에서 자바스크립트를 이용해 동적으로 목차를 생성하고 있어 티스토리 로딩 속도를 저하시키는 단점이 있었습니다.

하지만 티스토리 목차 생성기(TTG)는 글쓰기 에디터에서 목차를 미리 생성하기 때문에 티스토리 로딩 속도에 전혀 영향을 주지 않는 것이 큰 장점입니다.

글 작성 후 발행 전, “목차 생성” 버튼을 클릭하기만 하면 자동으로 목차가 생성되어 깔끔하고 체계적인 블로그 구성을 도와줍니다.

티스토리 목차 생성기(TTG) 주요 기능

티스토리 목차 생성기는 다음과 같은 주요 기능을 제공합니다:

목차 제목 설정
목차에 포함할 소제목 선택
목차 리스트 타입 설정 (번호형/번호 없음)
목차 출력 위치 선택
목차 펼침/닫힘 옵션 설정

디자인 사항

티스토리 목차 생성기(TTG)는 사용자가 자유롭게 목차 디자인을 커스터마이즈할 수 있도록 스타일(CSS)이 적용되지 않은 상태로 목차를 생성합니다.

따라서 원하는 디자인을 직접 추가해 사용할 수 있으며, 이를 통해 블로그 스타일에 맞는 자유로운 연출이 가능합니다.

만약 CSS를 적용하기 어렵거나 번거롭다면, 아래에 제공된 기본 스타일 적용 방법을 참고해 쉽고 빠르게 스타일을 입힐 수 있습니다.

제공 스타일 및 기능

티스토리 목차 생성기는 사용자 편의를 위해 기본적으로 사용할 수 있는 CSS 스타일을 제공합니다:

기본 스타일

토글 기능(펼침/닫힘) 없이 항상 열려 있는 목차입니다.

기본 스타일 + 토글 기능

목차를 펼치거나 닫을 수 있는 토글 기능이 추가된 스타일입니다.

사용자는 필요에 따라 이 두 가지 중 하나를 선택하여 사용할 수 있습니다.

목차 스타일 적용 방법

티스토리 홈 > 스킨 편집 > HTML 편집으로 이동합니다.
<head> 태그 안에 아래 코드를 추가한 후 저장합니다.

기본 스타일 적용

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jioscon/ttg@main/styles/ts-toc-basic.min.css">

HTML

기본 스타일 + 토글 기능 적용

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jioscon/ttg@main/styles/ts-toc-toggle.min.css">
<script src="https://cdn.jsdelivr.net/gh/jioscon/ttg@main/scripts/ts-toc-toggle.min.js" defer></script>