정보/블로그 운영팁

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

변태 개발자 아미넴 2020. 12. 20.

초급 버전에서 좀 더 기능을 강화한 버전을 만들어 보았습니다.

어느 정도 코딩이 가능한 분이어야 수월하게 따라하실 수 있을 겁니다.

 

이 부분이 어렵게 느껴지시는 분은 다음 초급 버전을 참고 바랍니다.

사실 난이도는 큰 차이가 없습니다.. ^^;

 

주의) 초급 버전과 내용이 중복 되므로 이전 반영 사항이 있다면 먼저 제거하셔야 합니다.

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

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

 

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

 

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

목차를 확인하려면 다시 위로 올라가야 하는 불편함을 해소하고자 만들어 보았습니다. 생각보다 깔끔하게 잘 만들어진 것 같아서 공유합니다. 목차 목차 자동 생성 먼저 목차가 생성되어 있어

sangminem.tistory.com

 

목차

     

    목차 자동 생성

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

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

     

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

     

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

    목차를 넣고 싶긴한데 글 쓸 때마다 매번 수작업으로 만든다면 상당히 번거롭겠죠. 그래서 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;
        display: none;
    }
    .floating-toc:after {
        content:"";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #b0d197;
        opacity: 0.1;
        z-index: -1;
    }
    .floating-toc p {
        font-weight: bold;
        font-size: 1em !important;
        margin: 10px 0 10px 0;
    }
    .floating-toc #toc-body {
        margin-top: 10px;
    }
    .floating-toc #toc-body #toc * {
        font-size: 15px;
    }
    .floating-toc #toc-body #toc {
        margin-left: 0;
        padding-left: 20px;
    }
    .floating-toc #toc-body #toc > li > ul > li > a {
        font-size: 0.9em;
    }
    .floating-toc #toc-body #toc > li > ul > li > ul > li > a {
    	font-size: 0.8125em;
    }
    .floating-toc-ani {
        animation: bounce-toc 5s linear infinite;
    }
    @keyframes bounce-toc {
        0% {
            transform: scale(1.0);
        }
        50% {
            transform: scale(0.9);
        }
        100% {
            transform: scale(1.0);
        }
    }

    그냥 플로팅 목차를 꾸미기 위한 부분이고 참고 사항으로 제공한 코드이므로 특별히 설명은 하지 않겠습니다.

    본인의 취향에 맞게 꾸미시면 됩니다.
    floating-toc 클래스의 position을 absolute로 하게 되면 스크롤 좌표에 영향을 받고 fixed로 하면 화면 상 보이는 위치 만큼만 영향을 받는다는 것에만 유의하시면 될 것 같습니다.

     

     

    자바스크립트 작성

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

     

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

    스크롤에 따른 목차 이동 함수 작성

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

    var safeFlag = true;
    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.innerHeight() > 70 && safeFlag) {
                safeFlag = false;
                floatingToc.css('display','block');
                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);
                
                floatingToc.addClass('floating-toc-ani');
                
                floatingToc.css('padding', '0');
                $('#toc-title').css('padding', '10px');
                
                floatingToc.css('top', "20px");
                floatingToc.css('left', "20px");
                floatingToc.css('position', "fixed");
                
                // 목차 클릭
                function clickTitle() {
                    floatingToc.css('transition', '');
                    var title = $('#toc-title>p>span');
                    if(title.text() === "펼치기") {
                        $('#toc-title').css('padding', '10px 0 0 0');
                        floatingToc.css('padding', '0px 10px 10px 10px');
                        floatingToc.removeClass('floating-toc-ani');
                    }
                    
                    setTimeout(function(){
                        $('#toc-body').slideToggle(300,'linear', function() {
                            if(title.text() === "접기") {
                                floatingToc.css('transition', '');
                                title.text("펼치기");
                                floatingToc.css('padding', '0');
                                $('#toc-title').css('padding', '10px');
                                floatingToc.addClass('floating-toc-ani');
                            } else {
                                title.text("접기");
                            }
                        });
                    },200);
                }
                $('#toc-title').on('click', function(){
                    clickTitle();
                });
                
                //목차 항목 클릭
                $('#toc-body').find('a').on('click', function(){
                    setTimeout(function(){
                        checkPosition();
                    }, 200);
                });
                
                clickTitle();
                setTimeout(function(){
                    if($('.tt_article_useless_p_margin').offset().left < $('.floating-toc').width() + 40) {
                        clickTitle();
                    }
                }, 500);
                
                setTimeout(function(){
                    safeFlag = true;
                }, 1100);
            } else {
                checkPosition();
            }
        } else {
            $('#toc-title').off('click');
            bookToc.append(floatingToc.find('#toc'));
            floatingToc.find('div').remove();
            floatingToc.removeAttr('style');
            floatingToc.css('display','none');
            $('#toc').find('a').removeAttr('style');
        }
    }

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

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

    또한 왼쪽 공간이 충분히 넓으면 처음 플로팅 목차가 보여질 때 펼쳐진 상태가 되도록 하였습니다.

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

    그리고 스크롤을 하거나 목차의 제목을 클릭하면 이동하는 부분이 어느 위치인 지를 나타내기 위한 함수도 추가하였는데 아래에 이어서 작성하도록 하겠습니다.

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

     

    작성하다 보니 상당히 복잡하게 되었는데요.

    제 블로그에서 보고 목차 기능을 만드셨다면 이 함수도 거의 그대로 가져다 쓰시면 될 것 같습니다.

    +내용 추가 (2020.01.02)

    공간이 좁은 모바일에서 목차가 접혔을 때 아이콘으로 표시하는 방법입니다.

    먼저 css에 클래스 하나를 추가합니다.

    .floating-icon:after {
        font-family: "Font_Awesome_5_Free";
        content: "\f03a";
        font-size: 0.8125;
        color: #548a25;
    }

    Font Awesome 5 Free 글꼴을 모르시면 다음 포스팅을 참고하세요.

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

     

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

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

    sangminem.tistory.com

     

    그리고 다음과 같이 수정합니다.

    // 이 부분을 수정합니다.
    var tocTitle = $('<div id="toc-title"><p>목차 <span style="opacity:0.5;">펼치기</span></p></div>');
    /***************************************************************/
    
    // 다음은 수정한 후 입니다.
    var tocTitle = $('<div id="toc-title"><div class="floating-icon"></div><p>목차 <span style="opacity:0.5;">펼치기</span></p></div>');

    아이콘을 표시할 div를 추가해 주었습니다.

     

    바로 아래에 다음을 추가합니다.

    //목차 아이콘으로 표시
    if(window.innerWidth < 768) {
        tocTitle.find('p').css('display','none');
    } else {
        tocTitle.find('.floating-icon').css('display','none');
    }

     

    마지막으로 clickTitle 함수를 수정합니다.

    // 목차 클릭
    function clickTitle() {
        floatingToc.css('transition', '');
        var title = $('#toc-title>p>span');
        if(title.text() === "펼치기") {
            $('#toc-title').css('padding', '10px 0 0 0');
            floatingToc.css('padding', '0px 10px 10px 10px');
            floatingToc.css('opacity', '1.0');
            floatingToc.removeClass('floating-toc-ani');
        }
        setTimeout(function(){
            $('#toc-body').slideToggle(300,'linear', function() {
                if(title.text() === "접기") {
                    floatingToc.css('transition', '');
                    title.text("펼치기");
                    floatingToc.css('padding', '0');
                    $('#toc-title').css('padding', '10px');
                    floatingToc.css('opacity', '0.5');
                    floatingToc.addClass('floating-toc-ani');
                    //목차 아이콘으로 표시
                    if(window.innerWidth < 768) {
                        tocTitle.find('p').css('display','none');
                        tocTitle.find('.floating-icon').css('display','block');
                    }
                } else {
                    title.text("접기");
                    //목차 아이콘으로 표시
                    if(window.innerWidth < 768) {
                        tocTitle.find('p').css('display','block');
                        tocTitle.find('.floating-icon').css('display','none');
                    }
                }
            });
        },200);
    }

    목차에 의한 게시물 방해를 최소화 하기 위해 투명도도 살짝 주었습니다.

     

    목차가 접혔을 경우 크기를 70~80%로 줄였습니다.

    @keyframes bounce-toc {
        0% {
            transform: scale(0.8);
        }
        50% {
            transform: scale(0.7);
        }
        100% {
            transform: scale(0.8);
        }
    }

    수치를 조금씩 변경해 보면서 원하는 대로 줄이면 될 것 같습니다.

     

    +내용 추가 (2021.01.03)

    모바일에서 접었다 펼쳐지는 행위가 보기 산만하다는 의견을 반영하여 전체 로직은 흔들지 않으면서 깔끔하게 처리할 수 있는 방법을 생각해 보았습니다.

    // 이 부분을 수정해 보겠습니다.
    clickTitle();
    setTimeout(function(){
        if($('.tt_article_useless_p_margin').offset().left < $('.floating-toc').width()+20) {
            clickTitle();
        }
    }, 500);
    setTimeout(function(){
        safeFlag = true;
    }, 1100);
    
    /*****************************************************************************/
    
    // 수정 후 소스입니다.
    floatingToc.css('visibility', 'hidden'); // visibility 값을 hidden으로 주어 잠시 숨김
    clickTitle();
    setTimeout(function(){
        if($('.tt_article_useless_p_margin').offset().left < $('.floating-toc').width()+40) {
            clickTitle();
        }
    }, 500);
    setTimeout(function(){
        floatingToc.css('visibility', ''); // 완전히 접힌 후 다시 보이도록 함
        safeFlag = true;
    }, 1100);

    기존 로직은 거의 영향을 주지 않고 반영하였습니다. 궁금하신 점은 댓글로 말씀 부탁드릴게요.

     

     

    현재 항목 강조 기능 추가

    현재 화면 상에 나타는 내용이 어느 위치인 지를 나타내기 위한 checkPosition 함수입니다.

    function checkPosition() {
        var titleList = $('.tt_article_useless_p_margin').find('h2,h3,h4');
        var scrollY = window.scrollY + 50;
        if(titleList.length > 1) {
            for(var i=0; i < titleList.length; i++) {
                var tocList = $('#toc').find('a');
                if(i < titleList.length-1) { //다른카테고리 글보기 플러그인을 사용하신다면 length-2로 바꿔주세요
                    if(titleList.eq(i).offset().top < scrollY && titleList.eq(i+1).offset().top > scrollY) {
                        tocList.removeAttr('style');
                        tocList.eq(i).css('font-weight','bold');
                        break;
                    }
                } else {
                    if(titleList.eq(i).offset().top < scrollY) {
                        tocList.removeAttr('style');
                        tocList.eq(i).css('font-weight','bold');
                        break;
                    }
                }
            }
        }
    }

    현재 어느 위치에 있는지 파악하여 목차에 bold 스타일로 강조를 하였습니다.

     

     

    스크롤 이벤트 추가

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

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

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

     

     

    결과 확인

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

     

    공간이 좁으면 접혀진 상태로 시작됩니다.

     

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

     

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

     

    먼저 옆 공간이 충분할 때 영상입니다.

    펼쳐진 상태로 유지가 됩니다.

    물론 접을 수도 있습니다.

    그리고 스크롤을 내릴 때마다 현재 항목이 강조가 되는 것도 확인하실 수 있습니다.

     

    두번째로 옆 공간이 목차보다 좁을 때 영상입니다.

    플로팅 목차가 자동으로 접히게 됩니다.

    필요할 때 펼치시면 됩니다.

     

    모두 잘 작동하는군요.

     

    궁금하신 점은 댓글로 남겨 주시구요.

    저는 이만 물러갑니다 :)

    BIG

    댓글48

    • Super Mom & Daddy 2020.12.20 07:52 신고

      잘보고 갑니다 ---해보려는데 약간 어렵냉~~
      답글

    • 카누라떼 2020.12.20 08:49 신고

      네이버랑은 다르게 티스토리는 역시 아는만큼 바꿀수 있나봅니다 ㅎㅎ
      답글

      • 네이버 블로그는 완성도가 높아서 초보자가 이용하기 쉬운 반면에 티스토리는 좀 허술하긴 하지만 프로그래밍 가능하면 충분히 커버 가능한 정도이고 대부분 원하는대로 바꿀 수 있어서 개발자에게 적합한 것 같네요 :)

    • teum♡ 2020.12.20 12:01 신고

      오 ㅎㅎㅎ 똑똑하신 아미넴님 좋은 정보 잘보고 갑니다
      답글

    • 이웃언니 2020.12.20 15:30 신고

      전 포기자라서 모르지만 다른 분들껜 유용한 팁을꺼예요~
      답글

    • LunaCell 2020.12.21 13:56 신고

      HTML CSS 최근에 지식 하나도 모르는 상태에서 저도 손 대기 시작했는데 어느 정도 만지니 약간의 이해도가 생겨서 바로바로 적용이 되니 개인적으로 신기합니다.

      앞으로도 훌륭한 개발자가 되기를 바랄뿐입니다.

      혹시 HTML / CSS 관련 입문용 책이 있다면 추천해주실 수 있을까요?
      답글

      • 오 방금 루나셀님 블로그 가서 확인하였는데 아주 잘 작동하고 있네요 ㅎㅎ
        제가 다 뿌듯합니다!
        좋은 말씀도 감사드려요 :)

        사실 저는 처음부터 웹 개발을 하던 사람이 아닐뿐더러 원래 책으로 공부를 하는 스타일은 아니라서 참고한 책이 없습니다 ㅠㅠ

        일단 코딩 자체에 흥미를 느끼신거라면
        https://sangminem.tistory.com/19
        코딩에 대한 이해를 돕기 위한 포스팅 한 번 더 참고 부탁드리구요~

        차근차근 공부하길 원하신다면 생활코딩 사이트가 도움이 되겠네요 ㅎㅎ
        https://opentutorials.org/course/3084

        여기는 튜토리얼부터 레퍼런스, 예제까지 잘 다루고 있는 가장 유명한 학습 사이트 입니다.
        https://www.w3schools.com/
        다만 영어라 영어 울렁증이 있으시다면 처음 하시는 분들은 조금 힘드실 수도 있습니다.

        위에서 말씀드렸던 생활코딩 사이트 운영자가 책도 낸 것 같네요 ㅎㅎ
        요새는 정보가 넘쳐서 굳이 책이 필요없어 보이긴 한데 그래도 책으로 공부하기를 원하시면 이 책으로 봐 보세요~
        http://www.yes24.com/Product/Goods/67883315

    • 감사합니다. 2021.01.02 14:59

      안녕하세요 엊그제부터 잘 따라해서 여기까지 성공시켰습니다. 그리고 자랑을 했는데 모바일에서 되게 거슬린다고 하더라구요 ㅠㅠㅠ 혹시 X표 버튼을 만들어서 마음에 안들면 삭제를 시키게끔 할수는 없을까요?
      답글

      • 안녕하세요. 먼저 방문 감사드립니다.
        저도 약간 걸리는 부분이긴 해서 접혀있을 때는 흐리게 할까도 생각했는데 x버튼도 나쁘지 않을 것 같네요 ㅎㅎ
        한 번 적용해 보고 말씀드릴게요!

      • x버튼 추가는 좁은 공간에서 오히려 터치 실수로 목차가 필요한 사람에게 불편함을 줄 수 있을 것 같아서 적용하지 않기로 했습니다.
        목차가 접혔을 경우 차지하는 공간을 줄이고 투명화 하는 방법으로 불편을 최소화 하였으니 참고 바랍니다.

        +내용 추가(2021.01.02) 부분 보시면 됩니다.

    • 도쿄정대리 2021.01.09 15:07 신고

      좋은 글 잘보고 갑니다. 저도 적용해봐야겠습니다^^
      답글

    • LunaCell 2021.02.01 19:14 신고

      안녕하세요 오랜만에 뵙게 됩니다.

      고급 버전 이번에 도전할려고 적용 테스트를 하고 있는 중인데 적용이 이상하게 적용되는 것 같습니다. 그리고 궁금점도 있습니다.

      1. div 수정하라는 부분에서 수정하라는 내용이 조금 틀린 것 같습니다.
      var tocTitle = $('<div id="toc-title"><p>목차 <span id="toggle" style="color:#517135;">펼치기</span><span style="color:#b0d197;">\/이동하기</span></p></div>');

      위의 코드가 수정 전의 HTML 코드라는데 똑같이 생긴 코드가 없고

      var tocTitle = $('<div id="toc-title"><p>목차 <span style="opacity:0.5;">펼치기</span></p></div>');

      이렇게 적혀있습니다. 바로 위의 코드를 지우고 수정 후의 코드로 집어 넣으면 되는건가요? 순수 Book Club을 다시 적용했을 때 생기는 문제입니다.

      2. 목차가 접었다 펼쳐지는 행위를 저도 없애고 싶어 적용하였지만 목차가 접었다 펼쳐졌다 그대로입니다. 어떤 문제가 있는지 잘 모르겠군요....

      3. 글 내용에 저장된 목차에서 제목의 길이가 조금만 길면 스크롤을 내렸다 올라오면 네모박스에서 늘어나지 않고 그대로 글자가 아래로 내려가는 증상이 있습니다.

      문제의 링크를 제공해드리겠습니다.
      https://lunacellstonesecond.tistory.com/31
      답글

      • 아네 안녕하세요.

        1. 현재 제 소스를 기준으로 작업을 해서 살짝 혼동을 드렸네요.
        여기서 중요한건 <div class="floating-icon"></div> 이 부분을 추가하는 거거든요.
        본문에 수정해 놓았습니다~

        2. 이건 저도 수정을 여러 번 해서 검토가 좀 필요해 보이네요.

        3. 이 증상은 저도 알고 있고 대부분의 경우 잘 돼서 일단 그대로 사용 중인데 원인 찾으면 업데이트 하겠습니다.

        감사합니다.

      • LunaCell 2021.02.03 17:30 신고

        항상 답변주셔서 감사합니다. 당분간은 초급 버전으로 계속 사용해야겠군요 ㅠㅠ 감사합니다.

    • июÐ′ 2021.02.21 17:31 신고

      안녕하세요 저는 고래스킨에 적용을 하고 있는 중인데, 플로팅 목차에서 줄간격을 조금 띄우려면 어떻게 해야할까요??
      답글

    • 2021.04.09 05:47

      비밀댓글입니다
      답글

      • 1. 현재 넓은 화면에서는 스킨편집 옵션에서 왼쪽 오른쪽 선택 가능하도록 해 놓았구요. 모바일 버전에서는 오른쪽에 사이드바 메뉴 아이콘이 있어서 왼쪽으로 고정해 놓았으니 참고 바랍니다 ㅎ

        https://sangminem.tistory.com/520#%ED%94%8C%EB%A1%9C%ED%8C%85_%EB%AA%A9%EC%B0%A8_%EA%B8%B0%EB%B3%B8_%EC%9C%84%EC%B9%98_%EC%84%A4%EC%A0%95

        2. 이건 무슨 말씀인지 정확히 이해가 안 되는데 예를 들어 말씀해 주셨으면 합니다.

        3. 제목 스타일은 스킨 편집의 html 편집 css에서 /* content article */ 부분의 .content-article h2~h4 부분을 수정하시면 됩니다.

    • 2021.04.10 01:57

      비밀댓글입니다
      답글

      • 1. 사이드바가 메뉴 버튼으로 전환된 이후에는 모두 같은 방식으로 적용되는데 화면 사이즈에 따라 방식을 달리 하고 싶으신 거라면 고려할 사항이 많아서 간단히 말씀드리기가 어렵네요. 입맛에 맞게 수정하시려면 common.js의 clickTitle 함수에서 type이 init일 경우 목차의 위치를 결정하는 로직을 추가해서 해결할 수 있어 보이는데 자바스크립트에 대한 이해가 어느정도 바탕이 되어야 합니다.

        2. 아 이건 before라는 키워드를 사용하여 태그 앞에 새로운 DOM을 생성하여 글머리를 붙인거라 CSS의 클래스 계층구조를 이해하셔야 작성이 가능합니다. 예를 들어 #toc li ul li:before 보다는 #toc li ul li.selected:before가 우선순위가 높다는 특성을 이용하여 적용한 것입니다.

        3. 아 죄송해요. 옵션을 적용하기 위해 HTML 쪽에도 추가한 코드가 있다는걸 깜박했네요. HTML 156~158 라인에도 제목 관련 코드가 있습니다.

        도움이 되길 바랍니다.

    • Tistory. 2021.04.10 20:07 신고

      자세한 답변 감사드립니다.
      복 많이 받으실거에요~ ^^
      답글

    • 토토 2021.05.10 06:36

      정말 정말 죄송합니다. 콘텐츠가 너무 좋아서 진짜 하루종일 머물면서 적용하고 있습니다. 그런데 이 글에서 다 따라 간 것 같은데도 실제로는 안되서 질문 올립니다ㅠㅠㅠㅠㅠㅠ

      1. 가장 첫번째에서 Body 태그 내에 아무 곳이나 넣어도 된다고 하신 것은 <head>~</head> 다음에 있는 <Body>~</Body> 내에 (<script>~</script>를 만들지 않고) 어느 곳이든 붙여넣기해도 상관없는거 맞죠? (물론 다른 것들에 방해되지 않게요!)

      2. 가장 마지막에 언급하신 스크롤 이벤트는 어떻게 등록하는건가요? (저는 그냥 body내에 <script>~</script>를 새롭게 만들어서 넣었는데 안되는거보니 틀린 것 같아서요..)
      - 혹시 위에서 말씀하신 플로팅 목차 자바코드들을 스크롤이벤트에 언급하신 코드 속에 넣으면 되는건가요?? (스크롤 이벤트 코드{(플로팅목차)} 이렇게요??
      답글

      • 네 안녕하세요.

        1. 맞습니다. <div class="floating-toc"></div> 는 script 태그 안에 삽입하는 것이 아니라 body 태그 내 적당한 곳에 위치시키시면 됩니다.

        2. 맞게 하신거 같은데요. 말씀하신 내용은 의미 상으로는 틀린 부분이 없습니다. 아마 다른 곳이 문제이지 않을까 싶네요. 스크롤 이벤트 블럭 내에 작성한 함수를 넣은 것도 맞습니다.

      • 토토 2021.05.11 00:27

        정말 친절하게 알려주셔서 감사합니다. 될때까지 해보겠습니다!!

    •  . 2021.06.25 00:54 신고

      선생님 현재항목 기능추가에서 모든 h2,h3가 bold다 되있는데 이건 왜그런건가요;;;; 해당위치로 가야 볼드로 변환되야 하는데;;;
      답글

    •  . 2021.06.25 00:59 신고

      https://mytestblog.tistory.com/2 한번만 봐주세요. 코드는 올려놓으신 코드 그대로 사용했습니다...
      답글

    •  . 2021.06.27 19:45 신고

      <script>
      function checkPosition() {
      var titleList = $('.tt_article_useless_p_margin').find('h2,h3,h4');
      var scrollY = window.scrollY + 50;
      if(titleList.length > 1) {
      for(var i=0; i < titleList.length; i++) {
      var tocList = $('#toc').find('a');
      if(i < titleList.length-1) {
      if(titleList.eq(i).offset().top < scrollY && titleList.eq(i+1).offset().top > scrollY) {
      tocList.removeAttr('style');
      tocList.eq(i).css('font-weight','bold');
      break;
      }
      } else {
      if(titleList.eq(i).offset().top < scrollY) {
      tocList.removeAttr('style');
      tocList.eq(i).css('font-weight','bold');
      break;
      }
      }
      }
      }
      }
      </script>



      <script>
      var safeFlag = true;
      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.innerHeight() > 70 && safeFlag) {
      safeFlag = false;
      floatingToc.css('display','block');
      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);

      floatingToc.addClass('floating-toc-ani');

      floatingToc.css('padding', '0');
      $('#toc-title').css('padding', '10px');

      floatingToc.css('top', "20px");
      floatingToc.css('left', "20px");
      floatingToc.css('position', "fixed");

      // 목차 클릭
      function clickTitle() {
      floatingToc.css('transition', '');
      var title = $('#toc-title>p>span');
      if(title.text() === "펼치기") {
      $('#toc-title').css('padding', '10px 0 0 0');
      floatingToc.css('padding', '0px 10px 10px 10px');
      floatingToc.removeClass('floating-toc-ani');
      }

      setTimeout(function(){
      $('#toc-body').slideToggle(300,'linear', function() {
      if(title.text() === "접기") {
      floatingToc.css('transition', '');
      title.text("펼치기");
      floatingToc.css('padding', '0');
      $('#toc-title').css('padding', '10px 10px 7px 10px');
      floatingToc.addClass('floating-toc-ani');
      } else {
      title.text("접기");
      }
      });
      },200);
      }
      $('#toc-title').on('click', function(){
      clickTitle();
      });

      //목차 항목 클릭
      $('#toc-body').find('a').on('click', function(){
      setTimeout(function(){
      checkPosition();
      }, 200);
      });

      clickTitle();
      setTimeout(function(){
      if($('.tt_article_useless_p_margin').offset().left < $('.floating-toc').width() + 40) {
      clickTitle();
      }
      }, 500);

      setTimeout(function(){
      safeFlag = true;
      }, 1100);
      } else {
      checkPosition();
      }
      } else {
      $('#toc-title').off('click');
      bookToc.append(floatingToc.find('#toc'));
      floatingToc.find('div').remove();
      floatingToc.removeAttr('style');
      floatingToc.css('display','none');
      $('#toc').find('a').removeAttr('style');
      }

      }
      </script>


      몇번 손대봤는데 변함이 없는데 어떻게 옮겨야 할까요 ㅠㅠ;;;
      답글

    •  . 2021.06.28 20:51 신고

      .entry-content p 말씀이신가요??? 볼드로 안되있는데... html부분인건가요??
      답글

    • 햄스타69 2021.08.13 18:39 신고

      안녕하세요 개발자님 너무 좋은 컨텐츠라 하루종일 적용해보며 공부하고있습니다.
      다만 제가 적용했을때 문제가 발생하는데요 ㅠㅠ 플로팅 목차가 보이고 다시 맨위에 있는 목차 목록으로 가면 목차목록이 찌부짜부되어서 게시글 영역까지 넘어와 방해합니다. 아무리 코드를 하나하나 봐도 어느부분이 잘못된건지 모르겠어서 고민하다 댓글로 문의해봅니다..

      또한 맨마지막 목차의 경우는 위치에있을때 글씨가 Bold처리되는게 정상작동 되지 않습니다.... 그리고 모바일에서는 목차가 아예 정상 작동이 안되더라구요...

      https://hamstar69.tistory.com/7입니다 04 기본타입글만 목차를 적용하였는데 혹시 한번 도와주실수있나요? ㅠㅠ
      답글

      • 햄스타69 2021.08.17 14:27 신고

        방법이 없는걸까요?..

      • 엇 죄송해요 확인을 못했었네요 ㅠ

        bookToc.css('width',bookToc.width()+'px'); // 목차 박스 크기에 이상 있으면 제거하세요
        bookToc.css('height',bookToc.height()+'px'); // 목차 박스 크기에 이상 있으면 제거하세요

        여러가지를 봐야 알겠지만 일단 이 부분을 한번 제거하고 테스트 해보세요

      • 햄스타69 2021.08.17 14:58 신고

        앗 답변감사합니다. 말씀해주신대로 제거했을때는 별다른 변화가 없어서
        추가로 밑에있는 코드중 /*bookToc.css('height', bookToc.height());*/ 코드를 주석처리하니 전자에있던 오류는 수정이 완료되었습니다!! 감사합니다. 하지만 맨마지막 목차 Bold처리는 아직도 정상작동 하지 않습니다. ㅠㅠ

      • 일단 모바일 문제는 관리자페이지에서 꾸미기 > 모바일 메뉴로 가셔서 티스토리 모바일웹 자동 연결을 '사용하지 않습니다'로 설정하고 보시면 되구요.

        bold 문제는 직접 테스트해 봐야 정확히 알려드릴 수 있을거 같은데 일단 짐작가는 부분을 말씀드려 볼게요. checkPosition() 함수에서 if(i < titleList.length-1) 부분을 if(i < titleList.length-2)로 바꾼 다음 해보세요~

        말씀하신 부분은 본문에 수정해 놓았습니다 ㅎ

      • 햄스타69 2021.08.17 15:35 신고

        와 아미넴님 진짜 천재세요 저는 이틀꼬박 계속 코드보면서 어디가 문제인지 계속 찾았는데 ㅠㅠ 더 열심히 공부해야겠어요! 모든 문제가 해결되었습니다. 너무 감사합니다 💙💚

      • 제가 좀 일찍 봤다면 삽질 시간을 줄여드릴 수 있었을텐데 ㅠ 하필 햄스타님 댓글을 놓쳤었네요~
        블로그 보니 컴퓨터공학 전공이시거나 그쪽 공부하시는 거 같은데 반갑습니다 ㅎㅎ

      • 햄스타69 2021.08.17 15:55 신고

        아니예요~ 뭔가 모르는걸 물어봤을때 알고있는사람이 있다는것만으로도 너무 든든합니다! 전공을 한사람이긴 합니다만 이제 처음 블로그를 하다보니까 HTML은 잘 모르는거 투성이네요 ㅠㅠ 저도 너무 반갑습니다^^

      • 저도 사실 웹쪽은 한지 얼마 안 돼서 부족하지만 모르는건 언제든 물어보세요 ㅎㅎ

      • 햄스타69 2021.08.17 17:57 신고

        넵 알겠습니다 ^^ㅎㅎ

    • 만땅이 2021.08.18 13:52 신고

      아미넴님 덕분에 많은 것을 시도해볼 수 있게 되었습니다! ㅎㅎ
      목차적용 이후에 플로팅을 해보려고하는데 어렵네요..
      천천히 따라했는데 작동하지 않네요..
      기존 목차생성 <script> ~ </script> 사이에 내용을 모두 업데이트 해주었는데 잘못된 방법일까요?
      ( 적용페이지 링크 : https://linda-suuup.tistory.com/75 )
      답글

      • 안녕하세요. 스킨 문제같습니다. 스킨 구조를 몰라서 정확한 판단은 어렵지만 메인 페이지 외에서는 디버깅도 안걸리는걸 보니 뭔가 장치가 되어 있는 것 같아요. 꼭 그 스킨을 사용하고 싶으시다면 외부 js파일을 하나 만들어서 링크를 걸든지 해야할거 같은데 코딩을 해본적 없으시다면 쉽지는 않을 겁니다.

    💲 추천 글