7단계 초보 중년 블로거들의 궁금증 해소; 목차 만들기

“블로그를 시작했는데 왜 내 글엔 목차가 안 생기지?” “남들 글엔 뭔가 정리된 게 있는데 내 블로그는 허전해 보여요…”

안녕하세요! 블로그를 시작하고 나면 누구나 한 번쯤 겪게 되는 궁금증이 바로 ‘목차’입니다. 나도 목차를 만들고 싶다는 생각을 하게되죠 그래서 오늘도 역시 우리 중년 초보 블로거분들을 위해 준비했어요. 천천히 끝까지 함께 해 주세요 😊


1

목차는 블로그 포스팅에 필요한가?

  • 방문자가 원하는 정보를 빠르게 찾을 수 있어요

    긴 글일수록 스크롤하다가 지치기 쉬워요. 목차가 있으면 필요한 정보만 콕 찍어 바로 이동할 수 있어요.

  • 블로그 글이 정돈돼 보이고 신뢰감이 생깁니다

    아무리 좋은 글도 구조가 없으면 흐트러져 보여요. 목차 하나만 넣어도 글이 딱 정리된 느낌이 들죠.

  • 글을 다시 찾아보기도 편해요

    나중에 내가 쓴 글을 다시 확인할 때도, 목차가 있으면 꼭 필요한 부분만 바로 찾아 들어갈 수 있어요.

  • 모바일에서도 보기 좋고 편리해요

    접히는 목차는 화면을 덜 차지하고, 클릭 한 번으로 이동되니까 모바일 환경에 딱 맞아요.

  • 이 정도는 만들어줘야 우리도 블로거라고 할 수 있겠죠? 😉

    작은 디테일 하나가 블로그의 완성도를 높여줍니다. 목차, 이제 어렵게만 느끼지 마세요!

2

목차를 만드는 기본 원리부터 배워볼게요

📝 메모

이제 목차를 만드는 원리를 이해해볼 거예요. 겉으로 보이기만 멋진 게 아니라, 그 안에 작동하는 원리가 숨어 있답니다.

목차는 그냥 글 위에 자동으로 ‘생기는 것’처럼 보이지만, 사실은 두 가지 요소가 있어야 작동해요.

① 제목 태그 (h2, h3)
블로그 글 안에서 각 소제목을 <h2> 또는 <h3> 태그로 작성하면 이 태그들을 ‘목차 후보 항목’으로 인식해요. 목차는 이 구조를 읽어 자동으로 목록을 만듭니다.

② 목차 스크립트 (코드)
아무리 제목 태그를 잘 써도, 그걸 읽어서 목차로 보여주는 스크립트 코드가 있어야 화면에 ‘목차’가 실제로 보이게 됩니다.

즉, 목차 = 제목 태그 + 작동 코드
이 두 가지가 만나야 우리가 알고 있는 깔끔한 블로그 목차가 만들어지는 거예요 😊 다음 단계에서는 이제 직접 어떻게 만드는지 알려드릴게요!

3

목차 소스와스크립트 활용해서 만들기

  • 목차:html+JavaScript

    HTML 구조와 함께 JavaScript 기능이 들어가야 목차가 열리게 됩니다.
    또한 목차의 href="#id명"은 출발점     --->소제목의 id는 도착점이란 것과 같은 id여야 네비게이션이 작동한다 정보만 이해 하시기 바랍니다
    ※ 모바일에선 가로모드로 보세요!

    목차 작동 이미지1 목차 작동 이미지2 목차 작동 이미지3 목차 작동 이미지4 목차 작동 이미지5 목차 작동 이미지6 목차 작동원리와 소스
    • 4

    목차 소스 활용하기

    이제 목차를 구성하는 구조까지 살펴보시고 나도 만들어야지! 마음을 먹었다면 아래 소스를 적용 시켜 보세요:)

    📋 접이식 목차 코드 복사하기

      
<!-- 접이식 목차 -->
<div id="toc-container" style="background: transparent; padding: 10px 0; margin-bottom: 30px; border-bottom: 1px solid rgba(139, 69, 19, 0.1);">
  <button onclick="toggleToc()" style="display: flex; align-items: center; gap: 8px; background: #8D6E63; color: white; border: none; padding: 8px 15px; border-radius: 20px; cursor: pointer; font-size: 0.9rem; margin-left: 10px; transition: all 0.3s ease;">
    <span id="toc-icon">📚</span>
    <span id="toc-text">목차 보기</span>
  </button>

  <div id="toc-content" style="display: none; background: white; padding: 20px; margin-top: 10px; border-radius: 15px; box-shadow: 0 4px 15px rgba(139, 69, 19, 0.05); max-width: 400px;">
    <h3 style="color: #5D4037; font-size: 1.1rem; margin: 0 0 15px 0; padding-bottom: 8px; border-bottom: 2px solid #D7CCC8;">목차</h3>
    <ul style="list-style-type: none !important; list-style: none !important; padding: 0 !important; margin: 0;">
      <li style="margin-bottom: 8px; list-style-type: none !important;">
        <a href="#intro" style="color: #5D4037; text-decoration: none; display: block; padding: 10px 15px; background: #EFEBE9; border-radius: 8px; transition: all 0.3s ease; display: flex; align-items: center; gap: 8px;">
          <span style="color: #8D6E63; font-weight: 500;">1.</span>
          첫번째 소제목
        </a>
      </li>
      <li style="margin-bottom: 8px; list-style-type: none !important;">
        <a href="#tools" style="color: #5D4037; text-decoration: none; display: block; padding: 10px 15px; background: #EFEBE9; border-radius: 8px; transition: all 0.3s ease; display: flex; align-items: center; gap: 8px;">
          <span style="color: #8D6E63; font-weight: 500;">2.</span>
          두번째 소제목
        </a>
      </li>
    </ul>
  </div>
</div>

<script>
function toggleToc() {
  var content = document.getElementById('toc-content');
  var text = document.getElementById('toc-text');
  var icon = document.getElementById('toc-icon');
  if (content.style.display === 'none') {
    content.style.display = 'block';
    text.innerText = '목차 닫기';
    icon.innerText = '📖';
  } else {
    content.style.display = 'none';
    text.innerText = '목차 보기';
    icon.innerText = '📚';
  }
}
</script>

<!-- H2 제목들 예시 -->
<h2 id="intro" style="font-size: 1.8rem; color: #5D4037; margin-top: 2em; padding: 20px; background: #EFEBE9; border-radius: 15px; box-shadow: 0 4px 10px rgba(139, 69, 19, 0.05); display: flex; align-items: center; gap: 10px;">
  <span style="background: #8D6E63; color: white; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 1.2rem;">1</span>
  첫 번재 소제목
</h2>

<h2 id="tools" style="font-size: 1.8rem; color: #5D4037; margin-top: 2em; padding: 20px; background: #EFEBE9; border-radius: 15px; box-shadow: 0 4px 10px rgba(139, 69, 19, 0.05); display: flex; align-items: center; gap: 10px;">
  <span style="background: #8D6E63; color: white; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 1.2rem;">2</span>
  두번째 소제목
</h2>

    4 목차! 좀 더 알고 싶어요.

    이제 조금 감이 오시나요?, “이게 진짜로 어떻게 작동하는지?” 궁금하신 분들도 계실 거예요. 단순히 따라만 하지 않고 진짜 이해까지 하고 싶으시다면, 아래 방법을 꼭 한 번 시도해보세요!

    ✨ 지금까지 만든 목차 코드(스크립트 포함)를 복사해서, 챗GPT에게 이렇게 질문해보세요:

    • 이건 목차야. 구조가 어때?
    • 이게 어떻게 작동하는 거야?
    • 그럼 너는 내가 원하는 색상으로 만들어 줄 수 있어?

    이렇게 질문하면, 지금까지 몰랐던 코드의 원리나 구조를 정확하게 알려줄 뿐만 아니라 나만의 디자인으로 바꾸는 방법도 배울 수 있답니다.

    🎯 핵심 포인트

    중요한 건 이렇게 하나 하나 배우면 결국 나만의 스타일 목차도 얼마든지 만들어 낼 수 있어요! 만들어진 목차는 꼭 메모장에 저장 하시는 거  잊지 않으셨죠? :)

    모르는 건 절대 부끄러운 일이 아니에요. ‘한 번이라도 배워보겠다’는 용기, 그게 진짜 멋진 겁니다. 지금 이 글을 끝까지 따라오고 계신 중년 여러분, 이미 훌륭한 블로거가 되고 계신 거예요! 

     💬 더 궁금한 게 있으신 분은 댓글로 편하게 질문 남겨주세요. 

    .
다음 이전