HTML 문서에 자동으로 목차를 만드는 방법

[목차(도우미)]
HTML문서에 자동으로 목차(Table of Contents)를 만들려면 웹서버측에서 스크립트를 실행시키는 것이 아니라 클라이언트측(즉 웹브라우저)에서 자바스크립트(Javascript)를 실행시키는 것이다.

자동으로 목차를 만드려면

오래전에 자바스크립트 책을 읽다가 이런 방법이 예제로 공개된 것을 알게 되었다. 아마도 자바스크립트에 관심을 가지고 공부한 사람이라면 누구나 한번쯤 읽어 보았을 만큼, 책표지만 보아도 알만한 책이다. 바로 플래너건(Flanagan, David)씨의 Javascript 책이다.


이책에서 소개한 스크립트를 사용하여 HTML 페이지에 규칙에 따라 넣으면 원하는 위치에 목차가 자동으로 들어간다. 

지금까지의 경험에 의하면 무작정 따라하기 시리즈나 21일 완성하기 등의 책은 관심을 끌기에는 충분하지만, 응용력을 길러주지 못하는 수박겉핥기 식이 많다. 관심자는 두둑한 명저를 책방에 가서 펴보고 골라야 한다.

DOM

<html><body>
<div id="toc">이글의 목차</div>
<H1 class="toc">This is first Line</H1>
... manofPro...
</body></html>

HTML속에서 H1, H2, H3, H4, H5, H6태그로 정의된 부분이 목차가 된다. 링크는 자동으로 만들어 준다.
그리고 본문의 목차 요소행 앞에 목차페이지로 되돌아가는 BACK Link가 생성된다.
목차를 넣어줄 부분을 본문속에 <div id="toc">이글의 목차</div>를 써준다.


Javascript

자바스크립트 소스코드(TOC.js)는 오라일리의 페이지에 공개되어 있다. 저자가 공개한 방법이다.
링크: http://www.davidflanagan.com/javascript5/ 또는 

링크: http://oreilly.com/catalog/9780596000486
-->Examples를 클릭 --> 다운로드할 파일을 선택 --> 15 폴더속에 TOC.js가 있다.

이 스크립트를 HTML 페이지에 참조시키고 필요에 따라 스타일시트를 추가한다.


CSS Example

#toc {background-color:#E8E8E8;border:1px double silver;display:none;line-height:1.5em;
margin-bottom:6px;padding:4px 6px;}
#toc a {color:royalblue;text-decoration:none;}
#toc a:hover {color:blue;background-color:#ccf;}

.TOCLevel1, .TOCLevel2 {padding-left:1em;margin-left:0;}
.TOCLevel3 {padding-left:2em;}
.TOCLevel4 {padding-left:3em;}
.TOCLevel5 {padding-left:4em;}
.TOCBackLink {display:none;}

티스토리 블로그를 위한 수정

인터넷 상의 공개 소스에는 스타일시트(CSS)가 빠져 있고 저자의 책 본문에만 예가 나와 있다.  블로그에 맞게 자바스크립트(TOC.js)에 약간의 수정을 가했다. 
(1) 블로그에는 TOC.js에서 사용하는 규칙인 "H1, H2, ... H6" 가 너무 많이 사용되어 있으므로 스크립트에 좀더 강화된 조건을 부여하여 <H2 class="toc"> 형태의 클래스를 참조하도록 하였다.
(2) <div id="toc">이글의 목차</div>를 티스토리(skin.html)의 특징을 위하여 목차 요소가 없을 경우에는 비표시하도록 스크립트를 변경하였다.
(3) 마지막으로 목차를 표시하기 위한 스타일시트를 추가해서 나름대로 멋있게 꾸며보았다.
(4) 블로그의 설정에 스크립트와 스타일시트를 추가하였다.

이 블로그 포스트에 있는 것이 자동 스크립트로 생성한 목차의 예다.TOC.js와 TOC.css를 가지고 구현되었다. 스타일시트는 향후에도 멋있게 조금씩 수정을 가할 생각이다.

자동 목차용 자바스크립트(TOC.js)가 필요한 분은 이 블로그에서 다운로드해도 된다. 물론 플래너건 씨의 오리지널 스크립트를 다운로드하는 것이 더 좋다.

후기 I

  이글은 2010/06/28 이전에 작성한 것이다. 그후 스크립트를 고속처리하기 위하여 도큐멘트 전체에서 찾던 처리를 블로그에 맞게 수정하였다. 지금은 블로그의 구조에 맞추어 contents블록 속의 내용만을 검색하는 처리로 바꾸었기 때문에 이전 초판보다는 고속처리가 가능하다. 다만 체감 속도의 차이는 별로 느낄 수 없었다.

후기 II 2011.1.18

목차를 만드는 HTML의 예를 첨부해 둡니다. 자바스크립트와 스타일시트는 이 블로그를 참조하도록 해두었으므로 각자 기호에 맞게 고쳐서 쓰세요. 파일이름: tocEx.html


저작자 표시 비영리 변경 금지
신고
by 금메달.아빠 on 2010.12.05 18:58 주요 단어: , , , , , , , , , ,
  • BlogIcon 백안시 2010.12.05 16:08 신고 주소 수정/삭제 답글

    제 블로그에 정말 필요한 스크립트였는데 이렇게 찾게 되었네요. 좋은 정보 알려주셔서 감사드립니다!!

    • BlogIcon 금메달.아빠 2010.12.05 18:48 신고 주소 수정/삭제

      아마 스크립트를 다운로드 하셨으리라 봅니다. 잘 안되면 나중에 연락해 주세요. 현재 스크립트는 고속처리를 위하여 몇가지 제한사항을 넣어두었습니다. 아마 스크립트를 읽어봐야할 지도 모릅니다. 누구나 읽어보면 알수 있지만, contents에 넣어야 합니다.
      블로그 방문 감사합니다.

  • BlogIcon AlanShearer 2011.01.27 16:24 신고 주소 수정/삭제 답글

    사용하는 법을 잘 모르겟는데요..

    저가 칼럼 시리즈를 번역하는데

    그러면 여기다 전부 주소를 입력해서 연결시켜야 하는 건가요?

    html을 잘 모르는 사람이라 한수 부탁드립니다.....

  • BlogIcon 백안시 2011.07.23 03:58 신고 주소 수정/삭제 답글

    안녕하세요. 카타 프로님 덕에 현재 블로그에서 자동 목록 기능을 사용중입니다. 헌데 글을 작성하다보니 목차가 길어져서 본문을 읽기 불편해지는 상황이 생겨버려서요. 위키백과에서처럼 목차를 접고 펼치는 기능을 추가하고 싶은데 어느 쪽을 수정해야 하는지 잘 모르겠습니다. 어떻게 하면 좋을까요? 지금은 임시로 목차 생성 부분을 통으로 펼치기/접기 상태로 만들었습니다만 보기가 좋지 않네요 ㅜ

    • BlogIcon 금메달.아빠 2011.07.23 13:30 신고 주소 수정/삭제

      안녕하세요?
      자동목차를 사용하고 계시군요? 반갑습니다.
      위키피디어 스타일로 접고 펴는 것에 대해서 사실은 예전부터 검토했던 것입니다. 다만, 목차가 길면 본문도 길것이기 때문에 그럴 수록 목차가 역할을 발휘하는 것으로 보고 펴고접기를 마련하지 않았던 것입니다.

      직접 실현해 보시려면 http://manofpro.tistory.com/318 을 참조 하시고, 그냥 기다리시면 7월이 가기전에 개정판 자동 목차를 만들어 공개해 보기로 하겠습니다.

      행복한 하루하루 되세요.

체크하면 비공개 댓글이 됩니다