[HTML] 티스토리 글 목차 만드는 법 (초보자용)

안녕하세요, 수염난아이티 입니다.

 

여러 티스토리 페이지를 방문하여 글을 보다보면

글 안에 목차가 삽입되어 있는 것을 발견할 수 있습니다.

 

아무래도 목차가 있는 글은 전체를 다 읽을 필요 없이 필요한 부분을 찾아서

원하는 정보를 얻을 수 있는 기능을 제공하여 방문자가 편리함을 느낄 수 있어서 좋은 것 같습니다.

 

이번 페이지에서는 쉽고 간단하게 티스토리 글 안에 목차 만드는 법을 알아보겠습니다.

딱히, HTML 지식이 없어도 할 수 있으니 차근차근 따라오시기 바랍니다.

 

1. 티스토리 '관리' 페이지에 들어갑니다.

수익이 없는 깨끗한 티스토리♩

 

2. 왼쪽 메뉴바 상단에 위치한 '서식관리' 에 들어갑니다.

 

3. 오른쪽 상단의 '서식쓰기' 를 눌러줍니다.

(저는 이미 만들어놔서 '목차 생성' 이라는 서식이 있습니다.)

 

4. 우측 상단의 펼치기 메뉴를 눌러 'HTML' 모드로 변경한 뒤

서식의 제목을 입력하고 아래의 코드를 복사 붙여넣기 합니다.

 

 

 

<p data-ke-size="size16">목차</p>
<p data-ke-size="size16"><a href="#no0">제목1</a></p>
<p data-ke-size="size16"><a href="#no1">제목2</a></p>
<p data-ke-size="size16"><a href="#no2">제목3</a></p>
<p data-ke-size="size16"><a href="#no3">제목4</a></p>
<p data-ke-size="size16">&nbsp;</p>
<p id="no0"; data-ke-size="size20">제목1</p>
<p data-ke-size="size16">본문내용 삽입</p>
<p data-ke-size="size16">&nbsp;</p>
<p data-ke-size="size16">&nbsp;</p>
<p id="no1"; data-ke-size="size20">제목2</p>
<p data-ke-size="size16">본문내용 삽입</p>
<p data-ke-size="size16">&nbsp;</p>
<p data-ke-size="size16">&nbsp;</p>
<p id="no2"; data-ke-size="size20">제목3</p>
<p data-ke-size="size16">본문내용 삽입</p>
<p data-ke-size="size16">&nbsp;</p>
<p data-ke-size="size16">&nbsp;</p>
<p id="no3"; data-ke-size="size20">제목4</p>
<p data-ke-size="size16">본문내용 삽입</p>
<p data-ke-size="size16">&nbsp;</p>
<p data-ke-size="size16">&nbsp;</p>

 

 

관찰하시면 쉽게 찾을 수 있는데요, 상기 코드는 일단 최대 4가지 목차 생성만 할 수 있습니다.

목차의 갯수를 더 늘리고 싶다면 아래의 세트 코드의 no 숫자를 늘려가면서 추가하시면 됩니다.

 

<p data-ke-size="size16"><a href="#no0">제목1</a></p>

<p id="no0"; data-ke-size="size20">제목1</p>

 

5. 그리고 글쓰기로 넘어가 테스트를 해보겠습니다.

이때 글쓰기에 위에서 저장한 서식을 활용해야 하니 우측 상단의 '...' 을 눌러 '서식'을 클릭합니다.

 

6. 그리고 주어진 양식에 맞게 글을 작성하시어 테스트해보시면 됩니다.

해당 코드는 목차의 제목을 클릭하면 본문의 제목으로 자동이동되는 기능이 있으니 편하게 사용하시면 됩니다.

 

7. 주의사항이 있습니다.

해당 서식은 수정을 누르시면 깨질 수 있으니 해당 코드를 다른 곳에 잘 저장하시어

수정시 참고용으로 잘 보관하시기 바랍니다.

 

이상입니다.