본문 바로가기
카테고리 없음

자동목차 만들기-아주 쉬움

by 강아지톡톡-아지톡 2024. 8. 30.
반응형

자동목차 만들기

티스토리 블로그의 HTML을 편집하여 자동 목차를 구현하는 방법을 구체적으로, 자세히 설명해 드리겠습니다. 3단계만 수정하세요.

1 티스토리 관리자 페이지 로그인

티스토리 관리자 페이지에 로그인합니다. '스킨 편집' 메뉴로 이동합니다.
HTML 편집 모드에서 다음과 같이 코드들을 모두 수정합니다:

다음 코드는 티스토리 자동목차 스킨코드입니다. 제일 아래에 이코드를 첨부파일로 올려놓았습니다.


<!DOCTYPE html> <html>

수정할부분1:: 

1단계 수정한 모습

수정할 부분2::

ctrl-f로 <div class="entry-content>를 찾아 그위에 자동목차(<div id="toc"></div>)를 작성합니다.
자동목차를 적용한 예입니다.

마지막 수정할 부분3::

</body> </html>

마지막 3번째의 적용예입니다.


첨부파일:: 위의 소스파일입니다.

티스토리 자동목차 스킨코드.txt
0.00MB

2. 코드를 적용하는 방법

이 코드를 적용하는 방법은 다음과 같습니다:

  • <head> 태그 안에 CSS 코드를 추가합니다. 기존 스타일 태그가 있다면 그 안에 새로운 스타일을 추가하면 됩니다.
  • <body> 태그 내에서 글 본문이 시작되는 부분 바로 위에 <div id="toc"></div>를 삽입합니다. 보통 <div class="entry-content"> 태그 바로 위에 놓습니다. 
  • 마지막으로 </body> 태그 바로 앞에 JavaScript 코드를 추가합니다.

 

3. 주의할 점.

감사합니다. 이렇게 긴 숙제를 완성합니다 언제나 메섹톡이었습니다.  세상은 내러티브다.

반응형