티스토리 블로그에 목차 달기

블로그 내비게이션 = 목차

티스토리 블로그 오른쪽에 목차(TOC, Table Of Contents)를 달았다. 목차는 동적으로 반응하도록 구현돼 있다. 블로그 글을 읽을 때 현재 위치를 파악해 읽고 있는 부분의 소제목이 목차에 반영된다. 그리고 목차의 소제목을 클릭하면 해당 소제목이 있는 화면으로 이동한다.

 
 

티스토리 글쓰기에서 목차 만들기와 잔업

 <a href="https://likenew.tistory.com">likenew</a> 

▲ HTML에서 링크 이동은 <a> 태그와 href 속성을 이용한다.
▼ 여기서 href 속성 값에 인터넷 주소 대신에 #id 이름(속성 값)을 입력하면 클릭 시 "id 이름"이 있는 태그 쪽으로 이동한다. "id 이름"은 HTML 문서에서 유일해야 한다.

<p href="#xxx">목차1</p><!-- 클릭 시 화면이 제목 1로 이동-->
<p href="#yyy">목차2</p><!-- 클릭 시 화면이 제목 2로 이동-->
<p href="#zzz">목차3</p><!-- 클릭 시 화면이 제목 3로 이동-->

<p id="xxx">제목1</p>
<p>본문1</p>
<p id="yyy">제목2</p>
<p>본문2</p>
<p id="zzz">제목3</p>
<p>본문3</p>

티스토리 블로그 글쓰기는 HTML 모드를 지원하기 때문에 위의 <a> 태그와 href 속성을 이용해 티스토리 블로그 글에 목차를 만들 수 있다. 글머리에 목차 목록을 만들고 목차가 이동할 곳을 찾아 id와 id 값을 입력하면 된다. 조금 번거롭기는 하다.

티스토리 서식을 이용하면 목차 만들기 시간을 줄일 수 있다. 하지만, 목차를 만들 때마다 HTML 속에서 소제목 부분을 찾아 id와 id 값을 입력을 붙여줘야 하는 잔업은 여전히 필요하다.

티스토리 블로그 서식, 인용문 디자인 공유

 
 

목차 플러그인

구글에서 "toc javascript"로 검색하면 능력자들이 만든 목차 플러그인이 있다. 이 플러그인을 티스토리 블로그에 적용하면 위의 잔업과 "바이 바이" 할 수 있다.

▼ Tistory TOC(Table Of Contents) 구현기
현재 스킨에 적용 중인 목차 플러그인

Tistory TOC(Table Of Contents) 구현기

▼ Free jQuery Table of Contents Plugins
Demo 버튼으로 목차 디자인과 기능을 확인할 수 있다. 목차 플러그인 사용 방법은 기술돼 있으며 티스토리 블로그 스킨에 적용하려면 skin.html과 style.css의 수정 작업이 필요하다. 티스토리 스킨에 적용된 목차 플러그인이 아니기에 플러그인 자체의 수정이 필요할지도 모르겠다. 이곳에서는 목차 플러그인 디자인과 원리만 봐도 좋을 듯싶다.

10 Best Table Of Contents JavaScript Plugins (2022 Update) | jQuery Script

 

목차 리스트업은 (소) 제목(h1 ~ h4)으로 한다.

목차 플러그인은 HTML의 <h1> ~ <h4> 태그를 기준으로 리스트업해 목록을 만든다. 목차 플러그인을 적용해 자동으로 목차를 만들려면 (소) 제목에 해당하는 <h1> ~ <h4> 태그를 써야한다. <h1> ~ <h6>는 (소) 제목 용도로 사용되는 HTML 태그인데 <h1>의 글자 크기가 제일 크고 <h6>의 글자 크기는 제일 작다. 글자 크기는 티스토리 스킨 파일 style.css에서 수정할 수 있다.

티스토리 글쓰기 화면은 "제목" 기능을 지원한다. 제목은 "제목1"부터 "제목3"까지 쓸 수 있는데 이는 내부적으로 <h2> ~ <h4> HTML 코드로 변환된다.

▲ 티스토리 글쓰기 화면

<h2 data-ke-size="size26">제목1</h2>
<h3 data-ke-size="size23">제목2</h3>
<h4 data-ke-size="size20">제목3</h4>

▲ 티스토리 글쓰기의 제목은 <h2> ~ <h4>에 대응돼 있다.

 
 

마크다운으로 글을 쓰면 조금 더 편하다.

마크다운으로 글을 쓸 때 (소) 제목은 #(sharp) 기호를 문장의 제일 앞머리에 넣으면 된다. #은 <h1>, ######은 <h6>에 해당한다. 위의 티스토리 글쓰기 화면에서 "제목1" ~ "제목3"을 클릭하는 것보다 빠르게 (소) 제목을 입력/수정/삭제할 수 있다.

▼ 마크다운 관련 글

Visual Studio Code의 마크다운 글쓰기 화면/Preview 커스커마이징과 티스토리 글쓰기

마크다운(markdown), 티스토리 블로그, 마크다운 에디터 typora

 
 

목차 위치 바꾸기

티스토리는 블로그 스킨 편집이 자유롭다. skin.html과 style.css 파일을 수정하면 나만의 블로그 스킨을 만들 수 있다. 목차 디자인도 마찬가지다. 스킨 파일을 수정하면 목차를 디자인하고 위치를 변경할 수 있다.
목차 위치는 CSS의 position 속성과 left, right, top, bottom 속성을 이용한다. position 속성 값에 fixed를 입력하면 스크롤을 위아래로 움직여도 정해진 위치에 고정돼 움직이지 않는다.

.toc {
    position: fixed; /* 목차 위치 고정 */
    top: 10px; /* 브라우저 화면의 위쪽에서 아래로 10px 떨어진 곳에 고정 */
    right: 5px; /* 브라우저 화면의 오른쪽에서 왼쪽으로 5px 떨어진 곳에 고정 */
    height: 100%; /* 목차 세로 크기 */
    z-index: 10; /* 목차가 다른 요소에 가려져 보이지 않을 때 높은 숫자를 입력한다. */
}

 
 

목차 위치를 본문 옆에 고정시키는 방법

이 블로그 스킨의 본문 너비는 720px이며 본문 위치는 모니터 가운데에 있다. FHD(가로 1920px) 모니터에서 단순 계산으로 left=1340px을 입력하면 본문에서 20px 떨어진 곳에 목차를 놓을 수 있다. 하지만, 해상도가 다른 모니터 QHD 모니터(가로 2560px)에서 left=1340px는 모니터 중앙 부분에 해당돼 본문 글 위에 목차가 놓이게 된다. 이럴 때는 CSS 함수 calc()를 이용하면 된다.

left: calc(50% + 360px); /* 화면의 50% 되는 지점에서 360px을 더한다. */

 

32인치 QHD 모니터 LG 32QN650 리뷰