목차
티스토리 자동 목차 (TOC) 쉽게 만들기
블로그 시작하고 다른 블로그에 있는 목차 메뉴 보신 적 있을까요?
티스토리 블로그를 시작하면 목차 메뉴를 넣는 게 가장 궁금하셨을 텐데요.
개발자나 프로그래머가 아니여도 티스토리에 자동으로 목차 넣는 방법을 알려드리려고 합니다.
아래 설명대로 차근차근 따라 하시면 초보자 분들도 쉽게 티스토리 블로그에 자동 목차(TOC)를 넣을 수 있을 거예요!
그럼 천천히 따라오세요!!
자동 목차 (TOC / jquery.toc ) 파일 다운로드
티스토리 블로그에 자동 목차를 생성해 주는 파일을 먼저 다운로드하셔야 됩니다.
무료로 사용 가능하기 때문에 티스토리 블로그에선 모두 자동목차 생성(TOC / jquery.toc ) 소스를 쓰고 있습니다.
먼저 아래 파일을 다운 받아주세요. 그리고 압축까지 풀어줍니다.
자동 목차 (jquery.toc) 파일 업로드
압축을 풀고 나면 파일 두 개가 있을 텐데요. jquery.toc.js 와 jquery.toc.min.js 두 파일 모두 티스토리 파일에 업로드해줍니다.
간단하게 순서로 나타내면 다음과 같습니다.
- 티스토리 블로그 관리 진입
- ⓵ 스킨 편집
- ⓶ HTML 편집
- ⓷ 파일 업로드
- ⓸ 추가 버튼 클릭
- ⓹ 파일 두 개 선택 후 열기
- jquery toc 파일 2개 모두 업로드 완료!
여기까지 모두 잘 따라오셨나요?
파일 업로드가 성공적으로 완료되면 티스토리 파일 업로드 목록에 두 파일이 있는지 확인해 주세요.
그런 다음에 images/jquery.toc.js 파일을 클릭 후 마우스 오른쪽 버튼을 눌러서 링크 복사를 눌러줍니다.
그리고 이 링크 주소를 메모장 같은 곳에 붙여 넣기 해주세요.
글 마지막에 쉽게 서식을 저장해 놓고 사용하기 위해 미리 하는 작업입니다.
자동 목차 HTML 코드 넣기
업로드한 자동 목차 코드를 이제 블로그 스킨 편집 모드로 이동해서 </head> 바로 윗부분에 넣어줍니다.
아래 코드에서 복사 버튼을 눌러서 복사해 주세요.
<!-- 자동 목록 코드 시작 -->
<script type="text/javascript" src="./images/jquery.toc.min.js"></script>
<!-- 자동 목록 코드 끝 -->
그리고 이렇게 붙여 넣기 하면 끝!
코드를 넣은 후 저장을 누르면 자동 목차 코드가 블로그에 적용이 되었습니다.
이제 이 목록을 쉽게 사용하기 위해 서식에 저장해 놓고 쉽게 사용하는 과정을 설명드릴게요.
서식을 이용하여 자동 목차 미리 만들기
티스토리 블로그를 막 시작하신 분들이라면 서식 기능을 꼭 알아두세요.
블로그 글을 쓸 때마다 매번 일일이 작성해야 되는 서식을 미리 만들어놓고 쓸 수 있는 기능입니다.
그럼 자동 목차 기능도 서식으로 미리 만들어 보겠습니다.
1. 서식 관리에서 서식 쓰기
2. 서식에 코드 붙여 넣기
<script type="text/javascript" src="위에서 언급한 images/jquery.toc.js 링크 주소"></script>
<p data-ke-size="size18"><b>목차</b></p>
<ul id="toc"></ul>
<script type="text/javascript"> $(function(){ $("#toc").toc( {content: ".tt_article_useless_p_margin", headings: "h2,h3,h4" , top: -90, isBlink : true, blinkColor : '#21B9DE' } ) }); </script>
위 코드를 보시면 headings에 h2, h3, h4가 있는데요.
이 코드의 의미는 목차의 뎁스입니다. 지금은 잘 이해가 되지 않아도 적용해 보시면 금방 이해가 될 겁니다.
서식 편집기에 진입했으면 편집기 모드를 HTML로 변환 후 코드를 붙여 넣기 합니다.
HTML 편집기 모드에 진입하면 아래처럼 코드를 넣을 수 있는 화면으로 바뀌게 됩니다.
그리고 src 위치에 아까 위에서 복사해놨던 링크 주소로 수정합니다.
다시 기본 모드로 돌아오면 아래와 같은 이미지입니다.
여기까지 확인이 됐으면 서식을 저장합니다.
자동 목차 서식 사용하기
이제 글쓰기를 할 차례입니다.
글쓰기 모드에 진입 후 메뉴에서 서식을 불러옵니다.
서식에서 저장한 목차 서식을 클릭하면
서식을 불러오고 제목2, 제목3, 제목4 를 선택 후 문단을 작성합니다.
문단을 작성 후 미리 보기를 클릭해 보시면 자동으로 목차가 생성된 것을 확인할 수 있습니다.
목차가 생성되셨나요? 지금까지 티스토리 자동 목차 만들기를 알아봤습니다.
이렇게 하면 기본적인 자동 목차 생성하는 세팅은 완성됐습니다.
티스토리 블로그 자동 목차 생성에 도움이 되셨으면 좋겠습니다!
함께 보면 좋은 글
[티스토리] 제목 소제목 스타일 1분만에 만들기
목차 티스토리 제목 스타일은 어떻게 만들까? 티스토리 블로그에서 글을 작성할 때 제목을 이용해서 문단을 구분하는데요. 기본 제목들은 스타일이 안되어 있어서 가독성이 좋은편이 아닙니다.
doithyun.com
'IT정보' 카테고리의 다른 글
| [MAC] 맥 이모티콘 이모지(emoji) 사용 방법 단축키 TIP 😀 (0) | 2024.03.02 |
|---|---|
| [iOS] 아이폰 아이패드 외장 키보드 한영 전환 불가 버그 (0) | 2024.03.02 |
| [티스토리] 제목 소제목 스타일 1분만에 만들기 (0) | 2024.02.27 |
| 이미지를 파비콘(favicon) ico 으로 간단하게 만들기 (0) | 2024.02.15 |
