[자동목차] 목차만들기 과정

by

블로그스팟 자동 목차 만들기: 완벽한 가이드

블로그 글의 길이가 길어지면 독자들이 원하는 내용을 쉽게 찾을 수 있도록 돕는 자동 목차가 매우 유용합니다. 이번 가이드에서는 블로그스팟(Blogger)에서 자동 목차를 만드는 방법을 단계별로 자세히 설명하겠습니다. 이 가이드를 따르면, 포스트의 제목과 소제목들을 기반으로 자동으로 목차를 생성할 수 있으며, 이를 세련된 디자인으로 꾸밀 수 있습니다.

1. 블로그스팟 관리자 모드로 이동

먼저, 블로그스팟 관리자 모드로 로그인해야 합니다.

  1. 블로그스팟에 로그인합니다.
  2. 좌측 메뉴에서 **테마(Theme)**를 클릭합니다.
  3. 테마 화면 하단에서 HTML 편집(Edit HTML) 버튼을 클릭합니다.

2. HTML 편집기에서 목차 위치 지정

목차가 삽입될 위치를 지정하기 위해 HTML 코드를 수정해야 합니다.

  1. HTML 편집기가 열리면, 블로그 포스트가 표시되는 <data:post.body/> 태그를 찾습니다.
  2. 이 태그 바로 위에 목차가 표시될 위치를 지정하기 위한 div 요소를 추가합니다. 
  3. 예: html코드
<div id=”table-of-contents”></div>
<data:post.body/>
이렇게 하면 목차가 본문 상단에 삽입됩니다.   이말은 <data:post.body/>를 ctrl-f로 찾아서 그위에  <div id=”table-of-contents”></div>를 추가하라는 말입니다.  어렵조!!!

3. 세련된 목차를 위한 CSS 코드 추가

 

목차의 스타일을 지정하기 위해 CSS 코드를 추가합니다.

  1. HTML 편집기 내에서 <head> 태그 안에 다음 CSS 코드를 추가합니다:

<style>
#table-of-contents {
    border: 1px solid #e0e0e0;
    padding: 15px;
    margin-bottom: 20px;
    background-color: #f9f2ec;
    border-radius: 8px;
    font-family: Arial, sans-serif;
    position: relative;
}
#table-of-contents h2 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    padding-left: 30px;
    position: relative;
}
#table-of-contents h2::before {
    content: “f0c9”;
    font-family: FontAwesome;
    position: absolute;
    left: 10px;
    top: 0;
    font-size: 18px;
}
#table-of-contents ul {
    list-style-type: none;
    padding-left: 0;
}
#table-of-contents li {
    margin: 8px 0;
}
#table-of-contents a {
    text-decoration: none;
    color: #0066cc;
    font-weight: normal;
    transition: color 0.3s ease;
}
#table-of-contents a:hover {
    text-decoration: underline;
    color: #004499;
}
#table-of-contents .collapse-button {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}
#table-of-contents.collapsed ul {
    display: none;
}
#table-of-contents.collapsed h2::after {
    content: “f0d7”;
    font-family: FontAwesome;
    position: absolute;
    right: 10px;
}
#table-of-contents h2::after {
    content: “f0d8”;
    font-family: FontAwesome;
    position: absolute;
    right: 10px;
}
</style>

이 CSS 코드는 목차에 부드러운 배경색, 경계선, 글꼴, 패딩, 텍스트 색상, 마우스 오버 시의 스타일링을 추가합니다. 또한 접기/펼치기 아이콘도 포함됩니다.

4. JavaScript 코드 추가

 

목차를 자동으로 생성하고 접기/펼치기 기능을 구현하기 위해 JavaScript 코드를 추가합니다.

  1. HTML 편집기 내에서 </body> 태그 바로 위에 다음 JavaScript 코드를 추가합니다:

<script>
document.addEventListener(“DOMContentLoaded”, function() {
    var toc = document.getElementById(“table-of-contents”);
    if (!toc || toc.querySelector(“ul”)) return; // 목차가 이미 생성된 경우 추가하지 않음
    // 본문 영역에서만 H1, H2, H3 태그 선택
    var contentArea = document.querySelector(“.post-body”); // 본문의 클래스나 ID 지정
    if (!contentArea) return;
    var headers = contentArea.querySelectorAll(“h1, h2, h3”);
    if (headers.length === 0) return;
    // 목차 타이틀이 없을 경우에만 추가
    if (!toc.querySelector(“h2”)) {
        var tocTitle = document.createElement(“h2”);
        tocTitle.textContent = “목차”;
        toc.appendChild(tocTitle);
    }
    var ul = document.createElement(“ul”);
    headers.forEach(function(header, index) {
        // 목차 항목에 중복된 내용이 포함되지 않도록 확인
        if (header.textContent.trim() !== “목차”) {
            var li = document.createElement(“li”);
            var a = document.createElement(“a”);
            var id = “toc-header-” + index;
            header.id = id;
            a.href = “#” + id;
            a.textContent = header.textContent;
            li.appendChild(a);
            ul.appendChild(li);
        }
    });
    toc.appendChild(ul);
    // Collapse/Expand functionality
    var collapseButton = document.createElement(“span”);
    collapseButton.className = “collapse-button”;
    collapseButton.innerHTML = “&#x25BC;”; // Down arrow symbol
    toc.appendChild(collapseButton);
    collapseButton.addEventListener(“click”, function() {
        toc.classList.toggle(“collapsed”);
    });
});
</script>

코드 설명

 
  • 목차 중복 생성 방지: 이미 목차가 생성된 경우 중복 생성되지 않도록 코드를 구성했습니다.
  • 목차 타이틀 중복 방지: 목차 타이틀이 이미 존재할 경우 추가하지 않도록 조건을 설정했습니다.
  • 본문 내 헤더만 선택: 블로그의 본문 영역 내에서만 h1, h2, h3 태그를 선택해 목차를 생성합니다.
  • 중복 항목 제거: “목차”라는 단어가 헤더로 잡혀서 다시 목차에 추가되지 않도록 필터링했습니다.
  • 접기/펼치기 기능: 목차를 접고 펼칠 수 있는 기능을 추가하여, 목차가 더 깔끔하고 사용하기 쉽게 구현되었습니다.

5. 저장 및 테스트

 

모든 코드를 추가하고 나면, 저장 버튼을 클릭하여 변경 사항을 저장합니다. 블로그 포스트를 열어 자동 목차가 올바르게 표시되고, 접기/펼치기 기능이 정상적으로 작동하는지 확인합니다.

이제 블로그스팟에서 자동 목차가 성공적으로 작동하며, 세련된 디자인과 더불어 접기/펼치기 기능도 사용할 수 있습니다. 이 가이드를 통해 방문자들이 블로그 글을 더 쉽게 탐색할 수 있게 되었을 것입니다. 목차가 제대로 표시되는지 확인하고, 필요에 따라 스타일과 기능을 추가로 조정할 수 있습니다.  여러분의 성공적인 블로깅을 응원합니다. 언제나 메섹톡이었습니다. 감사합니다.

첨부파일은

위의 css, 자바스크립트코드입니다.

1)css

https://drive.google.com/file/d/1e83W25VABDKn4xK4fVgAeI2ERzF-rp9d/view?usp=drive_link

2)script

https://drive.google.com/file/d/1flFTMNeDqMunj5iWurXL5tpwF3LaxIFd/view?usp=drive_link

새로운 버전::html5구현

티스토리 블로그에서 사용할 수 있는 자동 목차를 HTML5와 JavaScript를 활용해 생성하는 코드를 아래에 제공하겠습니다. 이 코드는 블로그 포스트의 <h2> 태그를 기반으로 목차를 자동으로 생성하며, 클릭 시 해당 섹션으로 부드럽게 스크롤하는 기능을 포함합니다. 티스토리에서는 HTML 편집 모드를 통해 이 코드를 삽입할 수 있습니다.

자동 목차 HTML5 코드

html
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>티스토리 자동 목차 예제</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
            background-color: #f9f9f9;
        }
        .container {
            max-width: 900px;
            margin: 0 auto;
            background: #fff;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        h1, h2 {
            color: #333;
        }
        h1 {
            font-size: 2.5em;
            border-bottom: 2px solid #007BFF;
            padding-bottom: 10px;
        }
        h2 {
            font-size: 1.8em;
            margin-top: 30px;
        }
        p {
            color: #555;
        }
        /* 목차 스타일 */
        #toc {
            background: #f0f4f8;
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 20px;
            border-left: 4px solid #007BFF;
        }
        #toc h2 {
            font-size: 1.5em;
            margin-top: 0;
            margin-bottom: 10px;
        }
        #toc ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        #toc li {
            margin-bottom: 8px;
        }
        #toc a {
            color: #007BFF;
            text-decoration: none;
            transition: color 0.3s;
        }
        #toc a:hover {
            color: #0056b3;
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>블로거를 위한 종합 가이드: 애드센스와 제휴마케팅 도구로 지속 가능한 수익 창출하기</h1>

        <!-- 목차가 삽입될 위치 -->
        <div id="toc">
            <h2>목차</h2>
            <ul id="toc-list"></ul>
        </div>

        <!-- 콘텐츠 예시 -->
        <h2 id="section1">1. 서론: 블로깅과 수익 창출의 미래</h2>
        <p>블로깅은 단순한 취미에서 수익성 있는 비즈니스로 진화했습니다. 2024년 현재, 블로그를 통한 수익 창출은 더욱 다양화되고 정교해졌습니다...</p>

        <h2 id="section2">2. 구글 애드센스: 기본부터 고급 전략까지</h2>
        <p>구글 애드센스는 많은 블로거들이 처음 접하는 수익화 도구입니다. 기본적인 설정부터 시작해 보겠습니다...</p>

        <h2 id="section3">3. 8가지 제휴마케팅 도구 소개 및 활용법</h2>
        <p>제휴마케팅 도구를 활용하면 수익원을 다각화하고 더 높은 수익을 기대할 수 있습니다...</p>

        <h2 id="section4">4. 통합 전략: 애드센스와 제휴마케팅의 시너지 효과</h2>
        <p>애드센스와 제휴마케팅을 효과적으로 조합하면 수익을 극대화할 수 있습니다...</p>

        <h2 id="section5">5. 지속 가능한 수익을 위한 콘텐츠 전략</h2>
        <p>장기적인 성공을 위해서는 고품질 콘텐츠 제작이 핵심입니다...</p>

        <h2 id="section6">6. 데이터 기반의 성과 분석과 최적화</h2>
        <p>지속적인 성장을 위해서는 데이터 분석이 필수적입니다...</p>

        <h2 id="section7">7. 법적, 윤리적 고려사항</h2>
        <p>수익 창출 과정에서 법적, 윤리적 문제를 간과해서는 안 됩니다...</p>

        <h2 id="section8">8. 결론: 장기적 성공을 위한 로드맵</h2>
        <p>지속 가능한 블로그 수익화를 위한 로드맵을 제시하며 글을 마무리하겠습니다...</p>
    </div>

    <!-- JavaScript로 목차 자동 생성 -->
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const tocList = document.getElementById('toc-list');
            const headings = document.querySelectorAll('h2');

            headings.forEach((heading, index) => {
                // h2 태그에 id가 없으면 자동으로 추가
                if (!heading.id) {
                    heading.id = `section${index + 1}`;
                }

                // 목차 항목 생성
                const li = document.createElement('li');
                const a = document.createElement('a');
                a.textContent = heading.textContent;
                a.href = `#${heading.id}`;
                
                // 부드러운 스크롤 기능 추가
                a.addEventListener('click', function (e) {
                    e.preventDefault();
                    const target = document.querySelector(this.getAttribute('href'));
                    target.scrollIntoView({ behavior: 'smooth' });
                });

                li.appendChild(a);
                tocList.appendChild(li);
            });

            // 목차가 비어 있으면 목차 섹션 숨기기
            if (tocList.children.length === 0) {
                document.getElementById('toc').style.display = 'none';
            }
        });
    </script>
</body>
</html>

사용 방법 (티스토리에서 적용하기)

  1. 티스토리 글 작성 모드 진입:
    • 티스토리 관리자 페이지에서 새 글을 작성하거나 기존 글을 편집합니다.
    • 글 작성 화면에서 “HTML” 탭으로 전환합니다.
  2. 코드 삽입:
    • 위 코드에서 <div id=”toc”>와 <script> 부분을 복사하여 글의 원하는 위치(보통 본문 상단)에 삽입합니다.
    • 예를 들어, 본문 상단에 목차를 추가하려면 다음과 같이 삽입합니다:
      html
      <div id="toc">
    <h2>목차</h2>
    <ul id="toc-list"></ul>
</div>
      그리고 글의 맨 마지막에 <script> 태그를 추가합니다:
      html
      <script>
    document.addEventListener('DOMContentLoaded', function () {
        const tocList = document.getElementById('toc-list');
        const headings = document.querySelectorAll('h2');

        headings.forEach((heading, index) => {
            if (!heading.id) {
                heading.id = `section${index + 1}`;
            }
            const li = document.createElement('li');
            const a = document.createElement('a');
            a.textContent = heading.textContent;
            a.href = `#${heading.id}`;
            a.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                target.scrollIntoView({ behavior: 'smooth' });
            });
            li.appendChild(a);
            tocList.appendChild(li);
        });

        if (tocList.children.length === 0) {
            document.getElementById('toc').style.display = 'none';
        }
    });
</script>
  3. 본문 작성:
    • 본문은 일반적으로 작성하되, 목차에 포함될 제목은 <h2> 태그를 사용하세요. 예를 들어:
      html
      <h2>1. 서론: 블로깅과 수익 창출의 미래</h2>
<p>블로깅은 단순한 취미에서 수익성 있는 비즈니스로 진화했습니다...</p>
  4. 스타일링 추가 (선택):
    • 위 코드의 <style> 부분을 복사하여 티스토리의 “스킨 편집” > “HTML 편집” > <head> 태그 안에 삽입하면 목차의 스타일을 커스터마이징할 수 있습니다.
    • 또는 티스토리 글 작성 HTML에 직접 <style> 태그를 추가해도 됩니다.
  5. 저장 및 확인:
    • 글을 저장하고 미리보기를 통해 목차가 제대로 생성되었는지 확인하세요.
    • 목차 항목을 클릭하면 해당 섹션으로 부드럽게 스크롤됩니다.

코드 설명

  • HTML5 구조:
    • <div id=”toc”>는 목차가 표시될 위치를 정의합니다.
    • <ul id=”toc-list”>는 JavaScript로 동적으로 생성된 목차 항목이 삽입될 리스트입니다.
  • CSS 스타일:
    • 목차는 #toc 스타일로 배경색, 패딩, 테두리 등을 적용해 시각적으로 구분했습니다.
    • 링크는 파란색으로 표시되며, 호버 시 색상 변화와 밑줄 효과를 추가했습니다.
  • JavaScript:
    • DOMContentLoaded 이벤트로 페이지 로드 후 실행되도록 설정했습니다.
    • <h2> 태그를 찾아 각 제목에 고유한 id를 부여하고, 이를 기반으로 목차 항목을 생성합니다.
    • scrollIntoView 메서드를 사용해 부드러운 스크롤 효과를 구현했습니다.
    • 목차가 비어 있을 경우 #toc 섹션을 숨기는 기능도 추가했습니다.

주의사항

  • 티스토리 정책 준수:
    • 티스토리는 JavaScript 사용에 제한이 있을 수 있으므로, 스크립트가 제대로 작동하는지 확인하세요. 일부 스킨에서는 JavaScript가 비활성화될 수 있습니다.
    • 문제가 발생하면 티스토리 고객센터에 문의하거나, 스킨 설정에서 JavaScript 허용 여부를 확인하세요.
  • SEO 고려:
    • 목차는 사용자 경험(UX)을 개선하여 체류 시간을 늘리고 이탈률을 줄이는 데 기여하므로 SEO에 긍정적인 영향을 미칩니다.
    • <h2> 태그를 적절히 사용해 콘텐츠 구조를 명확히 하면 검색엔진이 콘텐츠를 더 잘 이해할 수 있습니다.
  • 커스터마이징:
    • 목차 스타일을 변경하려면 <style> 태그 내의 #toc, #toc ul, #toc a 등의 스타일을 수정하세요.
    • <h3> 태그까지 목차에 포함하고 싶다면 JavaScript에서 querySelectorAll(‘h2’)를 querySelectorAll(‘h2, h3’)로 변경하면 됩니다.

Leave a Comment