티스토리 목차 쉽게 만들기

 

 

 

티스토리를 운영하시면서 다른 사람 게시글을 검색하다 보면 목차가 작성되어 있는걸 보실 수 있습니다.  내 티스토리에 목차를 작성하자니 어디서부터 손봐야 할지 막막하신 경험이 다들 있었을 텐데 오늘은 간단하게 목차 만들기에 대해 알아보겠습니다.

 

 

 

 

[목차]

 

1. HTML 이용한 목차 만들기

 

2. 목차 이동 확인

 

 

 

 

 

 

 

 

 

 

  1. HTML 이용한 목차 만들기

1. 인용 및 목차 입력하기

먼저 티스토리 게시글 작성 화면 상단에 인용을 추가합니다.

<인용>

 

 

인용을 추가한 후 아래와 같이 목차 만들기에 필요한 내용을 작성합니다.

목차 예시

1. 목차 만들기

2. 목차 만들기 확인하기

 

 

2. 목차 HTML 변경하기

위에서 생성한 목차에 해당하는 HTML 위치입니다.

<목차 HTML 1>

 

만들어진 HTML을 목차 만들기로 사용하기 위해 아래와 같이 변경합니다.

<목차 HTML 2>

HTML을 작성할 때 <a href="#a1"> </a> 이 태그는 한 세트이므로 이미지를 잘 참고해서 작성하시면 됩니다.

이때 입력된 a1은 목차 이동할 위치에 사용될 태그 id입니다.

 

 

3. 목차 설정 (이동할 위치에 id 지정)

아래 내용은 목차 클릭 시 이동시킬 위치입니다.

 

1. 목차 만들기

• 만들기 내용 1
• 만들기 내용 2

2. 목차 확인하기

• 확인하기 내용 1
• 확인하기 내용 2

 

1. 목차 만들기와 2. 목차 확인하기를 목차 이동하는 위치로 사용하기 위해 id를 설정합니다.

<목차 설정 HTML 1>

 

 

 

 

  2. 목차 이동 확인

처음에 인용을 추가하여 목차로 만들어진 항목으로 돌아가서 목차를 클릭하면 위치로 id 설정해둔 곳으로 이동이 완료된 것을 확인할 수 있습니다.

 

참고사항으로 글 작성 시 미리보기에서는 목차 이동 기능이 동작하지 않습니다.

목차를 만들고 테스트를 하기 위해서는 게시글 작성을 비공개로 변경해서 확인하시기 바랍니다.

 

 

비 개발자분들이 HTML를 수정하는 것은 어려울 수 있으니 댓글 남겨주시면 도움드리겠습니다.