티스토리 자동 목차 서식 모음

티스토리 자동 목차 만들기 포스팅에서 적용한 스타일이 밋밋해서 불만이신 분 많으셨죠?

 

보다 다양하고 세련된 서식들을 가지고 왔습니다.

기존 글에서 사용법을 익히셨으니 그저 코드를 바꿔 끼기만 하면 손쉽게 적용이 가능할 거예요.

 

서식은 크게 '일반형'과 '특수형'으로 나누어져 있습니다.

일반형은 개선된 기본 스타일이고 특수형은 접기/펼치기 기능이 추가된 목차라고 보시면 됩니다.

 

▶ 매력적인 팝업창 만드는 방법 완벽 정리

 

자동 목차 서식(일반형)

일반형 적용 방법은 아주 간단해요.

스킨편집 > CSS 탭에 들어갑니다.

 

기존에 '자동 목차 스타일'로 적용되어 있던 CSS를 다운로드한 CSS로 덮어쓰기 해주면 끝입니다.

 

 

휴식의 숲 그린

 

 

휴식의 숲 그린.txt

0.00MB

 

 

낭만적인 로즈 골드

낭만적인 로즈 골드.txt

0.00MB

 

 

 

세련된 민트 블루

세련된 민트 블루.txt

0.00MB

 

 

 

고급진 골든 브라운

고급진 골든 브라운.txt

0.00MB

 

 

 

활력 넘치는 토마토 레드

활력 넘치는 토마토 레드.txt

0.00MB

 

 

선명한 바이올렛

선명한 바이올렛.txt

0.00MB

 

 

도시의 밤 – 미니멀

도시의 밤 – 미니멀.txt

0.00MB

 

 

도시의 황혼

도시의 황혼.txt

0.00MB

 

 

오아시스의 밤

오아시스의 밤.txt

0.00MB

 

 

네온 거리

네온 거리.txt

0.00MB

 

 

울트라 메카닉

울트라 메카닉.txt

0.00MB

 

 

 

 

자동 목차 서식(특수형)

특수형은 아래와 같이 접기, 펼치기 기능이 추가된 목차입니다.

 

1) HTML 코드 추가

특수형의 경우는 기존 자동 목차 HTML 코드를 새로운 코드로 교체해줘야 합니다.

자동 목차 HTML 코드.txt

0.00MB

 

 

 

HTML 탭에 들어가서 'book-toc'을 검색해 보세요(CTRL+F).

그럼 기존에 작성한 HTML 코드가 나올 건데요.

 

다운 받은 새 자동목차 HTML 코드로 덮어쓰기 해줍니다.

 

2) 자바스크립트 코드 추가

두 번째로 해줄 건 접기, 펼치기 기능이 탑재된 자바스크립트 코드를 추가해줘야 합니다.

토글 기능 자바스크립트.txt

0.00MB

 

 

 

HTML에서 </body>를 검색해 주세요.

 

스킨에 따라 여러 개가 검색될 수도 있습니다.

가장 하위에 있는 </body> 태그를 기준으로 해주세요.

 

찾으셨으면 태그  바로 위에 다운로드한 코드를 넣어주세요.

 

이제 세팅이 끝났으니 일반형처럼 CSS만 갈아 끼우시면 됩니다.

 

미니멀 그레이

미니멀 그레이.txt

0.00MB

 

 

 

심플 블루

심플 블루.txt

0.00MB

 

 

 

주황빛 탐사

주황빛 탐사.txt

0.00MB

 

 

미스틱 블루 터치

미스틱 블루 터치.txt

0.00MB

 

 

 

나잇플로우

나잇플로우.txt

0.00MB

 

 

 

티스토리 완벽가이드 보기 >>