HTML 문서에 자동으로 목차를 만드는 방법
자동으로 목차를 만드려면
오래전에 자바스크립트 책을 읽다가 이런 방법이 예제로 공개된 것을 알게 되었다. 아마도 자바스크립트에 관심을 가지고 공부한 사람이라면 누구나 한번쯤 읽어 보았을 만큼, 책표지만 보아도 알만한 책이다. 바로 플래너건(Flanagan, David)씨의 Javascript 책이다.
이책에서 소개한 스크립트를 사용하여 HTML 페이지에 규칙에 따라 넣으면 원하는 위치에 목차가 자동으로 들어간다.
지금까지의 경험에 의하면 무작정 따라하기 시리즈나 21일 완성하기 등의 책은 관심을 끌기에는 충분하지만, 응용력을 길러주지 못하는 수박겉핥기 식이 많다. 관심자는 두둑한 명저를 책방에 가서 펴보고 골라야 한다.
DOM
<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
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
tocEx.html'과학기술 이야기' 카테고리의 다른 글
| 아이워크 페이지(Pages)에서 수식을 작성하는 쉬운 법 (1) | 2010.12.16 |
|---|---|
| 오페라 브라우저 11 베타를 사용하고나서 (0) | 2010.12.10 |
| 오페라(Opera) 인터넷 브라우저 10.54-10.63까지의 리뷰 (2) | 2010.11.03 |
| .NET Socket 통신과 Disconnect 이벤트 (0) | 2010.10.29 |
