[친효 스킨] 블로그에 목차 넣기 원리

우연히 "ㅅㅗㅅㅗ일기"님의 블로그를 보다가 본문에 목차를 자동으로 넣는 법을 알게 되어서 제 블로그에도 적용해 보았습니다. ("ㅅㅗㅅㅗ일기"님의 블로그는 아래에 링크를 해 두었으니 참조하시기 바랍니다.)

 

혹시 관심이 있으신 분은 링크를 참조하시고, 저는 이 부분에 지식이 없으신 초보자님들을 위해 "자동으로 목차 넣는 방법의 기본적인 원리"에 대해서 간단히 설명을 드립니다.

아래 목차 (Table of Contents)는 이렇게 만들어진 자동 목차 넣기 기능으로 구현된 것입니다.

 

목 차 (Table of Contents)

•  

 

1. 목차 넣기 원리

저희들이 블로그 본문을 작성을 할 때 제목 1 ~3 메뉴를 이용하여 본문 중에 중요 문단의 제목을 설정합니다.

이렇게 작성된 제목은 HTML로는 H1, H2, H3 태그가 붙을 것입니다.

목차는 이렇게 작성된 본문 중에서 H1, H2, H3 태그가 붙은 문장을 선택해서 목차라는 이름을 붙이고 그 아래에 선택된 문장을 리스트업 하는 것입니다.  (보통 HTML ul 태그 밑에 li 태그로 구현) 

마지막으로 이들 각각을 본문 중의 H1, H2, H3 태그가 붙은 문장으로 <a> Tag를 이용해서 연결해서 각각을 누를 때 마다 본문의 해당 부분으로 이동하도록 만들어 줍니다.

 

이때 좀 더 시각적으로 보기 좋게 하기 위해서 목차 부분에 마우스를 갖다 대면 (이를 호버링(hovering)이라고 함), 그 제목의 색상이 바뀌는 효과를 주면 좋을 것입니다. 저는 색상이 하늘색(cyan)으로 바뀌도록 했습니다.

 

이 정도 내용이 목차 넣기의 기본 원리입니다.

 

2. 목차 넣기 구현

위에서 설명한 목차 넣기 원리는 말로 쓰면 간단하지만, "전체 본문을 스캔닝 해서 H1, H2, H3가 붙은 문장을 읽어 들이고 이들 값으로 새로운 목차 항목을 만들고 각각을 <a> 태그를 사용하여 연결하는 일"들은 생각보다 간단하지 않을 것입니다.

 

티스토리 블로그와 같은 웹상에서 이 기능을 구현하는 것은 "자바 스크립터 (Java Script)"인데 이 언어를 능숙하게 다룰 줄 아시는 분들에게는 단순한 일이지만 저희같이 비전문인들에게는 무척 어려운 일일 것입니다. 

 

그런데 세상에는 똑똑하면서도 친절하신 분들이 많아서 이런 형태의 기능을 다 만들어 놓고 누구나 사용할 수 있도록 공개한 것들이 많습니다. 소위 오픈소스라고 하는 것이지요.

 

자바 스크립터의 기능들을 오픈 소스 라이 버리로 만들어서 공개한 것도 많이 있는데 그중에 대표적인 것이 Jqurey입니다.  오늘 우리 토픽인 목차 만들기도 다행히 누군가 만들어서 Jqurey plungin으로 배포하고 있습니다.

예를 들어서 구글 검색창에 "jquery table of contents"라고 검색해 보면 바로 확인을 할 수 있습니다. (table of contents는 목차의 영어 표현이죠 ^^, 아래에는 그냥 toc라고 부르겠습니다.)

 

저희들은 큰 고민 없이 친절한 누군가가 만든 "Jqurey toc plungin (이하 : jquery.toc.min.js)"을 불러다 쓰면 됩니다. 그러면 앞서 설명드린 목차 만드는 일들이 마법같이 일어납니다.

 

3. 목차 넣기 구현 절차

앞서 설명드린 것처럼 저희들이 할 일은 굳이 그 복잡한 프로그램 (코딩)을 할 필요 없이 아래 정도의 작업만 해 주면 됩니다.

 

1) Jqeury toc plugin (jquery.toc.min.js)을 자신의 티스토리 웹서버에 올려놓고 

2) 브라우저가 우리 글을 읽을 때마다 이 프러그인이 로딩되도록 HTML 코드의 head부분을 약간 수정해 둡니다. 

3) 그리고, 앞서 설명드린 것처럼 목차 부분이 좀 더 예쁘고 기능적 (Ex, Hovering Function을 넣는 것과 같은)으로 보이도록, CSS 언어로 간단한 코딩을 추가합니다. (이 부분도 친절하신 분들이 대부분 만들어 놓았음 ^^)

4) 마지막으로 본문 중에 목차를 넣을 부분에 HTML로 "여기가 목차를 넣을 부분이다"라고 선언을 해 주면 됩니다.

 

여기서 1), 2), 3) 번 작업은 티스토리 스킨 편집 메뉴에 들어가서 "파일 업로드", "HTML", "CSS"를 한 번만 수정해 주면 되고 4)은 매번 블로그 본문을 작성할 때마다 해주면 됩니다.

 

4. 구체적인 방법

처음에 소개드린 "ㅅㅗㅅㅗ일기"님의 블로그를 참조하시면 구체적인 코드(code)들이 설명되어 있으므로 따라 하시면 됩니다. 위에 제가 설명드린 기본 원리와 구현 절차를 읽고 배경 지식을 갖고 "ㅅㅗㅅㅗ일기"님의 블로그를 보시면 좀 더 쉽게 이해가 되실 것입니다.

 

그리고 jquery와 CSS 코딩에 유관 부분도 아래에 링크를 걸어 두었으니 참조하시면 공부하시는데 도움이 될 것입니다.

(참고로 저는 Javascript와 CSS 코딩을 정식으로 공부하지 않았기 때문에 그냥 그때그때 필요한 것을 검색해서 공부하면서 사용하고 있습니다. ^^)

 

https://avada.tistory.com/1784

티스토리 블로그의 모든 글에 자동으로 목차 표시하는 방법

https://ndabas.github.io/toc/

Table of Contents jQuery Plugin — jquery.toc

https://www.w3docs.com/snippets/css/how-to-change-cursor-on-hover-in-css.html

How to Change Cursor on Hover in CSS

---

함께 읽어보세요.

2020/05/22 - 코로나 이후 나타날 뉴노멀 시대의 경제적 특징

2020/04/26 - 친효스킨, 애드온(Add-on) 활용법