[1분 완성] 티스토리 목차 만들기 (완성본 코드 포함)

블로그 콘텐츠의 가독성을 높이는 데 중요한 역할을 하는 목차.

 

목차는 글의 구성을 명확하게 보여주어 가독성을 높이고 전문성을 더해줍니다. 티스토리에서도 간편한 설정으로 목차를 추가하여 독자들이 원하는 정보를 쉽게 찾아볼 수 있도록 도울 수 있습니다.

 

오늘 포스팅에서는 티스토리 목차를 1분 만에 쉽게 설정하는 방법을 소개하겠습니다.

 

[목차여기]

(위 목차는 아닙니다. 이 방식은 나중에 추가 포스팅 하겠습니다.)

티스토리 목차

티스토리 인용버튼 목차 만들기 (수동 설정)

티스토리 인용버튼 목차 완성본

 

위의 이미지처럼 인용버튼을 활용하여 만드는 목차는 직접 수동으로 제작하는 방식입니다. 메뉴의 인용버튼과 HTML 편집을 진행합니다. 순서대로 따라 하시면 어렵지 않습니다.

 

 

상세 가이드

1. 목차 테스트용 예제 작성

• 본문 2 (p 태그)나 제목 2 (h3 태그)를 사용하여 목차 항목 예시를 작성합니다.

 

티스토리 목차 예제

 

2. 인용버튼으로 목차 만들기

• 글쓰기 편집 메뉴에서 인용버튼을 선택합니다.

티스토리 메뉴 인용버튼

• 인용문 안에 목차를 작성합니다.

 

3. HTML 코드 수정 

• 글쓰기 편집 메뉴에서 HTML 모드로 들어갑니다.

티스토리 목차 수정 전

• 보이는 화면에서 목차 부분을 찾아 p 태그와 a 태그를 사용하여 코드를 수정합니다.
• a 태그의 href 속성에 # 기호와 함께 목차 항목 ID를 입력합니다.
  ( #t1, #t2처럼 임시로 설정하거나 원하는 이름으로 변경가능)

<p><a href="#목차ID">소제목</a></p>

 

티스토리 목차 HTML 모드 - 인용문 편집

 

• 본문 내용을 찾아 h3 태그의 id 속성에  #기호 없이 목차별 목차 항목 ID를 동일하게 입력합니다.
  (예제의 소제목 1의 목차항목 ID는 #t1입니다. h3 태그에는 t1 만 적어주면 됩니다.)

티스토리 목차 HTML 모드 - 본문 편집

<h3 id="목차ID"><b>1. 소제목 1</b></h3>

 

4. 완료

• 기본 모드에서 확인하거나 완료 버튼을 누르면 목차 생성이 완료됩니다.
• 버튼 클릭 작동 여부는 실제 발행 후 확인할 수 있습니다. (미리 보기에서는 확인 불가)

 

완성본 코드

 

작성하기 어려운 환경이신 분을 위해 완성된 코드도 준비했습니다. 아래 코드를 티스토리 글쓰기 편집 모드에 바로 적용하시면 바로 확인할 수 있습니다.

 

티스토리인용버튼목차만들기.txt

0.00MB

 

<!--인용버튼 목차 시작-->
<blockquote data-ke-style="style3">
<p><b>목차</b></p>
<p><a href="#t1">소제목 1</a></p>
<p><a href="#t2">소제목 2</a></p>
<p><a href="#t3">소제목 3</a></p>
</blockquote>
<!--인용버튼 목차 종료-->

<!--본문 시작-->
<h3 id="t1" data-ke-size="size23"><b>1. 소제목 1</b></h3>
<p data-ke-size="size16">소제목 1의 내용</p>
<p data-ke-size="size16"><a name="a2" data-ke-size="size16"></a>&nbsp;</p>
<h3 id="t2" data-ke-size="size23"><b>2. 소제목 2</b></h3>
<p data-ke-size="size16">소제목 2의 내용</p>
<p data-ke-size="size16"><a name="a3" data-ke-size="size16"></a>&nbsp;</p>
<h3 id="t3" data-ke-size="size23"><b>3. 소제목 3</b></h3>
<p data-ke-size="size16">소제목 3의 내용</p>
<!--본문 종료-->

 

마치며

 

지금까지 초보자도 쉽게 완성할 수 있는 티스토리 목차 만드는 방법에 대해 알아보았습니다. 티스토리 목차 기능을 설정하여 블로그 콘텐츠의 가독성을 높이고 독자들에게 더 나은 경험을 제공하세요. 본 포스팅을 통해 티스토리 목차 설정에 대한 이해도를 높이고, 실제로 목차를 활용하여 블로그 콘텐츠를 개선하는 데 도움이 되기를 바랍니다.