블로그 자동 목차 만들기 : 단계별 가이드

블로그를 운영하면서 많은 분들이 자동 목차을 만들고 싶어 하시는데요, 그 이유는 독자들에게 더 나은 사용자 경험을 제공하고, 블로그의 가독성을 높이기 위해서입니다. 그럼, 어떻게 자동 목록을 만들 수 있는지 단계별로 알아보도록 하겠습니다.

자동 목차 설정 방법

자동 목차 생성을 위해서는 블로그스팟의 HTML 편집 기능을 사용할 줄 알아야 합니다.

블로그 관리 페이지에 로그인합니다.
왼쪽 메뉴에서 '테마'를 클릭합니다.
'내 테마 맞춤설정' 버튼을 클릭한 후 'HTML 편집'을 선택합니다.
준비된 CSS 코드를 추가합니다.
준비된 javascript 코드를 <head>와 </head> 사이에 추가합니다.
글쓰기로 돌아와 준비된 HTML코드를 입력합니다.

Javascript, CSS 및 HTML 예시

준비된 코드가 없다면 예시로 보여드리는 코드를 사용하셔도 됩니다.

Javascript 예시

<script type='text/javascript'>
    //<![CDATA[
    //*************Table of Content (TOC) plugin by anantvijaysoni.in
    function avsTOC() {
        var avsTOC = i = headlength = gethead = 0;
        var currentH2 = null; // 현재 처리 중인 h2 요소를 저장하기 위한 변수

        // h2와 h3 요소 처리
        var headings = document.querySelectorAll("#post-toc h2, #post-toc h3"); // h2와 h3 요소 선택
        var tocHTML = ""; // 목차의 HTML을 저장할 변수

        for (i = 0; i < headings.length; i++) {
            gethead = headings[i].textContent;

            if (headings[i].tagName === "H2") {
                // 새로운 h2 요소를 만난 경우
                if (currentH2 !== null) {
                    tocHTML += "</ul>"; // 이전 h2의 하위 목차 종료
                }
                currentH2 = headings[i];
                currentH2.setAttribute("id", "point" + i);
                tocHTML += "<li><a href='#point" + i + "'>" + gethead + "</a><ul>"; // h2 아래에 하위 목차 시작
            } else if (headings[i].tagName === "H3" && currentH2 !== null) {
                // h3 요소를 만나고, 현재 처리 중인 h2가 존재하는 경우
                headings[i].setAttribute("id", "subpoint" + i);
                tocHTML += "<li><a href='#subpoint" + i + "'>" + gethead + "</a></li>";
            }
        }

        if (currentH2 !== null) {
            tocHTML += "</ul>"; // 마지막 h2의 하위 목차 종료
        }

        document.getElementById("avsTOC").innerHTML = tocHTML;
    }

    function avsToggle() {
        var avs = document.getElementById('avsTOC');
        if (avs.style.display === 'none') {
            avs.style.display = 'block';
        } else {
            avs.style.display = 'none';
        }
    }

    // TOC 초기화
    window.onload = avsTOC;
    //]]>
</script>

CSS 예시

/* 자동 목차 생성 */
.avsTOC{
border: 1px solid rgba(133 , 133, 133, 0.33);
font-weight:500;
border-radius:0.55rem;
line-height:0.8rem;
margin:15px auto;
margin-top:0px;
padding:10px 30px 25px 10px;
display: inline-block;
width: auto;
min-width: 200px;
max-width: 600px;
transition: box-shadow 0.25s linear;
box-shadow: 0px 0px 3px rgba(0, 0, 2, 0.1);
    &:hover {
        box-shadow: 0px 1px 6px rgba(0, 0, 4, 0.5);
    }
}
.avsTOC li:first-child {
    padding-top: 20px;
}
.avsTOC ul li:first-child {
padding-top:17.5px;
}

.avsTOC ol,.avsTOC ul {margin:0;padding:0;}
.avsTOC ul {list-style:none;}
.avsTOC ol li,.avsTOC ul li {
padding:15px 0 0;
margin:0 0 0 30px;
font-size:0.9rem;
}


.avsTOC ul li {
	font-size:0.8rem;
    margin: 0 0 0 13px;
}

.avsTOC ul li:last-child {
  padding:15px 0 7.5px;
}

.avsTOC a{text-decoration:none;}
.avsTOC a:hover{
text-decoration:underline; 
font-weight:600;
}

.avsTOC button{

font-size:0.9rem;
background-color:#fff;
position:relative;
outline:none;cursor:pointer; border:none;
padding:0 0 0 8px;
font-weight:600;
}
/* END 자동 목차 생성 */

HTML 예시

<div class="avsTOC"><ol id="avsTOC"></ol></div><br />
이 위치에 제목 및 글을 작성합니다.
<script>avsTOC();</script>

자동 목차 생성 팁

목차 생성을 위해서는 H2, H3 태그가 들어간 HTML 포스팅을 작성해야 합니다.
H1 태그가 중복으로 들어가면 SEO에 문제가 생길 수 있기 때문에 자동 목차를 만들때 H1 태그는 사용하지 마세요.
작성된 코드는 글 템플릿에 저장해두면 새글을 작성하실때 목차를 편하게 쓰실 수 있습니다.

요약 및 정리

자동 목차는 긴 글에서 독자들이 원하는 정보를 쉽게 찾을 수 있도록 도와주며, 사용자 경험을 향상시키는 중요한 요소입니다. 목차 위치는 일반적으로 글의 상단에 배치하는 것이 좋습니다. 이렇게 하면 독자들이 글을 읽기 전에 목차를 확인하고, 원하는 정보를 쉽게 찾을 수 있습니다. HTML 코드를 통해 간단하게 추가할 수 있고, 간단하고 깔끔한 디자인이 좋으며, 사용자가 쉽게 인식할 수 있도록 해야 합니다.

블로그 목차 자동으로 만들기