목차 만들기

 <div style="max-width: 800px; margin: 0 auto;">

<style>

  .toc-container { border: 1px solid #ddd; background: #f9f9f9; padding: 15px; border-radius: 6px; margin: 20px 0; }

  .toc-container summary { cursor: pointer; font-weight: bold; font-size: 22px; outline: none; text-align: center; }

  .toc-list { list-style: none !important; padding: 0 !important; margin: 15px 0 0 0 !important; }

  .toc-list li { margin-bottom: 8px; }

  .toc-list a { color: #007bff; text-decoration: none; }

  .toc-list a:hover { text-decoration: underline; }

</style>

<details class="toc-container">

  <summary>🔍 목차 보기 (클릭하여 펼치기)</summary>

  <div id="toc-view"></div>

</details>

<script>

(function() {

  document.addEventListener("DOMContentLoaded", function() {

    const view = document.getElementById("toc-view");

    // 본문의 모든 h2 태그를 수집합니다.

    const tags = document.querySelectorAll("h2");

    

    if (tags.length > 0) {

      const ul = document.createElement("ul");

      ul.className = "toc-list";

      tags.forEach((el, i) => {

        const id = "toc-h2-" + i;

        el.setAttribute("id", id); // 이동을 위한 ID 부여

        const li = document.createElement("li");

        li.innerHTML = `<a href="#${id}">${el.textContent}</a>`;

        ul.appendChild(li);

      });

      view.appendChild(ul);

    } else {

      document.querySelector(".toc-container").style.display = "none";

    }

  });

})();

</script>

</div>