블로그 포스트 수동으로 목차 만들기

블로그 포스팅을 할 때 중요하게 목차를 만들어주면 SEO에 좋은 요소가 되고 읽는 사람에게도 도움이 됩니다. 자동으로 목차를 만들어주는 코드들도 많이 있지만 수동으로도 목차를 만들 수 있습니다. 웹사이트 속도 측면에선 수동으로 목차를 만드는게 더 빠릅니다. 오늘은 어떻게 목차를 만들 수 있는지 알아보도록 하겠습니다.

 

목차

• 목차 리스트 작성
• 제목에 id 넣어주기
• 목차 리스트에 링크 걸어주기

---

목차 리스트 작성

목차를 넣고자 하는 위치에 목차 리스트를 넣어줍니다. 목차와 내용의 제목, 소제목을 리스트로 만들어주면 됩니다. 아래의 예시와 같이 작성해주세요.

(예시)

목차

• 제목1
  • 소제목 1-1
  • 소제목 1-2
• 제목2
  • 소제목 2-1
  • 소제목 2-2
  • 소제목 2-3

 

제목에 id 넣어주기

html 편집모드로 변경하여 h태그에 id를 넣어줍니다. id의 값이 중복되지 않도록 원하는 숫자나 문자로 만들어주면 됩니다. 아래와 같은 형식으로 모든 h태그에 id를 만들어주세요.

<h2 id="1" data-ke-size="size23">제목 1</h2>
<h3 id="1-1" data-ke-size="size23">소제목 1-1</h3>
<h3 id="1-2" data-ke-size="size23">소제목 1-2</h3>
<h2 id="2" data-ke-size="size23">제목 2</h2>
<h3 id="2-1" data-ke-size="size23">소제목 2-1</h3>
<h3 id="2-2" data-ke-size="size23">소제목 2-2</h3>
<h3 id="2-3" data-ke-size="size23">소제목 2-3</h3>

 

목차 리스트에 링크 걸어주기

앞서 제작한 목차 리스트의 모든 항목마다 링크로 id값을 입력해줍니다. 목차 리스트에 원하는 부분을 드래그로 선택해준 다음 링크 연결에 url대신 #id로 입력해줍니다. 아래 예시를 보면 이해하는데에 도움이 될 겁니다.

목차

• 제목1(#1)
  • 소제목 1-1(#1-1)
  • 소제목 1-2(#1-2)
• 제목2(#2)
  • 소제목 2-1(#2-1)
  • 소제목 2-2(#2-2)
  • 소제목 2-3(#2-3)

티스토리의 링크삽입으로는 #id형태로 링크를 넣을 수 없습니다. 이때는 html에서 원하는 부분을 직접 링크연결해주면 됩니다. 코드는 아래와 같습니다.

하이퍼링크 태그: <a href="#id">제목명</a>
<p data-ke-size="size16"><b>목차</b></p>
<ul style="list-style-type: disc;" data-ke-list-type="disc">
<li><a href="#1">제목1</a> <ul style="list-style-type: disc;" data-ke-list-type="disc">
<li><a href="#1-1">소제목 1-1</a></li>
<li><a href="#1-2">소제목 1-2</a></li>
</ul></li>
<li><a href="#2">제목2</a> <ul style="list-style-type: disc;" data-ke-list-type="disc">
<li><a href="#2-1">소제목 2-1</a></li>
<li><a href="#2-2">소제목 2-2</a></li>
<li><a href="#2-3">소제목 2-3</a></li> </ul> </li> </ul>

---

이번 포스팅 또한 목차를 수동으로 만들어봤습니다. 제목이 많지 않을때 쉽게 목차를 만들어볼 수 있으니 한번 시도해보시기 바랍니다.