티스토리 목차 만들기[스킨 종료 상관없이 가능 / 서식만들기]

기존에 제가 포스팅했던 글 중에 목차 만들기라는 포스팅이 있습니다.
이제 목차를 손쉽게 혹은 티스토리에서 글을쓸때 조금 편하게 사용할 수 있는 서식을 만드려 보려고 합니다.
단순 서식을 원하시면 마지막을 보시면 확인 가능하십니다.
그럼 시작하겠습니다.

목차

---

서식 만들기 [티스토리 목차 및 서식 만들기]

글을 포스팅하다 보면 자기만에 글 쓰는 방법들이 다 있을 거라고 생각합니다
그리고 목차를 쓰다 보면 어떤 식으로 대주제 소주제를 만들어야 하는지 고민이신 분들도 계십니다.
이런 분들은 저처럼 서식을 만들어서 사용하시면 보다 정돈된 포스팅을 하실 수 있습니다.
저도 서식을 만들기 전에는 모든 글들이 정신이 없고 일정하지 않았습니다.

---

목차를 이용한 서식 만들기

우선 서식을 만드는 가장 큰 이유는 목차를 쉽게 이용하려고 하는 경우가 많습니다
서식을 만드는 방법은 보기보다 간단합니다.
우선 관리자 페이지로 이동합니다.

관리자 메뉴 중에 콘텐츠 -> 서식관리를 클릭합니다.

그럼 저는 서식이 하나 있지만 여러분들은 서식 쓰기 버튼을 클릭하시면 됩니다.

서식 쓰기를 누르시면 그냥 일반적인 글쓰기나 나타납니다
이제 이곳에 서식을 만드시면 되는데 티스토리 글쓰기 메뉴 중에는 아래 이미지처럼 기본 모드, 마크다운, HTML 이렇게 세 가지 메뉴가 있습니다.
이 메뉴 중에 저희는 HTML모드를 사용하려고 합니다
일단 HTML 메뉴를 사용하기 전에 해야 할 일은 기본적인 글을 적성하시면 됩니다.

 

---

 

서식용 글 작성하기

글을 작성하실 때 생각을 하면서 작성을 해야 되는데요.
저 같은 경우는 처음(시작) -> 목차 -> 대주제 -> 소주제(여러 개) -> 마무리 이렇게 작을 합니다.
그럼 이런 식으로 작성된 모습을 보여드리겠습니다.

위에 있는 이미지처럼 작성을 하면 되는데요 이때 주의해야 하는 사항이 있습니다.

대주제[제목 1], 소주제[제목 2], 본문 내용[본문 2]

위에 박스 내용을 잘 이행해야 목차도 잘 작동을 합니다.
이후 제가 목차라고 하는 부분에 아래 코드를 삽입해야 하는데 이때부터는 기본보드가 아닌 HTML모드로 작성하셔야 합니다.

<div class="book-toc">
<p>목차</p>
<ul id="toc"></ul>
</div>

위에 코드를 목차를 이용하고 싶은 공간에 복사 붙이기를 합니다.

이렇게 원하는 부분에 복사하시고 다시 기본 모드로 돌아갑니다.

그럼 목차는 보이지 않고 글씨만 나오게 되는데요 이때 미리 보기 버튼을 눌러 줍니다.

그럼 위에 있는 이미지처럼 서식이 목차를 포함하고 나와있는 모습을 볼 수 있습니다.

---

마무리[완성용 서식 코드]

위에서 말씀드린 거처럼 서식용 코드를 완성용으로 올려 드리겠습니다.
복사하시고 서식 HTML 파일에 복사하시면 됩니다. 

<p data-ke-size="size16">&nbsp;</p>
<div class="book-toc">
<p data-ke-size="size16">목차</p>
<ul id="toc"></ul>
</div>
<hr contenteditable="false" data-ke-type="horizontalRule" data-ke-style="style1" />
<h2>주제</h2>
<h3>소주제</h3>