티스토리 목차 만들기

간단하게 티스토리 목차 만드는 방법입니다.
html 조작으로 금방 할 수 있습니다.

마크다운 내부링크와 같은 방식인데 실제로 마크다운 내부링크를 티스토리에 적용하면 아무 응답이 없습니다.

그래서 이를 해결하려면 html을 활용하면 됩니다.
티스토리에서 html을 쓰려면 오른쪽에서 html 모드로 변경한 후 할 수 있습니다.
티스토리 글쓰기에 들어가 위에 창에서 기본모드-html을 선택합니다.

 

목차 만들기

id를 이용한 목차 만들기

1. 목차가 될 대상을 만듭니다.
   a href = '#01' 을 작성합니다.

<a href=“#01”>목차 만들기</a>

2. html 안에서 '목차 만들기'가 있는 곳으로 갑니다.

<p id ='01'>목차 만들기</p>

위와 같이 id에 목차에서 붙였던 #01에서 # 뺀 나머지 값을 id 값으로 입력합니다.

박스 설정

목차 박스를 설정하시는 분도 간혹 계시는데 이도 html으로 가능합니다.

# background-color : 배경색; padding: 박스 크기; border: 테두리 크기 solid :테두리 색상; width : 너비(width 없으면 화면끝까지 박스 만들어짐)

<div style ="background-color: #EFD9F3; padding: 10px; border: 2px solid #D33EFA; width:250px">
# 목차넣기
<p><b> 목차 만들기</b></p>
<p></p>
<a href=“#01”>목차 만들기</a>
<p></p>
<a href='#02'>박스 설정</a>
</div>

div 사이에 목차를 넣으면 박스안에 목차가 들어가집니다.

참고로 목차 사이에 간격을 조절하려면 <p></p> 로 합니다.
html로 조작을 해서 기본모드에서 띄어쓰기 동작이 먹히지 않습니다.

 

실제로 해 보면 다음과 같이 링크 모양으로 뜨고 링크를 누르면 해당 곳으로 이동합니다.

목차

id를 이용한 목차 만들기

 

박스 설정