티스토리 목차 만들기 html 편집하여 간단히 가능

 

티스토리 목차 html 편집하여 간단히 만들기 가능합니다. 초보자도 아주 쉽고 간단히 만들 수 있어 목차를 만들어 자동 이동하기 쉽고 글 전체 내용을 한눈에 알아볼 수 있도록 만들 수 있습니다. 목차를 만들면 seo 부분에도 좋은 영향을 준다고 하니 얼른 해보도록해요.

 

 

목차

1. 내용

2. 내용

3. 내용

4. 내용

5. 내용

 

목차 박스 만들기

위의 목차는 아래 html 코드를 입력하시면 만들 수 있습니다. 아래 코드의 내용이란 곳에 원하는 글자로 바꿔주시면 됩니다. 위의 목차 박스의 내용을 누르면 설정 한 곳으로 이동하게 만들 수 있습니다.

 

<div class="toc-box" style="background-color: #f6f6f6; padding: 10px; border: 1px solid #eaeaea;"><p data-ke-size="size25"><b>목차</b></p>

 

<a href="#01"> 1. 내용</a><br><br>

<a href="#02"> 2. 내용</a><br><br>

<a href="#03"> 3. 내용</a><br><br>

<a href="#04"> 4. 내용</a><br><br>

<a herf="#05"> 5. 내용</a></div>

 

 

이동하고자 하는 곳의 html 작성

소제목이나 제목을 작성하고 바로 작성한 곳으로 이동하기 위해 해당 html 코드에 <p id="위의 숫자"></p> 를 작성하면 됩니다. 위의 목차박스에 숫자란에 "#01"이라고 되어 있는 곳에 #은 빼고 01 이렇게 숫자로 작성하여야 이동이 가능합니다.

 

# 까지 같이 적으면 오류가 납니다. 예를 들어 html 코드를 작성해 보겠습니다. 이동할 곳이라는 제목을 만들었다고 가정하며 코드는 아래와 같습니다.

 

• <p id="01"></p>
• <h3 data-ke-size="size23"> 이동할 곳</h3>

 

실제 만들어 본 목차 이동 예시

목차

1. 맨 처음으로 이동

 

작성한 html 코드를 통해 목차의 맨 처음으로 이동을 누르면 해당 포스팅 가장 처음으로 돌아가게 만들었습니다. 이런 식으로 티스토리 목차를 설정하여 바로 자동 이동하도록 설정할 수 있습니다.