필자가 조사한 바에 따르면 티스토리 블로그에서 목차 (내부링크, TOC - Table Of Contents)를 만드는 방법은 HTML모드로 들어가 코드를 건드리는 것뿐이다. 그러므로 필자를 포함한 초심자들은 목차를 만들기 쉽지 않다. 목차를 만드는 것은 구글에서 검색되는 데 긍정적인 영향을 주고, 이는 곧 수익으로 이어진다. 쉽지 않다고 해서 돈을 포기하는 것은 바보나 하는 짓이다. 포기하지 않는 자에게 성공이 따르는 법! 2가지 방법을 정리할 테니 편한 것을 고르길 바란다.
Index
1. <a href> 활용
1. 목차로 쓸 텍스트를 포함해 게시물을 다 작성하고 HTML 모드로 들어간다.
2. 클릭하면 내부링크를 통해 이동할 수 있도록 목차별로 <a href = "#OO"> 형식으로 넣고 </a>로 닫아준다. 쌍따옴표와 #은 꼭 넣어줘라. 참고로 a는 HTML에서 링크를 걸어주는 태그고, #은 대상의 위치를 설정하는 id값이라 할 수 있다.
3. 2번에서 클릭할 곳을 설정했다면, 이번에는 이동할 곳을 나타내 줄 차례다. 원하는 곳을 찾아 id="OO" 형식으로 코드를 입력한다. 가장 앞에 있는 h4, p 등을 건드리지 말고, 입력하면 된다.
그러면 아래와 같이 목차에 밑줄이 그어지면서 내부링크가 완성된다. 귀찮지만 어렵진 않을 것이다.
1-1 표의 배경색을 지정해 가독성 높이기
하얀 배경이 밋밋하여 1x1의 표를 만들어 거기에 목차를 만들고 싶다는 생각이 들 수도 있다. 그렇다면 목차로 쓸 텍스를 표 안에 넣고, HTML모드로 가자. 그 다음, <td>를 찾아 그 안에 bgcolor = "색이름" 을 넣어주면 된다.
색이름은 구글에서 '색상도구'라고 쳐서 마음에 드는 색을 찍어보는 게 제일 빠를 듯하다.
2. jquery 활용
Wikipedia에 따르면, jQuery는 HTML의 클라이언트 사이드 조작을 단순화 하도록 설계된 크로스 플랫폼의 자바스크립트 라이브러리라고 한다. 머리가 아파오기 시작한다. 설명은 차치하고 그냥 순서만 정리해서 알려주겠다. 지금부터의 내용은 아미넴님의 블로그(링크)를 요약하였음을 분명히 밝히는 바이다.
1. 'jquery.toc.zip' 파일을 받아 압축을 푼다. ZIP 파일은 여기에서 다운받을 수 있다.
2. 압축을 풀면 'jquery.toc.min.js' 파일이 나오는데 티스토리 관리 페이지에서 [꾸미기] - [스킨 편집]으로 간다. 우측의 'html 편집'을 누르고 '파일업로드' 탭으로 이동해 'jquery.toc.min.js' 파일을 추가한다.
3. 추가가 완료됐다면 다시 'HTML 편집' 탭으로 돌아간다.
4. </body> 위에 아래의 코드를 집어넣는다.
<script src="./images/jquery.toc.min.js"></script>
<script>
$(document).ready(function() {
var $toc = $("#toc");
$toc.toc({content: ".tt_article_useless_p_margin", headings: "h2,h3,h4"});
if($('.another_category').length > 0) {
$toc.find('li:last').remove();
}
});
</script>북클럽 스킨은 위의 코드로 되는 듯하나 필자가 사용하는 포스터 스킨은 'entry-content'로 해야한다고 아미넴님께서 답변을 주셨다.
각 스킨별로 값이 다른데 글을 구성하고 있는 최상위의 class 값을 넣어주면 된다. 단, HTML에서 값을 바꿔주면 5번 단계의 CSS에서도 코드를 수정해야 한다.
5. CSS 탭으로 넘어간다. 마찬가지로 아래에 있는 두 코드를 입력한다. 필자는 가장 아래쪽에 넣었다. 위의 코드는 목차, 아래 코드는 제목에 대한 것이다. 색상을 비롯할 디자인을 자신의 취향대로 바꿔줘도 된다.
/* 목차 스타일 */
.book-toc {
position: relative;
width: fit-content;
border: 1px solid #b0d197;
padding: 10px 20px 10px 15px;
z-index: 1;
}
.book-toc:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: #b0d197;
z-index: -1;
opacity: 0.1;
}
.book-toc p {
font-weight: bold;
font-size: 1.2em !important;
color: #396120;
}
#toc * {
font-size: 20px;
color: #000 !important;
}
#toc {
margin-bottom: 0;
}
#toc a:hover {
color: #000;
}
#toc ul {
margin-top: 5px;
margin-bottom: 0px;
}
#toc > li {
padding-left: 0;
text-indent: 0;
list-style-type: disc;
margin-bottom: 10px;
}
#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: disc;
margin-bottom: 0;
margin-top: 3px;
}
#toc > li > ul > li > ul > li > a {
font-size: 0.875em;
text-decoration:none;
}
/* 글 제목1,2,3 스타일 */
.tt_article_useless_p_margin h2 {
text-align: left;
border-left: #517135 12px solid;
border-bottom: 1px solid #517135;
padding: 3px 0 10px 10px;
margin: 30px 0 20px 0;
}
.tt_article_useless_p_margin h3 {
text-align: left;
border-left: #548a25 8px solid;
border-bottom: 1px solid #548a25;
padding: 3px 0 10px 10px;
margin-bottom: 15px;
}
.tt_article_useless_p_margin h4 {
text-align: left;
border-left: #71b932 6px solid;
border-bottom: 1px solid #71b932;
padding: 3px 0 10px 10px;
margin-bottom: 15px;
}
6. '적용' 버튼을 누른 후 닫고, 이제 [서식 관리] - [HTML모드] 아래의 코드를 등록한다. 이 코드는 글 작성할 때마다 넣어줘야 하므로 서식으로 등록하는 것이다. 그리고 작성한 글에 들어가 목차를 넣고 싶은 자리에 서식을 넣어주면 된다. 필자는 원래 코드대로라면 초록색 계열인 것을 회색 계열로 바꿔주었다.
<div class="book-toc">
<p data-ke-size="size16">Index</p>
<ul id="toc"></ul>
</div>
7. 결과
다음과 같이 목차가 설정됨을 알 수 있다.
2-1 목차의 글머리 기호 변경
위의 이미지처럼 까만 동그라미로 목차가 나타나는데 이것이 마음에 들지 않았다. 마음에 안 들면 바꿔야지 뭐. 별 수 있나.
1. 폰트를 다운로드하고 압축을 푼 다음, [스킨 편집] - [파일 업로드]에서 4개의 파일을 추가한다.
2. CSS 편집에서 아래의 코드를 복붙한다.
@font-face{
font-family:"Font_Awesome_5_Free";
src:url(./images/fa-solid-900.woff2) format("woff2"),
url(./images/fa-solid-900.woff) format("woff"),
url(./images/fa-solid-900.ttf) format("truetype"),
url(./images/fa-solid-900.svg#fontawesome) format("svg");
font-style:normal;
font-weight:900;
font-display: block;
}
3. 아래 사이트 (Font Awesome)에서 마음에 드는 아이콘을 찾는다. 우측 상단의 영어와 숫자 조합에 유의한다.
4. [스킨 편집] - [CSS] 편집에서 기존에 disc라고 설정된 것을 none으로 바꿔준다. li뿐만 아니라 ul 등도 동일하다.
#toc > li {
list-style-type: none;
}
5. 아래의 코드도 넣어준다.
#toc > li:before {
font-family: "Font_Awesome_5_Free";
content: "\f107";
padding-right: 10px;
color: #3d3d3d;
}
6. 지금까지의 과정은 제목1에 대한 것이므로 하위 항목에 대해서도 바꿔준다.
#toc > li > ul li:before {
font-family: "Font_Awesome_5_Free";
content: "\f105";
padding-right: 8px;
color: #5e5e5e;
}
#toc > li > ul > li > ul > li:before {
content: "\2022";
padding-right: 5px;
color: #548a25;
}
7. 원래 글머리 기호인 동그라미가 계속해서 나온다면, 아래의 코드를 CSS에 넣어주면 된다.
ul[data-ke-list-type='disc'], ul[data-ke-list-type='disc'] li, #tt-body-page ul[data-ke-list-type='disc'], #tt-body-page ul[data-ke-list-type='disc'] li {
list-style-type: none;
}22.08.06 수정
7번과 같이 수정했을 때, 본문에 있는 하위 글머리 기호가 사라지는 것을 확인했다. 글머리 기호를 본문에 쓰지 않는 블로거라면 그대로 넘어가도 무방하다. 해결 방법은 7번의 코드를 지우고, 4번 단계에서 'none'으로 지정했던 것 뒤에 '!important'를 넣는 것이다. '!important'는 나중에 쓴 코드가 적용되도록 해주는 기능을 한다.
#toc > li {
padding-left: 0;
text-indent: 0;
list-style-type: none !important;
margin-bottom: 10px;
}
8. 결과
3. 추가 기능 및 정리
3-1 부드러운 스크롤 (이동) 기능
아무것도 넣지 않은 상태에서는 클릭하면 지정 위치로 바로 순간이동을 해버린다. 부드럽게 이동하는 과정 (그래도 순식간이지만)을 넣고 싶다면 아래의 코드를 [CSS]에 넣으면 된다.
html {
scroll-behavior: smooth;
}3-2 목차 따라오기 (플로팅 목차)
이 기능 역시 아미넴님 블로그를 참조했다. 참 대단하신 분이다. 웹 언어에 대해서도 궁금하다면 해당 블로그에 가보면 도움이 될 것이다. (22.08.10 추가)
1. [HTML편집]의 <body>~</body> 사이에 아래 코드를 넣는다.
<!-- 목차 따라오기 -->
<div class="floating-toc"></div>
2. [CSS 편집]에서 아래 코드를 추가한다.
/* 목차 따라오기 */
.floating-toc {
position: absolute;
cursor: pointer;
border: 1px solid #adadac;
background: #fff;
padding: 10px;
z-index: 999;
display: none;
}
.floating-toc:after {
content:"";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #adadac;
opacity: 0.1;
z-index: -1;
}
.floating-toc p {
font-weight: bold;
font-size: 1em !important;
margin: 10px 0 10px 0;
}
.floating-toc #toc-body {
margin-top: 10px;
}
.floating-toc #toc-body #toc * {
font-size: 15px;
}
.floating-toc #toc-body #toc {
margin-left: 0;
padding-left: 20px;
}
.floating-toc #toc-body #toc > li > ul > li > a {
font-size: 0.9em;
}
.floating-toc #toc-body #toc > li > ul > li > ul > li > a {
font-size: 0.8125em;
}
.floating-toc-ani {
animation: bounce-toc 5s linear infinite;
}
@keyframes bounce-toc {
0% {
transform: scale(0.8);
}
50% {
transform: scale(0.7);
}
100% {
transform: scale(0.8);
}
}
.floating-icon:after {
font-family: "Font_Awesome_5_Free";
content: "\f03a";
font-size: 0.8125;
color: #3d3d3d;
}
3. 다시 [HTML 편집]으로 돌아가 </body> 위에 <script>~</script>를 만들어 그 안에 아래의 코드를 입력한다.
<script>
// 목차 따라오기
var safeFlag = true;
function appendToc() {
var bookToc = $('.book-toc');
var floatingToc = $('.floating-toc');
if(bookToc.length > 0 && window.scrollY > bookToc.offset().top + bookToc.innerHeight()) {
if(floatingToc.height() === 0 && bookToc.innerHeight() > 70 && safeFlag) {
safeFlag = false;
floatingToc.css('display','block');
bookToc.css('width',bookToc.width()+'px'); //목차 박스 크기에 이상 있으면 제거하세요
bookToc.css('height',bookToc.height()+'px'); //목차 박스 크기에 이상 있으면 제거하세요
var tocTitle = $('<div id="toc-title"><div class="floating-icon"></div><p>목차 <span style="opacity:0.5;">펼치기</span></p></div>');
//목차 아이콘으로 표시
if(window.innerWidth < 768) {
tocTitle.find('p').css('display','none');
} else {
tocTitle.find('.floating-icon').css('display','none');
}
floatingToc.append(tocTitle);
bookToc.css('height', bookToc.height()); //목차 박스 크기에 이상 있으면 제거하세요
var tocBody = $('<div id="toc-body" style="display:none;"></div>').append(bookToc.find('#toc'));
floatingToc.append(tocBody);
floatingToc.addClass('floating-toc-ani');
floatingToc.css('padding', '0');
$('#toc-title').css('padding', '10px');
floatingToc.css('top', "20px");
floatingToc.css('left', "20px");
floatingToc.css('position', "fixed");
// 목차 클릭
function clickTitle() {
floatingToc.css('transition', '');
var title = $('#toc-title>p>span');
if(title.text() === "펼치기") {
$('#toc-title').css('padding', '10px 0 0 0');
floatingToc.css('padding', '0px 10px 10px 10px');
floatingToc.css('opacity', '1.0');
floatingToc.removeClass('floating-toc-ani');
}
setTimeout(function(){
$('#toc-body').slideToggle(300,'linear', function() {
if(title.text() === "접기") {
floatingToc.css('transition', '');
title.text("펼치기");
floatingToc.css('padding', '0');
$('#toc-title').css('padding', '10px');
floatingToc.css('opacity', '0.5');
floatingToc.addClass('floating-toc-ani');
//목차 아이콘으로 표시
if(window.innerWidth < 768) {
tocTitle.find('p').css('display','none');
tocTitle.find('.floating-icon').css('display','block');
}
} else {
title.text("접기");
//목차 아이콘으로 표시
if(window.innerWidth < 768) {
tocTitle.find('p').css('display','block');
tocTitle.find('.floating-icon').css('display','none');
}
}
});
},200);
}
$('#toc-title').on('click', function(){
clickTitle();
});
//목차 항목 클릭
$('#toc-body').find('a').on('click', function(){
setTimeout(function(){
checkPosition();
}, 200);
});
floatingToc.css('visibility', 'hidden'); // visibility 값을 hidden으로 주어 잠시 숨김
clickTitle();
setTimeout(function(){
if($('.entry-content').offset().left < $('.floating-toc').width()+40) {
clickTitle();
}
}, 500);
setTimeout(function(){
floatingToc.css('visibility', ''); // 완전히 접힌 후 다시 보이도록 함
safeFlag = true;
}, 1100);
} else {
checkPosition();
}
} else {
$('#toc-title').off('click');
bookToc.append(floatingToc.find('#toc'));
floatingToc.find('div').remove();
floatingToc.removeAttr('style');
floatingToc.css('display','none');
$('#toc').find('a').removeAttr('style');
}
}
function checkPosition() {
var titleList = $('.entry-content').find('h2,h3,h4');
var scrollY = window.scrollY + 50;
if(titleList.length > 1) {
for(var i=0; i < titleList.length; i++) {
var tocList = $('#toc').find('a');
if(i < titleList.length-1) { //다른카테고리 글보기 플러그인을 사용하신다면 length-2로 바꿔주세요
if(titleList.eq(i).offset().top < scrollY && titleList.eq(i+1).offset().top > scrollY) {
tocList.removeAttr('style');
tocList.eq(i).css('font-weight','bold');
break;
}
} else {
if(titleList.eq(i).offset().top < scrollY) {
tocList.removeAttr('style');
tocList.eq(i).css('font-weight','bold');
break;
}
}
}
}
}
/* DOM 로드 직후 실행 */
$(document).ready(function() {
/* 스크롤 이벤트리스너 */
$(window).on('scroll', function() {
appendToc();
});
});
</script>
3-3 목차 따라오기 (Tocbot)
어느새부턴가 내 블로그에서 목차 따라오기 기능 (플로팅 목차)이 작동하지 않는다는 것을 인지하였다. 따라서 Tocboc이라는 새로운 방법을 도입하여 해결해보고자 한다(23.03.01 추가).
1. <head>~</head> 사이에 아래 코드 입력
html 편집창까지 가는 방법은 상술하여 생략하였다.
<!--TOCBOT-->
<!--Include JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.1/tocbot.min.js"></script>
<!--Include CSS-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.1/tocbot.css">
<!--TOCBOT-->
2. toc 추가
's_permalink_article_rep'을 찾아 그 아래에 다음 코드를 넣어준다.
<s_permalink_article_rep>
<div class='toc'></div>
3. Javascript 작성
</body> 위에 밑의 코드를 넣도록 하자.
<script>
// toc_bot 23.03.01 추가
var content = document.querySelector('.entry-content')
var headings = content.querySelectorAll('h1, h2, h3, h4, h5, h6, h7')
var headingMap = {}
Array.prototype.forEach.call(headings, function (heading) {
var id = heading.id ? heading.id : heading.textContent.trim().toLowerCase()
.split(' ').join('-').replace(/[\!\@\#\$\%\^\&\*\(\):]/ig, '')
headingMap[id] = !isNaN(headingMap[id]) ? ++headingMap[id] : 0
if (headingMap[id]) {
heading.id = id + '-' + headingMap[id]
} else {
heading.id = id
}
})
tocbot.init({
tocSelector: '.toc',
contentSelector: '.entry-content',
headingSelector:'h1, h2, h3',
hasInnerContainers: false
});
$(document).ready(function(){
$('.toc').addClass('toc-absolute');
var toc_top = $('.toc').offset().top - 165;
$(window).scroll(function() {
if ($(this).scrollTop() >= toc_top) {
$('.toc').addClass('toc-fixed');
$('.toc').removeClass('toc-absolute');
} else {
$('.toc').addClass('toc-absolute');
$('.toc').removeClass('toc-fixed');
}
});
});
</script>
</body>
4. CSS 추가
HTML 탭 우측의 CSS로 넘어가 아래의 코드를 입력한다.
/* tocbot */
.toc-absolute {
position: absolute;
margin-top:165px;
}
.toc-fixed {
position: fixed;
top: 165px;
}
.toc {
right: calc((100% - 850px) / 2 - 300px);
width: 250px;
padding: 10px;
box-sizing: border-box;
}
.toc-list {
margin-top: 10px !important;
font-size: 0.9em;
}
.toc > .toc-list li {
margin-bottom: 10px;
}
.toc > .toc-list li:last-child {
margin-bottom: 0;
}
.toc > .toc-list li a {
text-decoration: none;
}
5. 결과 화면
구현은 되지만, 끄트머리가 잘리는 현상이 발생한다. 또 h3 (제목3)은 나오지 않는다는 것을 확인하였다. 참고 사이트는 다음과 같다.
3-4 전체코드
마지막으로 지금까지 [스킨 편집] 탭에서 추가한 전체 코드를 올려줄 테니 어떤 차이가 있는지, 어떤 부분을 수정하면 내 마음에 들지 확인하는데 도움이 되길 바란다. 코드 접기 기능 (토글)이 있으면 좋을텐데... 공간을 너무 많이 차지하는 느낌이 들어 txt 파일로 업로드하겠다.
[code_220810]
[code_230301]
[파일 업로드]
다시 한 번, 도와주신 아미넴님에게 깊은 감사를 드린다. 상기 내용을 보고도 이해가 안되는 부분이 있다면, 원작자의 블로그를 가보길 권장한다. 또, 앞으로 수정사항이 있을 시, 일자와 내용을 표시하도록 하겠다.
▣ 문제 및 수정사항
1. 본문에 적용된 글머리 기호가 무시되는 문제 수정 (22.08.06)
2. 모바일로 확인 시, 1번 방법은 제대로 표시되지만 이동이 안되고, 2번 방법은 index만 표시됨 (22.08.06)
3. 본문 글머리 기호 2단계 이후 검은 동그라미만 적용되는 문제 (22.08.06)
4. 목차 따라오기 기능 추가 (22.08.10)
1) 플로팅 목차가 구현되지 않는 현상 발견 (23.02.17) ☞ tocbot으로 구현 (23.03.01)
'블로그 운영' 카테고리의 다른 글
| [네이버 블로그] 홈페이지형 블로그 만드는 법 (0) | 2024.04.11 |
|---|---|
| 티스토리 블로그 마우스 커서 효과 및 아이콘 설정 (0) | 2022.08.12 |
| 티스토리 블로그 우클릭, 드래그 방지 및 부분 허용 (0) | 2022.08.07 |
