티스토리 목차 만들기

이번 글에서는 티스토리 목차를 만들어 보겠습니다. 챗 GPT for google을 활용하여 만들어 보았습니다. 목차 리스트를 박스 안에 넣어 봤고요. 목차 리스트에 링크를 걸어 본문 내용으로 갈 수 있도록 만들었습니다. 여러분도 한 번 만들어보시고 응용해서 원하는 스타일을 만들어 보세요. 

 

 

[[목차]]

티스토리 목차 만들기

티스토리 목차 만들기가 완전히 구현된 모습은 아래와 같습니다. 아래 목차 스타일이 마음에 드신다면 계속 진행해 주세요. 저도 ChatGPT for Google을 활용하여 만든 관계로 완벽하지는 않습니다. 양해 부탁드립니다. 

참고로 저는 제목 1(h2)에 서식 꾸미기를 한 상태입니다. 소제목에 서식 넣는 것은 아래 함께 보면 좋은 글에 첨부하였습니다. 맨 아래 글을 참고해 주세요. 

 

1. CSS에 목차 스타일 넣기

 

 

 

 

먼저 아래 첨부한 문서를 티스토리 관리 >꾸미기>스킨편집>html편집>CSS 로 들어가 주세요. 아래 텍스트 문서를 다운로드하여 1번 목차스타일 내용을 복사하여  CSS의 아무 데나 붙여 넣기 해주고 상단의 적용을 클릭해 주세요. 

목차 스타일+서식내용.txt

0.00MB

  

2. 서식관리에 목차 서식 넣기

그리고 티스토리관리> 콘텐츠> 서식관리로 들어가 주세요. 서식쓰기를 클릭하고 html 모드로 들어가 주세요. 첨부해 드린 파일의 2번 내용을 html에 복사 붙여 넣기 해주시고 제목도 설정해 주세요. 그리고 하단의 완료를 누릅니다. 

 

티스토리 목차 완성

이제 글쓰기로 들어가서 목차를 만드는 글을 작성해야 할때 상단의 서식에서 목차 만들기를 불러와서 글을 작성하시면 됩니다. 

윗부분 목차에서 주의할 점은 제목 1보다 제목 2가 들여 쓰기 되어 있는데 한 단계 올릴 때는 <ul style="list-style-type: disc;" data-ke-list-type="disc"> </ul>이 부분을 지워 보세요.

필요한 부분을 잘 가져다가 작성해 주시고, 목차에서 본문내용으로 링크가 어긋나지 않게 글 작성하시면 됩니다.

링크는 목차에 제목1 부분을 클릭하면 즉 이 부분이에요. <a href="#section1">제목 1</a>

본문내용 중 제목 1 부분에  id="section1" 부분을 잘 맞춰 주시면 돼요.

그리고 글씨체가 마음에 들지 않는다면 그건 기본모드에서 블록 잡고 글씨체 변경하면 됩니다.  

 

<함께 보면 좋은 글>

티스토리 소제목 서식 넣기