마지막 수정일 : 2021년 4월 13일.
최초 작성일 : 2021년 4월 13일.
. 애드블록 등 광고 차단 프로그램을 비활성화해주시면 감사하겠습니다.
목차
파일 다운로드
. 이 링크를 이용해 압축 파일을 다운로드한 뒤, 압축을 풀어주세요.
티스토리에 업로드
. 블로그 관리 페이지로 들어갑니다.
. 왼쪽 메뉴 중 [스킨 편집] 메뉴를 클릭합니다.
. 스킨 편집 창이 열리면 오른쪽의 [html 편집] 버튼을 누릅니다.
. 오른쪽 위 메뉴 중 [파일업로드] 탭을 누릅니다.
. 오른쪽 아래의 [추가] 버튼을 눌러 다운로드한 두 개의 파일을 선택해서 추가합니다.
HTML 수정
. <head> 태그 안에 다음 코드를 붙여넣습니다.
| <script type="text/javascript" src="./images/jquery.toc.min.js"></script> |
. 제 블로그는 드래그를 할 수 없기 때문에 아래 txt 파일을 다운로드하여서 복사해주세요.
글에 적용하기 위해 서식으로 만들기
. 이제부터 글에 특정 코드를 적어 넣으면 해당 위치에 자동으로 해당 포스트의 목차가 생성됩니다. 지금부터는 그 코드를 저장하여 원하는 위치에 매번 새롭게 적지 않아도 되게끔 서식으로 만들고자 합니다.
. 아래 txt 파일을 다운로드하고 열어주세요.
- 지정된 <style> 태그는 제가 제 블로그에 맞게 지정한 겁니다.
- 그대로 쓰실 분은 코드에 있는 모든 #FFF를 지워주세요.
. 다시 블로그 관리 페이지로 가서 [스킨 편집]→[html 편집]→[파일업로드] 탭으로 이동합니다.
. 나열된 파일 목록 중 images/jquery.toc.js 파일을 찾아서 우클릭한 다음 [링크 복사] 메뉴 혹은 [링크 주소 복사] 메뉴를 클릭합니다.
. txt 파일에서 ???????????로 되어 있는 부분에 복사한 링크 주소를 붙여 넣습니다.
포스트에서 제목 설정하기
. 티스토리에서 제공하는 버튼 활용
- 제목으로 설정하고자 하는 문장에 입력 커서를 두고, 에디터 위의 [제목1] 버튼을 눌러 [제목1] 메뉴를 누릅니다.
- 단, 이 방법을 이용하면 태그에 스타일이 추가되어 블로그 CSS가 적용되지 않습니다. 블로그 CSS 적용을 원하는 분들은 아래 'HTML 수정' 방법으로 해주세요.
. HTML 수정
- [기본모드]를 [HTML] 모드로 바꿉니다.
- 제목으로 설정하고자 하는 부분의 <p> 태그를 <h2>, <h3>, <h4> 태그 중 원하는 거로 바꿉니다.
목차 넣기
. 포스트에서 목차를 넣을 위치에 커서를 둡니다.
. 더보기 단추(…)를 눌러 [서식]을 클릭한 다음 지정한 목차 서식을 선택합니다.
. 글을 발행하면 원하는 위치에 제목으로 설정한 문장들이 자동으로 목차로 만들어집니다.
참고한 글
. 티스토리 "남은 인생은 부자", 바로 가기.
. 티스토리 "IT's me", 바로 가기.
#한설날 #티스토리 #목차만들기 #TableOfContents #TOC
