티스토리 뷰

IT

티스토리 블로그에 목차 자동 삽입하기

고래(부와 성공) 2025. 2. 16. 23:35

목차



    반응형

    목차 ▼

       

      ▲△ ▲△ ▲△ 요기 위에 목차를 주목해 주세요


      안녕하세요! 오늘은 티스토리 블로그에 목차를 삽입하는 방법에 대해 상세히 알아보겠습니다.

      목차는 독자들이 글의 구조를 한눈에 파악하고 원하는 섹션으로 바로 이동할 수 있게 해주는 유용한 기능입니다.

      그리고 목차는 구글 SEO 최적화에 중요한 요소기도 해요. 그럼 지금 부터 알아보기로 해요

       

      참고로 아래의 목차 추가에 대한 설명은 티스토리의 북클럽 스킨을 기준으로 설명합니다.

       

       

      블로그에 목차 삽입하는 방법 이미지
      블로그에 목차 삽입하는 방법


      목차 삽입의 장점

      긴 글을 작성할 때 목차를 추가하면 다음과 같은 장점이 있습니다:

      1. 독자들이 글의 전체 구조를 쉽게 파악할 수 있습니다
      2. 원하는 섹션으로 바로 이동할 수 있어 사용자 경험이 향상됩니다
      3. 검색엔진 최적화(SEO)에 도움이 됩니다
      4. 글의 전문성과 가독성이 높아집니다

      목차 삽입 방법

      1. jquery 파일 업로드하기

      ▶ [ jquery.toc.min.js ] 파일 다운로드 바로가기

      jquery.toc.min.js
      0.00MB

       

       

       

      위에서  [ jquery.toc.min.js ] 파일을 다운로드 받으셨다면

      파일을 티스토리 블로그에 업로드 하기 위해 [관리] > [꾸미기] > [스킨편집]  > [html 편집] > [파일업로드] > [추가] > [적용] 순으로 아래 그림을 참조하여 메뉴 진입 또는 적용을 해주시면 됩니다.

       

       

      2. HTML 코드 준비하기

      먼저 아래와 같이 HTML 코드의 각 영역에 각각 복사해주세요.
      - 관리모드에서 [스킨편집] > [HTML 편집] > [HTML 탭]에서 아래소스의 설명에 따라 수정하시고 적용하세요

       

      ▶ [ part1.txt ] 파일 다운로드 바로가기

      part1.txt
      0.00MB

       

      <!-- Part 1. - 아래의 코드를 head 태그의 끝부분 영역에 붙여주세요 --> 

    <!-- 자동 목차 시작 -->
    <script src="./images/jquery.toc.min.js"></script>
    <!-- 자동 목차 끝 -->
  </head>

       

      ▶ [ part2.txt ] 파일 다운로드 바로가기

      part2.txt
      0.00MB

       

      <!-- Part 2. - 아래의 코드를 body 태그의 첫시작 영역에 붙여주세요 --> 

<body id="tt-body-page"
  class="<s_if_var_layout-aside></s_if_var_layout-aside><s_if_var_list-type> </s_if_var_list-type><s_if_var_view-more> </s_if_var_view-more><s_not_var_promotion-mobile-view> promotion-mobile-hide</s_not_var_promotion-mobile-view>">
  <s_t3>

  <!-- 목차 토글 스크립트 시작 -->
  <script>
    $(document).ready(function() {
        // 목차 토글 기능 추가
        $('.toc-toggle').click(function() {
            $('#toc').toggleClass('collapsed');
            $('.toggle-icon').toggleClass('collapsed');
            
            // 로컬 스토리지에 상태 저장
            localStorage.setItem('tocState', $('#toc').hasClass('collapsed'));
        });

        // 페이지 로드시 이전 상태 복원
        if (localStorage.getItem('tocState') === 'true') {
            $('#toc').addClass('collapsed');
            $('.toggle-icon').addClass('collapsed');
        }
    });
  </script>
  <!-- 목차 토글 스크립트 끝 -->
       
       

      3. CSS 스타일 적용하기

      목차의 디자인을 꾸미기 위한 CSS 코드입니다:
      - 관리모드에서 [스킨편집] > [HTML 편집] > [CSS 탭]에서 맨아랫 부분에 삽입하고 적용하세요

       

       

      ▶ [ css.txt ] 파일 다운로드 바로가기

      css.txt
      0.00MB

      /* 자동 목차 스타일 시작 */
.book-toc {
    position: relative;
    width: fit-content;
    border: 1px solid #b0d197;
    padding: 10px 20px 0px 20px;
    z-index: 1;
}

.toc-toggle {
    font-weight: bold;
    font-size: 1.2em !important;
    color: #396120;
    margin-bottom: 10px;
    user-select: none;  /* 텍스트 선택 방지 */
}

.toggle-icon {
    display: inline-block;
    transition: transform 0.3s;
}

.toggle-icon.collapsed {
    transform: rotate(-90deg);
}

#toc {
    display: block;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    max-height: 1000px; /* 충분히 큰 값 */
}

#toc.collapsed {
    max-height: 0;
}

.book-toc:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #b0d197;
    z-index: -1;
    opacity: 0.1;
}
.book-toc p {
    font-weight: bold;
    font-size: 1.2em !important;
    color: #396120;
}
#toc * {
    font-size: 18px;
    color: #000 !important;
}
#toc {
    padding: 0px 20px 0px 25px;
}
#toc a:hover {
    color: #000;
}
#toc ul {
    margin-top: 5px;
    margin-bottom: 0px;
}
#toc > li {
    padding-left: 0;
    text-indent: 0;
    list-style-type: none;
    padding: 0px 20px 0px 0px;
	  margin-bottom: 10px;
    margin-top: 7px;
} 
#toc > li > a {
    text-decoration:none;
    font-weight: bold
}
#toc > li > ul {
    padding-left: 20px;
    margin-top: 0;
    margin-bottom: 0;
}
#toc > li > ul > li {
    font-size: 0.87em;
    padding-left: 0;
    text-indent: 0;
    list-style-type: none;
    margin-bottom: 5px;
    margin-top: 5px;
}
#toc > li > ul > li > a {
    font-size: 1em;
    text-decoration:none;
}
#toc > li > ul > li > ul {
    padding-left: 20px;
    margin-top: 0;
    margin-bottom: 0;
}
#toc > li > ul > li > ul > li {
    font-size: 0.87em;
    padding-left: 0;
    text-indent: 0;
    list-style-type: none;
    margin-bottom: 0px;
    margin-top: 0px;
}
#toc > li > ul > li > ul > li > a {
    font-size: 0.875em;
    text-decoration:none;
}
/* 자동 목차 스타일 끝 */

       

      4. 본문에 목차 적용하기

      티스토리 글 작성 화면에서 HTML 편집기 모드로 전환하고

       

      최고 상단에 아래의 소스를 삽입하시면 됩니다.

       

      ▶ [ main_template.txt ] 파일 다운로드 바로가기

      main_template.txt
      0.00MB

      <!-- 목차 구현부분 본문의 최고 상단에 넣어주세요 -->
<div class="book-toc" style="margin-top: 20px; margin-bottom: 30px;">
    <p data-ke-size="size16" class="toc-toggle" style="cursor: pointer;">
        목차 <span class="toggle-icon">▼</span>
    </p>
    <ul id="toc" style="list-style-type: none;" data-ke-list-type="none"></ul>
</div>

       

      5. 주의사항

      • 목차는 제목 태그(h1, h2, h3 등)를 기준으로 자동 생성됩니다
      • 제목 태그를 올바르게 사용했는지 확인해주세요
      • 스킨에 따라 CSS 스타일을 적절히 수정해야 할 수 있습니다

      목차 커스터마이징

       

      더 멋진 목차를 만들고 싶다면 다음과 같은 요소들을 수정할 수 있습니다:

      1. 목차 상자의 배경색 변경
      2. 테두리 스타일 수정
      3. 글꼴 크기와 색상 조정
      4. 들여쓰기 간격 조정
      5. 호버 효과 추가


      마무리

      이렇게 티스토리 블로그에 목차를 추가하는 방법에 대해 알아보았습니다. 목차를 활용하면 독자들이 더 편리하게 글을 읽을 수 있으며, 블로그의 전문성도 한층 높아질 것입니다. 위 방법을 참고하여 여러분의 블로그에도 멋진 목차를 추가해보세요!

      더 자세한 내용이나 다른 스타일의 목차를 원하시나요? 댓글로 남겨주시면 답변 드리도록 하겠습니다.

      감사합니다.

      'IT' 카테고리의 다른 글

      챗GPT 무료 플랜과 유료 플랜의 차이점 🎯  (0) 2025.02.23
      Grok 3 AI 출시: ChatGPT를 초월하는 인공지능의 미래  (0) 2025.02.18
      [사전예약] 겔럭시 S25 울트라 1TB 언박싱 티타늄 블랙 개봉기  (0) 2025.02.06
      [AI 공부] Gemini API & Firebase 웹 서비스 만들기 #5  (0) 2025.02.06
      [AI 공부] Gemini API & Firebase 웹 서비스 만들기 #4  (1) 2025.02.05