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

Byprofdamesek

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

블로그 글의 길이가 길어지면 독자들이 원하는 내용을 쉽게 찾을 수 있도록 돕는 자동 목차가 매우 유용합니다. 이번 가이드에서는 블로그스팟(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’)로 변경하면 됩니다.

Similar Posts

  • [SEO-AI]워드프레스 홈페이지, AI로 단 5분 만에 완성하기! 🚀

    Byprofdamesek

    워드프레스 홈페이지, AI로 단 5분 만에 완성하기! 🚀 워드프레스 홈페이지, AI로 단 5분 만에 완성하기! 🚀 요즘 AI 기술이 빠르게 발전하면서, 이제는 워드프레스를 활용해 AI가 자동으로 홈페이지를 만들어주는 시대가 되었습니다. 이번 글에서는 워드프레스에서 AI를 활용해 쉽고 빠르게 홈페이지를 제작하는 방법을 소개해 드릴게요. ✔️ 준비물:✅ 워드프레스 설치 (무료 가능), hostinger이용하기✅ Astra 테마 + ZipWP 활용, 테마는 역시나…

  • 국민연금 키워드로 글쓰기a to z

    Byprofdamesek

    국민연금 키워드로 글쓰기 a to z 검색하기:: 국민연금-이라는 주제로 다음 플랫폼에서 검색을 한다. 이유는 국민연금 키워드에 가장 알맞는 곳이 티스토리일거라는 생각에서다. 물론 가장 선호하는 연령층은 50-60대가 아닐까? 이글은 블로그스팟에 올리지만 실제 ‘국민연금 납무액 및 수령금 확인하기’글은 티스토리에 올릴 것이다. 2. 분석하기:: 다음에서 국민연금을 찾아보왔다. 주 키워드와 관련 키워드가 나타난다. 그리고 추천 검색어도 보인다. 무엇을 선택할까? …

  • 끌리는 이야기의 마법: 플롯과 결말은 어떻게 설계되는가?

    Byprofdamesek

    끌리는 이야기의 마법: 플롯과 결말은 어떻게 설계되는가? – 이야기의 ‘움직임’과 ‘감정의 클라이맥스’를 만드는 핵심 🎯 이야기의 본격적인 시작은 ‘고군분투’부터다 우리가 이야기에서 가장 몰입하는 순간은 언제일까요?바로 주인공이 장애물과 맞서 싸우는 장면들입니다.리비 호커는 이를 “플롯(Plot)” 혹은 “고군분투(Struggle)”라고 정의합니다.이 플롯이야말로 이야기에 속도와 방향, 긴장감을 불어넣는 핵심이죠. 플롯은 사건이 아니라, “주인공이 목표를 향해 어떻게 움직이느냐”의 연속입니다. 🧭 플롯 설계의…

  • [2/3강]강의자료-나만의 gpts

    Byprofdamesek

    [2/3강]강의자료-나만의 gpts 이렇게 만들어진 만들어진 글을 리스 버전으로 작성하는 글쓰기 마스터로 하려고 하면 어떤 절차를 가질까? 좋은 방향이에요! “GTS 구조”처럼 논리적 흐름을 따르는 리스(LIST) 기반 글쓰기 마스터를 만들고 싶다면, 다음과 같은 절차로 정리할 수 있어요: ✅ 1단계: 글쓰기 구조 정의하기 먼저, ‘LIST 글쓰기’가 어떤 구조인지 정의해야 해요. 예를 들어: 또는 단순하게: 🛠️ 2단계: GPT 행동…

  • 1. 기획은 왜 필요한가?

    Byprofdamesek

    1. 기획은 왜 필요한가? 영화 기획의 중요성: 성공적인 영화 제작의 첫걸음 영화는 단순한 예술 작품이 아니라, 시대를 반영하는 문화적 산물이자 대중과 소통하는 강력한 매체입니다. 하지만 한 편의 영화가 관객과 만나기까지는 수많은 과정과 치밀한 준비가 필요합니다. 그 중심에 바로 기획이 있습니다. 영화 기획은 단순히 아이디어를 구체화하는 단계를 넘어, 영화의 성공 여부를 좌우하는 핵심적인 역할을 합니다. 이번…

  • Rank Math로 HowTo 스키마 삽입하기

    Byprofdamesek

    Rank Math로 HowTo 스키마 삽입하기 ✅ 제목(H1): 🛠️ “Rank Math로 HowTo 스키마 삽입하기 – 검색 결과에 단계별 가이드 노출하는 법” ✅ 서론 (Intro) 블로그에 단계별 튜토리얼을 작성했다면, 구글에 해당 내용을 HowTo 스키마로 알려주세요!이 스키마는 검색 결과에 ‘순서 있는 가이드’로 노출되며, **CTR(클릭률)**을 높여주는 강력한 SEO 전략입니다. 이번 글에서는 Rank Math로 HowTo 스키마를 삽입하고, 구글에 제대로 반영되도록…

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다