티스토리 자동목차
티스토리 자동목차

티스토리 자동목차 쉽게 만드는 방법

티스토리 블로그는 워드프레스 사이트 처럼 자동목차 TOC를 만들수 없을까요? 

왜없겠어요.

 

당연히 만들 수 있습니다. 복잡할 것 하나도 없습니다.

 

티스토리 자동목차 쉽게 만드는 방법에 대해서 한번 알아보겠습니다.

 


목차


    1. 먼저 jquery toc 파일을 <파일 업로드> 추가

    jquery.toc.zip
    0.00MB

    위에 있는 jquery toc 파일을 압축을 풀어줍니다.

    압축을 풀면 2개의 파일이 나오는데요.

     

    이 2개의 파일은 자동목차를 뜻합니다.

    이 2개의 파일을 티스토리 스킨에 업로드 해야합니다.


    티스토리 블로그 관리 페이지 ->  꾸미기 → 스킨 편집  → html 편집  →  파일업로드

    이 순서로 들어갑니다.

    티스토리 자동목차 파일업로드
    <파일업로드>

    이 2개의 파일을 <파일업로드>에 추가후 적용을 눌러줍니다.

     

    2. 자동목차 구문 <HTML> 추가

    이제는 2개의 구문을 <HTML>에 추가해줘야 합니다.

     

    - head 영역 구문 추가

    head 영역 구문.txt
    0.00MB

    위에 있는 텍스트 파일을 다운받아 해당 구문을 복사를 합니다.

     

    티스토리 블로그 관리 페이지 ->  꾸미기 → 스킨 편집  → <HTML>

    이 순서로 들어갑니다.

     

    해당 텍스트를 <head> 앞에 붙여놓기를 합니다.

    참고로 텍스트 영역은 <head> 앞에 있으면서 동시에  </head> 뒤에 있어야 합니다.

    (아래 사진처럼)

    자동목차 구문
    <head> 영역 안에 구문 추가

     

    - body 영역 구문 추가

    body 영역 구문.txt
    0.00MB

    위에 있는 텍스트 파일을 다운받아 해당 구문을 복사를 합니다.

     

    <HTML> 맨 아래까지 스크롤하면 </body> 가 있습니다.

    </body> 앞에 해당 텍스트를 붙여놓기를 합니다.

     

    티스토리 자동목차 body
    </body> 앞에 구문 붙여놓기

     

    2개의 구문을 삽입후, 적용을 눌러줍니다.

     

    3. 자동목차 구문 <CSS> 추가

    자동목차 CSS 구문.txt
    0.00MB

    위에 있는 텍스트 파일을 다운받아 해당 구문을 복사를 합니다.

     

    티스토리 블로그 관리 페이지 ->  꾸미기 → 스킨 편집  → <CSS> 

    이 순서로 들어갑니다.

     

    <CSS> 맨 아래까지 스크롤합니다. 

    맨 아래 영역에 해당 구문을 붙여놓기 합니다.

    티스토리 자동목차 CSS
    <CSS> 맨 아래에 구문 붙여놓기

    그리고 적용을 눌러줍니다.

     

    4. 서식등록 하기

    서식 구문.txt
    0.00MB

    위에 있는 텍스트 파일을 다운받아 해당 구문을 복사를 합니다.

     

    티스토리 블로그 관리 페이지 ->  서식관리 -> 서식쓰기

    이 순서로 들어갑니다.

     

    해당 구문을 HTML로 삽입 합니다.

     

    자동목차 서식
    서식 추가

    그리고 해당 서식을 저장합니다.

     

     

    이렇게 4가지 단계로 티스토리 자동목차 만드는 방법이 끝났습니다.

     

    간단하죠?

     

    앞으로 글을 쓸때 저장된 서식을 불러오면 쉽게 자동목차를 생성할 수 있습니다.

    티스토리 자동목차 서식
    서식 불러오기

     

    그래서 글을 쓸때 h2태그(제목1), h3태그(제목2) 를 설정해주면 목차가 자동으로 생성됩니다.

     

    이상 티스토리 자동목차 만드는 방법에 대해서 쉽게 알아보았습니다.

    이 과정에서 막히는 분이 계시다면 댓글을 달아주세요.

    • 네이버 블러그 공유하기
    • 네이버 밴드에 공유하기
    • 페이스북 공유하기
    • 카카오스토리 공유하기