티스토리에서 자동 목차 만드는 법 : 목차 스크립트

티스토리를 운영하면서 글이 길어질 경우, 독자가 원하는 내용을 빠르게 찾을 수 있도록 목차를 제공하는 것이 좋습니다. 티스토리에서는 기본적으로 자동 목차 기능을 지원하지 않지만, HTML과 CSS, JavaScript를 활용하면 쉽게 자동 목차를 생성할 수 있습니다. 이번 글에서는 티스토리에서 자동 목차를 만드는 방법을 단계별로 설명하겠습니다.

1. 자동 목차의 필요성

• 독자가 원하는 내용을 쉽게 찾을 수 있음
• 글의 가독성이 향상됨
• SEO(검색 엔진 최적화)에 유리함

2. 자동 목차를 추가하는 방법

자동 목차를 만들기 위해 HTML 구조를 설정하고, CSS로 스타일을 지정한 후, JavaScript를 활용하여 자동으로 목차를 생성하는 방식으로 진행됩니다.

2.1 HTML 구조 설정

먼저, 자동 목차가 들어갈 위치에 <div> 태그를 추가합니다.

<div id="table-of-contents"></div>

이제 본문 내용을 작성할 때, 제목 태그(<h2>, <h3> 등)를 활용해야 합니다. 예를 들어:

<h2>첫 번째 섹션</h2>
<p>내용...</p>

<h2>두 번째 섹션</h2>
<p>내용...</p>

<h3>세부 내용</h3>
<p>내용...</p>

2.2 CSS로 목차 스타일 지정

목차를 보기 좋게 꾸미기 위해 다음과 같은 CSS를 추가합니다.

#table-of-contents {
    background: #f9f9f9;
    padding: 10px;
    border: 1px solid #ddd;
    margin-bottom: 20px;
}
#table-of-contents ul {
    list-style: none;
    padding-left: 0;
}
#table-of-contents li {
    margin: 5px 0;
}
#table-of-contents a {
    text-decoration: none;
    color: #333;
}
#table-of-contents a:hover {
    text-decoration: underline;
}

2.3 JavaScript로 자동 목차 생성하기

다음으로, JavaScript를 활용하여 자동으로 목차를 생성하는 기능을 추가합니다. 이 코드를 티스토리 HTML 편집 > 스킨 편집 > 추가 스크립트 부분에 추가하세요.

document.addEventListener("DOMContentLoaded", function() {
    var toc = document.getElementById("table-of-contents");
    var headers = document.querySelectorAll("h2");
    var tocList = document.createElement("ul");
    
    headers.forEach(function(header, index) {
        var anchor = "section-" + index;
        header.setAttribute("id", anchor);
        
        var listItem = document.createElement("li");
        var link = document.createElement("a");
        link.setAttribute("href", "#" + anchor);
        link.textContent = header.textContent;
        
        listItem.appendChild(link);
        tocList.appendChild(listItem);
    });
    
    toc.appendChild(tocList);
});

3. 적용 및 테스트

이제 위의 코드를 적용한 후 블로그 글을 작성해 보면, 자동으로 목차가 생성되는 것을 확인할 수 있습니다. 목차를 클릭하면 해당 섹션으로 스크롤됩니다.

4. 마무리

자동 목차를 추가하면 독자가 더욱 편리하게 글을 읽을 수 있으며, SEO에도 긍정적인 영향을 줄 수 있습니다. 위 방법을 따라 적용해 보고, 필요에 따라 스타일을 조정하여 더욱 효과적인 목차를 만들어 보세요!