티스토리 블로그 수동 목차 넣기 (인용 형식 가능)

 티스토리 블로그에 자동으로 목차를 넣으면, 제목 형식으로 쓰인 글들만 목차에 넣어주죠.
 
저는 제목형식 대신 인용형식도 목차에 넣고 싶어, 수동적으로 넣는 방법을 찾게 됐는데요.
 
아래에서 목차 코드, 목차와 내용 연결하기 등 자세한 내용 확인하시죠.
 

 

▤ 목차

 

1. 박스 안에 목차 작성

박스 안에 목차를 생성하는 코드를 아래와 같이 첨부드리오니 원하는 내용으로 목차 내용만 바꾸셔서 HTML모드에서 삽입하시면 됩니다.

 

위의 코드를 html모드에서 삽입하면 기본모드에서는 아래와 같이 박스 안에 목차가 생성된 것을 알 수 있습니다.
 

▤ 목차

• 1. 섹션 1
• 2. 섹션 2
• 3. 섹션 3
• 4. 섹션 4

 
코드의 자세한 설명은 아래를 참고하세요.
 

전체 컨테이너 <div>:

내부 여백(padding): 상하 10px, 좌우 20px.
모서리를 둥글게(border-radius): 10px.
외부 여백(margin): 상하좌우 1em.
테두리(border): 두께 1px, 색상 #ccd0d7.
배경 색상(background-color): 밝은 회색(#f5f5f5).
그림자 효과(box-shadow): x축 1px, y축 2px, 흐림 정도 3px, 확산 정도 1px, 색상 rgba(0,0,0,.1).
 

목차 제목 <p>:

하단 테두리(border-bottom): 두께 2px, 색상 #ccd0d7.
하단 여백(padding-bottom): 10px.
글자 크기(font-size): 18px.
 

목차 리스트 <ul>:

리스트 마커 제거(list-style-type): none.
왼쪽 여백(padding-left): 20px.
상단 여백(padding-top): 10px.
리스트의 기본 마진 제거(margin): 0px.
글자 색상(color): 진한 회색(#333333).
 

목차 항목 <li>:

항목 간의 위아래 여백(margin): 5px 0.
목차 항목 링크 <a>:
링크의 밑줄 제거(text-decoration): none.
링크 글자 색상(color): 진한 회색(#333333).

 
 

2. 링크 연결하기

 
목차의 섹션 1에는 "a href="#section1"로 링크가 잡혀있는데요.
 
본문 내용과 연결할 위치에 "<div id = "section1"></div>"를 삽입하셔야 링크연결이 됩니다.
 
아래와 같이 목차로 삼고싶은 글자 위에 삽입하시면 됩니다.
 
즉, "섹션 1" 글자 위에는 "<div id = "section1"></div>"을
 
"섹션 2" 글자 위에는 "<div id = "section2"></div>을 삽입합니다.

 
그럼 아까 만든 목차를 클릭하면 본문과 연결이 됩니다.!
 
이렇게 하면 제목형식이든, 인용형식이든, 본문형식이든 상관없이 연결이 가능합니다.
 
목차와 링크연결된 본문은 아래에 작성하였으니 위의 목차를 클릭하시면 연결되는 것을 직접 보실 수 있을 겁니다.
 

 

3. 링크 연결된 본문 예시

 

 

섹션 1

 

섹션 1의 내용

 
 

 

섹션 2

 

섹션 2의 내용

 
 

 

섹션 3
 
섹션 3의 내용
 
 

 

섹션 4

 
섹션 4의 내용

지금까지 티스토리 블로그에 수동으로 목차 넣는 방법에 대해, 그 html 코드에 대해 정리해보았습니다. 글의 형식과 상관없이 본문의 원하는 위치에 div 요소를 넣으면 되는 방법이기에 인용형식의 글을 목차로 넣으실 분들에게 유용할 거라고 생각합니다. p요소로 id를 넣으면 밑에 코드와 합쳐지면서 수정되니 div로 id 넣으시는게 저의 가장 큰 꿀팁이였습니다. 목차 디자인은 코드 설명을 보고 수정하시면서 원하시는 대로 잘 활용하셨으면 좋겠습니다.