N잡 재테크/블로그

티스토리 목차만들기 HTML 간단한 수정, 목차로 이동하는 방법

이헤하 2024. 10. 14. 17:23

안녕하세요. 티스토리는 네이버 블로그와는 다르게 html을 통해서 자유롭게 수정을 할 수가 있어요. 
다른 분들의 티스토리를 보면 목차가 나오는 경우가 있어요.
목차는 글쓰기에서 바로 나오는게 아니라 html의 수정을 통해서 목차를 만들고 적용해야합니다.
목차 생성 방법은 여러가지가 있지만 그 중에서도 따라하기 제일 쉬운 방법으로 소개해드릴게요.

 

목차

▶목차를 사용하는 이유

▶목차 만드는 방법

▶목차로 이동 적용방법

 

▶목차를 사용하는 이유

티스토리는 여러 광고와 같이 글을 보기때문에 생각보다 가독성이 떨어지는 경우가 많아요. 그래서 목차를 넣어 읽는 사람들이 글을 읽기 쉽게, 가독성이 좋게하기 위해서 목차를 사용하는 것이 더 효율적입니다.
목차를 넣음으로써 방문자들의 체류시간이 길어지고, 이탈률을 줄여 티스토리 블로그 주인의 지표가 올라갑니다. 그 말은 목차를 구성하면 SEO 점수가 상승하는 것이죠.
 
 

▶목차 만드는 방법

티스토리 블로그 글쓰기 → 인용    네모박스 클릭

그리고 네모가 생성되면 안에 목차와 목차 제목들을 입력해줘요.

그리고 아래 본문에는 목차제목과 내용들을 입력해줘요

기본모드 HTML 클릭

화면을 전환하면 검정색 화면에 이렇게 나와요. 이제 이 첫줄의 목차제목을 변경해줍니다.

<p><a href="#a1">1. 첫번째 제목</a></p>
<p><a href="#a2">2. 두번째 제목</a></p>
<p><a href="#a3">3. 세번째 제목</a></p>

이렇게 입력해서 수정해준 후에 목차로 이동할 대상도 바꿔줘야합니다.
 

▶목차로 이동 적용방법

목차를 클릭하면 본문으로 이동하는 방법의 설명이에요. 중간의 목차제목에 아래와 같이 입력을 해주면 됩니다.

<p id="a1"> 1. 첫번째 제목
<p id="a2"> 2. 두번째 제목
<p id="a3"> 3. 세번째 제목

이렇게 입력을 하고 다시 기본모드로 돌아가면 됩니다.

목차가 이렇게 생성이 되었구요. 완료후 목차를 클릭하면 본문으로 이동하게 됩니다.