티스토리 목차 만들기
- 웹/블로그
- 2022. 5. 11.
반응형
반응형
간단하게 티스토리 목차 만드는 방법입니다.
html 조작으로 금방 할 수 있습니다.
마크다운 내부링크와 같은 방식인데 실제로 마크다운 내부링크를 티스토리에 적용하면 아무 응답이 없습니다.
그래서 이를 해결하려면 html을 활용하면 됩니다.
티스토리에서 html을 쓰려면 오른쪽에서 html 모드로 변경한 후 할 수 있습니다.
티스토리 글쓰기에 들어가 위에 창에서 기본모드-html을 선택합니다.
목차 만들기
id를 이용한 목차 만들기
- 목차가 될 대상을 만듭니다.
a href = '#01' 을 작성합니다.
<a href=“#01”>목차 만들기</a>
- 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로 조작을 해서 기본모드에서 띄어쓰기 동작이 먹히지 않습니다.
실제로 해 보면 다음과 같이 링크 모양으로 뜨고 링크를 누르면 해당 곳으로 이동합니다.
'웹 > 블로그' 카테고리의 다른 글
[Python] 내 블로그 포스팅 제목 모두 가져오기(티스토리 api) (0) | 2022.06.22 |
---|---|
티스토리 api Access key 발급 총정리 (0) | 2022.06.21 |
구글 애드센스 은행별 식별코드 검색방법 (2) | 2022.01.13 |
구글 애드센스 계좌 등록하기(SC제일은행 외환계좌) (0) | 2021.11.29 |
그림판으로 티스토리 썸네일 만들기 (0) | 2021.10.24 |