정보/블로그 운영팁

티스토리 떠 다니는 플로팅 목차 만드는 방법 (초급 버전)

아미넴 2020. 12. 17.
반응형

목차를 확인하려면 다시 위로 올라가야 하는 불편함을 해소하고자 만들어 보았습니다.

생각보다 깔끔하게 잘 만들어진 것 같아서 공유합니다.

 

주의) 고급 버전을 먼저 반영하고 초급 버전을 나중에 적용하시는 분은 없으리라 예상되지만 만에 하나 그럴 경우 내용이 중복 되므로 이전 반영 사항이 있다면 먼저 제거하셔야 합니다.

참고) 북클럽 스킨 기반이라 다른 스킨에서 정상적인 동작이 이루어지지 않을 수 있어요.

댓글로 사용하시는 스킨 알려 주시면 보완하여 내용을 추가하도록 하겠습니다.

 

목차

     

     

    목차 자동 생성

    먼저 목차가 생성되어 있어야겠죠 ㅎㅎ

    이전에 포스팅 한 내용이 있으므로 링크로 대체 하겠습니다.

     

    티스토리 글에 자동으로 목차 넣기

     

    티스토리 글에 자동으로 목차 넣기

    목차를 넣고 싶긴한데 글 쓸 때마다 매번 수작업으로 만든다면 상당히 번거롭겠죠. 그래서 jQuery 플러그인 Table of Contents(TOC)를 이용하여 자동으로 넣는 방법을 소개합니다. 저는 제목1, 제목2로

    sangminem.tistory.com

    목차부터 적용하시고 다음 단계를 진행하시면 됩니다.

     

     

    HTML 태그 작성

    먼저 태그 하나를 작성할 건데요.

     

    관리 페이지 > 꾸미기 > 스킨 편집 으로 이동합니다.

     

    html 편집을 클릭합니다.

     

    그럼 위외 같은 HTML 에디터가 뜨는데 여기에서 작업을 해 보겠습니다.

     

    body 태그 내에 적당한 위치에 다음과 같이 작성하세요.

    <!-- 플로팅 목차 -->
    <div class="floating-toc"></div>

    이 태그가 나중에 목차로 떠 다니는 부분입니다.

     

     

    CSS 작성

    다음 스타일을 작성해 보겠습니다.

     

    CSS 탭으로 이동합니다.

     

    아래와 같이 작성하세요.

    .floating-toc {
        position: absolute;
        cursor: pointer;
        border: 1px solid #b0d197;
        background: #fff;
        padding: 10px;
        z-index: 999;
        line-height: 1.5em;
    }
    .floating-toc p {
        font-weight: bold;
        font-size: 1em !important;
        margin: 0;
    }
    .floating-toc #toc-body {
        margin-top: 10px;
    }
    .floating-toc #toc-body #toc * {
        font-size: 15px;
    }
    .floating-toc #toc > li > ul {
        margin-bottom: 5px;
    }

    세부적인 스타일은 본인 취향에 맞게 고치시면 됩니다.

     

     

    자바스크립트 작성

    지금부터 목차가 따라다니는 로직을 만들어 보겠습니다.

     

    body 태그 안쪽 맨 아래 > script 태그 안쪽 작성하시면 됩니다.

    목차 이동 및 접기/펼치기 함수 작성

    다음과 같이 작성하겠습니다.

    /* 떠 다니는 목차 */
    function appendToc() {
        var bookToc = $('.book-toc');
        var floatingToc = $('.floating-toc');
        if(bookToc.length > 0 && window.scrollY > bookToc.offset().top + bookToc.innerHeight()) {
            if(floatingToc.height() === 0) {
                bookToc.css('width',bookToc.width()+'px'); // 목차 박스 크기에 이상 있으면 제거하세요
                bookToc.css('height',bookToc.height()+'px'); // 목차 박스 크기에 이상 있으면 제거하세요
                var tocTitle = $('<div id="toc-title"><p>목차 <span style="opacity:0.5;">펼치기</span></p></div>');
                floatingToc.append(tocTitle);
                bookToc.css('height', bookToc.height());
                var tocBody = $('<div id="toc-body" style="display:none;"></div>').append(bookToc.find('#toc'));
                floatingToc.append(tocBody);
                $('#toc-title').on('click', function(){
                    $('#toc-body').slideToggle();
                    var title = $('#toc-title>p>span');
                    if(title.text() === "펼치기") {
                        title.text("접기");
                    } else {
                        title.text("펼치기");
                    }
                });
            }
            var positionX = 20;
            floatingToc.css('top', (window.scrollY+20)+"px");
            floatingToc.css('left', positionX+"px");
            floatingToc.css('transition', "0.5s");
        } else {
            $('#toc-title').off('click');
            bookToc.append(floatingToc.find('#toc'));
            floatingToc.find('div').remove();
            floatingToc.removeAttr('style');
        }
    }

    스크롤 한 Y좌표 위치 페이지의 맨 상단에서부터 목차가 있는 곳까지의 거리 + 목차 박스 크기만큼의 길이보다 커지면 원래 목차 위치에서 떼어내어 위에서 작성했던 div로 이동시켜서 스크롤 할 때마다 따라다니도록 하였습니다.

    목차 전체가 보이게 하면 화면의 너무 많은 자리를 차지하므로 목차를 펼치고 접을 수 있도록 클릭 이벤트를 연결하였습니다.

    jQuery에서 제공하는 slideToggle 메서드를 사용하여 애니메이션 효과를 부여하고 접기/펼치기 텍스트를 바꿔 주었습니다. 

    스크롤이 원래 목차있던 위치로 복귀하면 플로팅 목차는 사라지게 됩니다.

     

     

    스크롤 이벤트 추가

    간단히 다음과 같이 작성하면 됩니다.

    /* DOM 로드 직후 실행 */
    $(document).ready(function() {
        /* 스크롤 이벤트리스너 */
        $(window).on('scroll', function() {
            appendToc();
        });
    });

    위에서 작성한 함수를 스크롤 이벤트에 등록하였습니다.

     

     

    결과 확인

    목차를 벗어나면 다음과 같은 플로팅 목차가 나타납니다.

     

    클릭하면 다음과 같이 목차가 펼쳐집니다.

     

    영상으로도 확인해 보겠습니다.

    아주 잘 작동합니다.

    만족스럽네요 ㅎㅎ

     

    기능을 좀 더 강화하고 싶으신 분은 다음 포스팅을 참고해 주세요.

     

    티스토리 떠 다니는 플로팅 목차 만드는 방법 (고급 버전)

     

    티스토리 떠 다니는 플로팅 목차 만드는 방법 (고급 버전)

    초급 버전에서 좀 더 기능을 강화한 버전을 만들어 보았습니다. 어느 정도 코딩이 가능한 분이어야 수월하게 따라하실 수 있을 겁니다. 이 부분이 어렵게 느껴지시는 분은 다음 초급 버전을 참

    sangminem.tistory.com

     

    혹시 글머리 바꾸고 싶으신 분은 다음 포스팅 참고 바랍니다.

     

    티스토리 목차 글머리 서식 변경하기

     

    티스토리 목차 글머리 서식 변경하기

    기본 글머리 기호도 심플하긴 하지만 원하는 모양으로 바꾸면 더 좋을 것 같다는 생각을 했습니다. 기본 글머리 설정 방법 list-style-type - CSS: Cascading Style Sheets | MDN The list-style-type CSS proper..

    sangminem.tistory.com

     

    감사합니다 :)

    반응형
    그리드형(광고전용)

    댓글59

    • 이전 댓글 더보기
    • ( ˃ᴗ˂ ) 2021.03.05 22:35 신고

      와우 해결되었습니다! 그리고 방금 알게된 문제인데 ㅋㅋ 우측상단 카테고리 여는창이 눌러도 반응이 없는데 이건 뭘 잘못 건드려서 그런가요?? 테스트하는 블로거라 상관은 없는데... 수정하면서 뭘 지웠나...
      답글

    • ( ˃ᴗ˂ ) 2021.03.05 22:41 신고

      감사합니다 ;; 뭘지운거지.. 계속 궁금한게 생기는데 실례가 안된다면, 볼드를 적용시켰을때 자동으로 지정된 색을 입히도록 하는 방법을 알수있을까요? 그냥 진하게만 했을때 눈에 잘 안띄는거 같아서 색일 입히려 하는데, 매번 볼드, 색지정 하는게 번거로워서요. 아님 이주제로 따로 포스팅을 좀 부탁드려도 될런지... ㅎㅎ
      답글

    • ( ˃ᴗ˂ ) 2021.03.05 23:13 신고

      음 f12로 코드를 봐도 모르겠내요..
      .content-article > p > b {
      padding: 2px 5px;
      border-radius: 3px;
      font-weight: bold; /*폰트 굵기 */
      color: rgba(161, 117, 209, 0.9); /*폰트 색상*/
      } 친효님 블로그에서 뒤져봤는데도 북클럽에는 적용안되는것 같구...
      답글

    • ( ˃ᴗ˂ ) 2021.03.05 23:20 신고

      와 된다!!! 정말 감사합니다!!! 오늘 진짜 많은 정보 얻어갑니다 감사합니다 !! 안녕히 주무세요 ㅠㅠ
      답글

    • ( ˃ᴗ˂ ) 2021.03.06 21:58 신고

      플로팅도 적용을 했는데 아래로 스크롤했을때 미니목차에서 h2태그 글자 앞에 마커가 왼쪽으로 치우치며, 다시 위로 올라갔을때 기존에 위에 있던 목차가 세로로 길게 늘어집니다. 이거 어떻게 해야할까요.

      https://sadvqe13.tistory.com/8
      답글

    • ( ˃ᴗ˂ ) 2021.03.07 01:03 신고

      안녕하세요. 방금 적용시켰시켰어용.
      답글

      • 아미넴 2021.03.07 01:07 신고

        적용하신 코드에서 다음 부분을 제거해 보세요~

        bookToc.css('width',bookToc.width()+'px');
        bookToc.css('height',bookToc.height()+'px');

    • ( ˃ᴗ˂ ) 2021.03.07 01:20 신고

      와, 상단 목차 늘어나던 현상이 사라 졌습니다. 와 대단하세요 ㅠㅠㅠ 미니목차에 h2태그 오른쪽으로 밀려면 어떤코드를 넣어야 할까요? 왼쪽벽에 너무 붙어있어서용
      답글

    • ( ˃ᴗ˂ ) 2021.03.07 01:31 신고

      다해결 되었습니다. 너무 감사합니다!!!
      답글

    • ( ˃ᴗ˂ ) 2021.03.08 22:39 신고

      선생님 질문있습니다. 코드입력해놓은 저 박스는 뭐라고 부르는건가요? 어떻게 만들수 있나요? 포스팅 복사금지 해놓고, 복사해도 되는건 저 박스안에 적어두면 좋을거 같은데
      답글

    • ( ˃ᴗ˂ ) 2021.03.08 22:50 신고

      방금 css코드 아무거나 복사해서 코드블럭에 넣어서 작성해봤는데, 선생님처럼 까맣게 나오지가 않아요. 그냥 일반 글쓴거 처럼 나오는데 왜그럴까요?
      답글

    • ( ˃ᴗ˂ ) 2021.03.08 23:08 신고

      압 오늘도 하나 배워갑니다 감사합니다!
      답글

    • ( ˃ᴗ˂ ) 2021.03.30 13:46 신고

      선생님 플로팅 목차가 스크롤했을때 선생님 블로그 플로팅 목차처럼 고정된상태로 따라오게 하려며 ㄴ어떻게 해야하나요? 현재는 스크롤하면 한 두박자 늦게 따라오거든요.
      답글

      • 아미넴 2021.03.30 14:44 신고

        안녕하세요.
        floating-toc의 position을 fixed로 해 주시고 자바스크립트 소스에서 다음 부분을 고정값으로 해 주시면 그 위치에 고정됩니다.
        floatingToc.css('top', (window.scrollY+20)+"px");
        floatingToc.css('left', positionX+"px");

    • ( ˃ᴗ˂ ) 2021.03.30 20:01 신고

      고정값으로 하라는 말씀이 px 저부분에 숫자를 넣는건가요?
      답글

    • 익명 2021.05.05 22:28

      비밀댓글입니다
      답글

      • 익명 2021.05.05 22:36

        비밀댓글입니다

      • 아미넴 2021.05.05 23:07 신고

        네 의견 감사합니다. 참고해서 시간될 때 반영하도록 해볼게요.
        특정 지점에 도달했을 때 목차가 펼쳐지는 기능은 현재 제 스킨에는 적용되어 있는 사항입니다.

    • 익명 2021.05.29 01:23

      비밀댓글입니다
      답글

      • 아미넴 2021.05.29 01:50 신고

        방법이 없지는 않겠지만 여기서 간단히 말씀드리긴 어렵구요. 구현한다 하더라도 각각의 광고 플랫폼 정책에 위반될 소지가 있어서 추천드리지는 않습니다.

    • 익명 2021.05.29 11:00

      비밀댓글입니다
      답글

      • 아미넴 2021.05.29 19:04 신고

        아네 앵커광고만을 위한 포스팅은 찾기 어려울 수도 있어 보이구요.
        그냥 떠오르는 방법으로는 하단이나 상단 고정 위치에 광고를 게재하고 스크롤 시 숨겼다 보여줬다 하는 정도의 기능만 추가하면 될듯 싶습니다.
        jQuery를 이용한다면 버튼으로 여닫는 기능도 그다지 어렵지 않아 보이구요.

    • 아루팡 2021.05.30 17:15 신고

      작성중인 글에 서식을 통해 목차를 넣어보아서 성공했습니다! 근데 아미넴님의 목차를 보면 플로팅 말고 그냥 목차에서도 접기 펼치기가 가능하던게 그건 어떻게 하는 걸까요? 혹시 제가 글을 못 찾은 걸까요 ㅠ
      답글

      • 아미넴 2021.05.30 21:37 신고

        안녕하세요. 그 기능은 미넴 스킨 제작 시에 넣은 기능이라 따로 포스팅 하지는 않았습니다.

        미넴 스킨도 관심 부탁드릴게요 ㅎ
        https://sangminem.tistory.com/506

    • 아트시 2021.09.23 23:51 신고

      우와 너무 좋은 기능이네요! 매거진 스킨에도 적용이 가능할까요? 혹시라도 바꿀 부분 알려주실 수 있을까요?
      답글

    • 아트시 2021.09.23 23:51 신고

      좋은 글들이 많아서 계속 보고 있네요 ㅎㅎ 구독하고 갑니다.
      답글

    • pnltoen 2022.06.23 03:02 신고

      안녕하세요 선생님!! 말씀하신 대로 따라하였으나 몇가지 문제가 발생하여 질문드리게 되었습니다 ㅠ.ㅠ

      우선 생성된 목차에 자동적으로
      상세컨텐츠
      본문제목
      본문

      와 같이 목차가 자동 생성됩니다. 추가적으로 댓글영역도 자동으로 생성되는데 해당 부분관련해서 여쭤볼 수 있을까요? 감사합니다
      답글

      • 아미넴 2022.06.23 23:37 신고

        안녕하세요. 댓글 영역에 제목 태그를 썼을 가능성이 높아 보입니다. 일단 그 부분부터 확인해 보시기 바랄게요~

      • pnltoen 2022.06.24 10:06 신고

        앗.... 웹은 잘몰라서 ㅠ.ㅠ 올려주신 미넴스킨이 엄청 예쁘길래 미넴스킨으로 적용했습니다 좋은 스킨 그리고 답변해주셔서 감사합니다~!!!ㅎㅎ

      • 아미넴 2022.06.24 15:21 신고

        오네 ㅎㅎ 맘에 드셨다니 다행이네요~

    💲 추천 글