티스토리 자동 목차 간단하게 만드는 방법

 

티스토리 자동 목차 간단하게 만드는 방법

 

 

티스토리를 하다보니 네이버블로그와 또다른 재미가 있습니다. 바로 HTML,자바스크립트,CSS 등을 공부하는 일이에요. 처음엔 너무 어려웠는데 하나씩 성공할때 마다 기쁨을 감출수 없는데 오늘은 그중에서 티스토리에 자동 목차 넣는 방법에 대해 알아보도록 하겠습니다.

 

 

티스토리 블로그중 가장 눈에 띄는것이 바로 목차였어요. 목차가 있으면 글이 깔끔하게 정리되는 기분이더라구요. 저도 책처럼 목차를 만들고 싶은데 어떻게 하는걸까? 독자들도 목차가 있으면 글의 내용을 한눈에 파악할수가 있기 때문에 사용자도 편리한 기능이기도 하지요. 그럼 천천히 따라해 보도록 할까요?

 

---

목차 만들기

1. jquery.toc.js 파일 다운로드 하기
2. 꾸미기>스킨편집>HTML에 파일 업로드
3. HTML 편집 항목 눌러 아래 코드 삽입하기
4. CSS 편집 항목 선택 CSS 넣기
5. 서식에 HTML 코드 추가하기
6. 발행 테스트 해보기

---

그런데 위의 방법을 여러날 실행을 해보았지만 계속 실패의 연속입니다. 다른 방법을 찾아봐야 할것 같아요.그래서 두번째 방법을 다시 찾아봅니다.

 

티스토리 목차 만들기

 

티스토리는 html로 작업이 가능하기 때문에 html 용어를 안다면 간단하게 작업할수 있지만 모른다면 목차를 수동으로 해야합니다.

 

목차를 선택하는 용어는 "href"입니다.

<a href="1"> 1. 내용 </a>

<a href="1"> 2. 내용 </a>

 

 

목차 선택시 넘어가는 곳을 지정하는 용어는 "id" 입니다.

<id="1">

<id="2">

 

티스토리 자동 목차 만들기

 

매번 위의 작업을 하기 귀찮다면 자동목차를 만들어 활용할수 있는데요. 자동목차 만드는 방법은 티스토리 스킨에서 업로드 할수 있습니다.

 

꾸미기> 스킨편집>html>파일업로드

 

 

티스토리 태그 

이방법 저방법을 써봐도 자동목차 기능을 만들기 어려웠는데 그중 제가 생각한 가장 쉬운방법이 있어 정보나눔을 해봅니다.

 

목차에서는 크게 2가지로 나눌수 있는데 첫번째는 무조건 상단에 목차를 고정하는 겁니다. 그리고 2번째 방법은 원하는 위치에 목차를 넣는 방법이 있어요.

 

저처럼 목차를 상단에 고정하고 싶다면 아래에 위치한 코드를 다운로드 하여 복사합니다.코드를 붙여넣기 할때는 상단이나 하단이나 아무 곳에나 붙여넣어 주면 됩니다.

 

왜냐하면 어느곳에 넣어도 목차는 최상단에 위치하기 때문이에요.

 

코드 넣는방법은 아래 코드를 복사하여 '서식'으로 지정하고 편집기에 넣어서 발행하면 글 상단에 자동으로 생성되는데 일단 글을 작성한후 코드를 넣어줍니다.

 

 

 

 

티스토리목차만들기코드.txt

0.01MB

 

 

 

 

제가 티스토리 목차 만들기 공부한것중 가장 쉬운 방법을 올려두는 것이니 적용하시면 도움이 되리라 생각됩니다. 하지만 HTML은 언제나 어렵네요.