편집 화면에서 설정 가능한 "문단 모양"의 "제목1", "제목2", "제목3"을 보면서 MS Word 처럼 목차(TOC: Table of Contents) 생성 기능이 있지 않을까 하는 생각에 검색해보니 공식적으로 제공하는 것은 아니고 공개된 도구1 2를 이용하는 방법이 있는 것 같았다. 약간의 삽질이 필요해 보였지만 TOC 기능은 그 수고를 감수할 가치가 있다고 생각했다. 간단히 찾아 본 검색 결과 중에 구체적인 사례와 설명을 다루고 있는 포스팅3을 발견하여 이를 기준으로 작업을 시작했다.
구현 절차는 상기한 블로그에 (스크린샷을 포함하여) 친절하게 설명되어 있어 덧붙일 내용은 별로 없을 것 같다. 대략적인 구현 절차, 즉 작업 순서만 다시 짚어보면 아래와 같은데, script 파일 업로드, html 및 css 수정이 모두 블로그 관리 기능 내에서 이루어질 수 있다는 티스토리의 분명한 장점을 적극 활용하는 방식으로 구성된다. 참고로 현재 본 블로그는 Odyssey 스킨을 사용하고 있으며, 아래 절차 중 "제목 스타일 설정" 단계는 생략하였다.
1. 티스토리 "스킨 편집" (중 "파일업로드") 통하여 TOC jQuery Plugin Script 파일 업로드
2. 티스토리 "스킨 편집" (중 "html 편집") 통하여 업로드 완료한 Script를 <body> 태그 내 반영(선언)
3. 티스토리 "스킨 편집" (중 "CSS") 통하여 목차 스타일 설정
4. 티스토리 "스킨 편집" (중 "CSS") 통하여 제목 스타일 설정
5. 티스토리 "서식 관리" 통하여 (목차 생성하는 HTML 코드를 포함하도록) 목차 서식 등록
6. 포스팅 편집(작성) 시 "서식" 선택하여 목차 서식 적용
다만 CSS처럼 code를 조정하여 반영한 부분은 메모 차원에서 정리해 두어도 좋을 것 같다. 오랜만에 CSS 검색해가며 작업했다. 글 하나 띄워놓고 미리보기-CSS수정 반복하면서 적당한 모양 나올 때까지 반복 작업. TOC 관련 코드는 CSS 가장 마지막 부분에 선언해주었고, 원 포스팅의 가이드 대비 수정한 부분은 주석 처리 해두었다.
.book-toc {
position: relative;
width: fit-content;
border: 1px solid gray; /* modified */
padding: 10px 20px 10px 15px;
z-index: 1;
}
.book-toc:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: white; /* modified */
z-index: -1;
opacity: 0.1;
}
.book-toc p {
/* font-weight: bold; */ /* deleted */
font-size: 1em; /* modified */
color: gray; /* modified */
}
#toc * {
font-size: 1.00em; /* */
color: #000 !important;
font-family: 'Noto Serif KR'; /* added */
}
#toc {
margin-bottom: 0;
}
#toc a:hover {
color: #000;
}
#toc ul {
margin-top: 5px;
margin-bottom: 0px;
}
/* added / bullet at the top */
#toc li > * {
vertical-align: text-top;
}
/* added / bullet at the top */
#toc > li {
padding-left: 0;
text-indent: 0;
list-style-type: square; /* modified */
margin-bottom: 20px; /* modified */
/* font-weight: bold; */ /* deleted */
}
#toc > li > a {
text-decoration:none;
}
#toc > li > ul {
padding-left: 20px;
margin-top: 0;
margin-bottom: 0;
}
#toc > li > ul > li {
font-size: 0.87em;
padding-left: 0;
text-indent: 0;
list-style-type: disc;
margin-bottom: 0;
margin-top: 5px;
}
#toc > li > ul > li > a {
font-size: 1em;
text-decoration:none;
}
#toc > li > ul > li > ul {
padding-left: 10px;
margin-top: 0;
margin-bottom: 0;
}
#toc > li > ul > li > ul > li {
font-size: 0.87em;
padding-left: 0;
text-indent: 0;
list-style-type: circle; /* modified */
margin-bottom: 0;
margin-top: 3px;
}
#toc > li > ul > li > ul > li > a {
font-size: 0.875em;
text-decoration:none;
}
(대체로 입맛에 맞도록 스타일 조정한 내역이지만) 핵심은 바로 아래 부분에 있다.
이 코드가 없을 경우, LI(UL) 적용된 문장의텍스트가 프레임 가로 길이보다 길어져 "두 줄 이상"으로 표시될 때 bullet이(두 줄이 출력되는 영역의 "세로" 기준으로) 아래쪽에 표시되어 가독성이 심각하게 떨어지는 문제가 있었다. 당연히 원 포스팅의 가이드에 문제가 있는 것은 아니고, 한 줄이 넘어가는 "제목"을 사용하는 경우가 흔하지 않을테니 이러한 이슈나 스타일을 "추가"해 주어야 하는 필요성 자체가 식별되지 않았을 것으로 생각한다.
아래와 같이 선언할 경우 bullet이 (정상적으로) 위쪽에 표시된다. CSS에서 잡아줄 수 있는 이슈라 생각하고 이리저리 검색하고 적용해보다가 겨우 찾았다(적용 전후 예시4도 포함되어 있다). 내가 stackoverflow 도움을 받을 줄이야.
/* added / bullet at the top */
#toc li > * {
vertical-align: text-top;
}
/* added / bullet at the top */
TOC 기능을 적용한 게시물은 다음과 같다. 꽤 만족스럽다.
2021.03.29 - ISACA Journal. 2021. Volume 1
ISACA Journal. 2021. Volume 1
Table of Contents ISACA Journal / 2021 / Volume 1 www.isaca.org/resources/isaca-journal/issues/2021/volume-1 Volume 1, 2021 After the most disruptive workforce year in generations, how do we make ad..
issimplenet.tistory.com
끝.
- <nhj12311.tistory.com/296>후술할 resource들과 모두 동일한 plugin을 사용하고 있으며, GitHub 주소가 공개되어 있어 기재하였다. [본문으로]
- <github.com/ndabas/toc> TOC jQuery Plugin 개발자의 GitHub repository로 파악하였다. [본문으로]
- <https://sangminem.tistory.com/307> 방문자 피드백을 토대로 포스팅을 업데이트한 흔적이 보인다. [본문으로]
- stackoverflow.com/questions/28681147/position-the-li-dot-at-the-top [본문으로]