[티스토리 글쓰기] 목차 만들기 (라이브러리 추가 없음)

티스토리 글쓰기 목차 만들기

 

목 차

• 1. 시작하기 전에
• 2. 티스토리 서식 만들기
• 2-1. 서식 관리 페이지
• 2-2. 서식 글쓰기 HTML 작성 모드
• 3. 목차 적용해서 글쓰기
• 4. 완성하기

 

1. 시작하기 전에

• 검색엔진 상단 노출을 위해 찾아보던 중에 검색엔진 최적화(SEO) 작업에 글쓰기 할 때 목차를 작성하라는 내용의 글들이 많아 만들어 보기로 했다.
• 티스토리에서 글쓰기 할 때 목차를 만드는 방법이 여러 가지 있었지만 검색엔지 최적화(SEO) 작업을 하고 있는 내 블로그에 굳이 라이브러리를 추가하면서까지 만들고 싶지 않았다.
• 따라서 나는 그냥 자동적으로 생성되는 방식은 아니지만 누구나 충분히 커스텀 할 수 있는 목차를 만들어 보기로 했다.

 

2. 티스토리 서식 만들기

2-1. 서식 관리 페이지

• [티스토리 관리자] - [서식 관리] 메뉴 
• 우측 상단 [서식 쓰기] 버튼 클릭

티스토리 관리자 서식 관리 페이지

 

2-2. 서식 글쓰기 HTML 작성 모드

• 서식 제목은 자유롭게 작성하고 우측 상단에 HTML 작성 모드로 변경한다.
• 아래에 있는 코드 전체를 복사해서 붙여넣기 하고 저장한다.

서식 만들기 글쓰기 모드

서식 만들기 html 모드

<p data-ke-size="size16">&nbsp;</p>
<div id="jh_container" style="margin: 30px 0px 30px 0px; padding: 20px 20px 10px 15px; border: 1px solid #dadada; background-color: #fff;">
<div style="display: block; width: 120px; background-color: #fff; text-align: center; font-size: 18px; font-weight: bold; margin: -40px auto 0px; padding: 5px 0px; border: 1px solid #dadada;">목 차</div>
<ul style="list-style-type: circle;" data-ke-list-type="circle">
<li style="margin-left: 1em;"><a style="text-decoration: none;" href="#move_list_1">1번</a></li>
<li style="margin-left: 1em;"><a style="text-decoration: none;" href="#move_list_2">2번</a></li>
<li style="margin-left: 1em;"><a style="text-decoration: none;" href="#move_list_3">3번</a></li>
<li style="margin-left: 1em;"><a style="text-decoration: none;" href="#move_list_4">4번</a></li>
<li style="margin-left: 1em;"><a style="text-decoration: none;" href="#move_list_5">5번</a></li>
<li style="margin-left: 1em;"><a style="text-decoration: none;" href="#move_list_6">6번</a></li>
<li style="margin-left: 1em;"><a style="text-decoration: none;" href="#move_list_7">7번</a></li>
<li style="margin-left: 1em;"><a style="text-decoration: none;" href="#move_list_8">8번</a></li>
<li style="margin-left: 1em;"><a style="text-decoration: none;" href="#move_list_9">9번</a></li>
<li style="margin-left: 1em;"><a style="text-decoration: none;" href="#move_list_10">10번</a></li>
<li style="margin-left: 1em;"><a style="text-decoration: none;" href="#move_list_11">11번</a></li>
<li style="margin-left: 1em;"><a style="text-decoration: none;" href="#move_list_12">12번</a></li>
<li style="margin-left: 1em;"><a style="text-decoration: none;" href="#move_list_13">13번</a></li>
<li style="margin-left: 1em;"><a style="text-decoration: none;" href="#move_list_14">14번</a></li>
<li style="margin-left: 1em;"><a style="text-decoration: none;" href="#move_list_15">15번</a></li>
<li style="margin-left: 3em;"><a style="text-decoration: none;" href="#move_list_16">15-1번</a></li>
<li style="margin-left: 3em;"><a style="text-decoration: none;" href="#move_list_17">15-2번</a></li>
<li style="margin-left: 3em;"><a style="text-decoration: none;" href="#move_list_18">15-3번</a></li>
<li style="margin-left: 3em;"><a style="text-decoration: none;" href="#move_list_19">15-4번</a></li>
<li style="margin-left: 3em;"><a style="text-decoration: none;" href="#move_list_20">15-5번</a></li>
<li style="margin-left: 5em;"><a style="text-decoration: none;" href="#move_list_21">15-1-1번</a></li>
<li style="margin-left: 5em;"><a style="text-decoration: none;" href="#move_list_22">15-1-2번</a></li>
<li style="margin-left: 5em;"><a style="text-decoration: none;" href="#move_list_23">15-1-3번</a></li>
</ul>
</div>
<p data-ke-size="size16">&nbsp;</p>

 

3. 목차 적용해서 글쓰기

• 위에서 만든 목차 서식을 불러옵니다.

글쓰기 서식 불러오기

 

• HTML 작성 모드로 변경합니다.

미리 만들어 둔 목차 서식

 

• margin-left에 붙어있는 숫자를 변경하면 주제의 깊이(dept)를 다르게 줄 수 있습니다.
• href에 붙어있는 문자는 이동할 곳을 마킹하는 역할을 합니다.

목차 태그 설명

 

• 목차 태그에 들어갈 주제 이름을 a태그 사이에 입력합니다.
• 이동하고 싶은 태그 위치에 id 속성을 입력합니다. ex) <h2 id="move_list_1">
• 깊이(dept)에 따라 style의 margin-left 값을 변경해 줍니다. 들여 쓰기가 됩니다. ex) margin-left:3em

목차에 관련된 태그 속성값 변경하기

 

4. 완성하기

• 원하는 위치대로 스크롤이 이동되는지 확인해 봅니다.

목차 글쓰기 완성

 

---

a 태그 - HTML | GenieIT Programming World

a 태그 - HTML | GenieIT Programming World

a태그 noopener와 noreferrer 정리 - HTML | GenieIT Programming World

a태그 noopener와 noreferrer 정리 - HTML | GenieIT Programming World

p 태그 - 줄바꿈 | GenieIT Programming World

p 태그 - 줄바꿈 | GenieIT Programming World

---

728x90

반응형