정보/블로그 운영팁

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

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

목차를 넣고 싶긴한데 글 쓸 때마다 매번 수작업으로 만든다면 상당히 번거롭겠죠.

그래서 jQuery 플러그인 Table of Contents(TOC) 이용하여 자동으로 넣는 방법을 소개합니다.

 

저는 제목1, 제목2로 작성한 부분만 목차로 가져오도록 만들어 보았습니다.

 

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

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

테스트 완료 스킨) Book Club, Odyssey, Letter, Poster, #1, 고래스킨4.0

 

추천 제안) 미넴 스킨을 적용하시면 고급스러운 목차를 빠르게 사용할 수 있습니다!

 

친효 스킨, 고래 스킨 뒤를 이을 티스토리 무료 스킨 제작 프로젝트, 미넴 스킨 소개 및 설치 방법

 

친효 스킨, 고래 스킨 뒤를 이을 티스토리 무료 스킨 제작 프로젝트, 미넴 스킨 소개 및 설치 방

기본 제공 스킨을 나름대로 고쳐 쓰다가 만족하지 못하고 그냥 새로 만들었습니다. 여태까지 블로그를 하면서 적용한 많은 기능들을 대부분 포함하였으니 누군가에게는 상당히 유용한 스킨이

sangminem.tistory.com

 

자주하는 질문)

1. 모바일에서 목차가 안 나오는데 어떻게 하나요?

티스토리 자체 모바일 스킨을 사용하셔서 그렇습니다. 이 경우 사용하는 스킨에 따로 적용한 모든 기능이 무시됩니다. 꾸미기 > 모바일 > 티스토리 모바일웹 자동 연결을 사용하지 않습니다 로 설정하시면 해결 됩니다.

 

목차

    jQuery TOC 플러그인 업로드

    다음 자바 스크립트 파일을 다운받습니다.

    jquery.toc.min.js
    0.00MB

     

    관리 페이지 > 꾸미기 > 스킨 편집 > html 편집 > 파일업로드로 이동합니다.

     

    추가 버튼을 클릭합니다.

    다운받은 자바스크립트 파일을 업로드 합니다.

     

    다음과 같이 보이면 성공적으로 업로드 된 것입니다.

     

     

    스크립트 적용

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

     

    html 편집을 클릭 합니다.

     

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

     

    다음과 같이 작성합니다.

    <script src="./images/jquery.toc.min.js"></script>
    <script>
        // 목차 생성
        $(document).ready(function() {
            $("#toc").toc({content: ".tt_article_useless_p_margin", headings: "h2,h3,h4"});
        });
    </script>

    작성한 글(tt_article_useless_p_margin 클래스 내부) 제목1,2(h2, h3) 태그에만 목차를 적용하겠다는 의미입니다.

    +내용 추가 (2020.12.23)

    제목3을 원하시는 분이 계셔서 headings에 h4를 추가하였습니다.

    +내용 추가 (2021.02.14)

    Odyssey 스킨을 사용하시는 분은 tt_article_useless_p_margin을 article-view으로 바꿔 주시기 바랍니다.

    +내용 추가 (2021.04.21)

    #1 스킨을 사용하시는 분들 중 적용이 안 되시는 분은 tt_article_useless_p_margin을 area_view으로 바꿔 주시기 바랍니다.

    +내용 추가 (2021.09.23)

    매거진 스킨을 사용하시는 분은 tt_article_useless_p_margininner_content으로 바꿔 주시기 바랍니다.

     

    주의) 카테고리 플러그인을 쓰시는 분은 h4 태그가 겹쳐 추가적인 작업이 필요하므로 위 코드 대신 아래 코드로 적용해 주세요. 아래 코드는 북 클럽 스킨 기준 입니다.

    <script src="./images/jquery.toc.min.js"></script>
    <script>
        // 목차 생성
        $(document).ready(function() {
            var $toc = $("#toc");
            $toc.toc({content: ".tt_article_useless_p_margin", headings: "h2,h3,h4"});
            
            // 추가된 부분입니다
            if($('.another_category').length > 0) {
                $toc.find('li:last').remove();
            }
        });
    </script>

    이 부분에 대해 궁금하신 점이 추가로 있으시면 댓글 남겨 주세요.

     

     

    스타일 적용

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

     

    목차 및 제목 스타일을 적용해 보겠습니다.

     

    목차 스타일

    먼저 목차 스타일 입니다.

    저는 Depth를 2단계까지만 적용할 예정입니다.

    의견을 반영하여 3단계를 추가하였습니다.

    /* 목차 스타일 */
    .book-toc {
        position: relative;
        width: fit-content;
        border: 1px solid #b0d197;
        padding: 10px 20px 10px 15px;
        z-index: 1;
    }
    .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: 20px;
        color: #000 !important;
    }
    #toc {
        margin-bottom: 0;
    }
    #toc a:hover {
        color: #000;
    }
    #toc ul {
        margin-top: 5px;
        margin-bottom: 0px;
    }
    #toc > li {
        padding-left: 0;
        text-indent: 0;
        list-style-type: disc;
        margin-bottom: 10px;
    }
    #toc > li > a {
        text-decoration:none;
    }
    #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: disc;
        margin-bottom: 0;
        margin-top: 5px;
    }
    #toc > li > ul > li > a {
        font-size: 1em;
        text-decoration:none;
    }
    #toc > li > ul > li > ul {
        padding-left: 10px;
        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: disc;
        margin-bottom: 0;
        margin-top: 3px;
    }
    #toc > li > ul > li > ul > li > a {
        font-size: 0.875em;
        text-decoration:none;
    }

    일단 그대로 적용하시고 마음에 안 드시는 부분은 하나씩 바꿔 보시면 됩니다.

    잘 모르시겠으면 댓글 남겨주세요 ㅎㅎ

    +내용 추가 (2020.12.23)

    제목3을 원하시는 분이 계셔서 스타일을 추가하였습니다.
    +내용 추가 (2021.01.24)

    #1 스킨을 사용하시는 분은 #toc > ... > ul 부분의 padding-left 값을 0으로 하시길 바랍니다.

    +내용 추가 (2021.02.27) 

    고래 스킨 4.0을 사용하시는 분은 #toc > li > ul 부분에 padding-left 값을 0으로 주는 것이 더 깔끔합니다.

     

     

    제목 스타일

    제목1, 제목2, 제목3에 대한 스타일을 적용한 부분입니다.

    /* 글 제목1,2,3 스타일 */
    .tt_article_useless_p_margin h2 {
    	text-align: left;
    	border-left: #517135 12px solid;
    	border-bottom: 1px solid #517135;
    	padding: 3px 0 10px 10px;
    	margin: 30px 0 20px 0;
    }
    .tt_article_useless_p_margin h3 {
    	text-align: left;
    	border-left: #548a25 8px solid;
    	border-bottom: 1px solid #548a25;
    	padding: 3px 0 10px 10px;
    	margin-bottom: 15px;
    }
    .tt_article_useless_p_margin h4 {
    	text-align: left;
    	border-left: #71b932 6px solid;
    	border-bottom: 1px solid #71b932;
    	padding: 3px 0 10px 10px;
    	margin-bottom: 15px;
    }

    이 부분도 적용해 보시고 마음에 안 드시면 하나씩 바꿔 보세요 :)

    +내용 추가 (2020.12.23)

    제목3을 원하시는 분이 계셔서 스타일 추가하였습니다.

    +내용 추가 (2021.02.14)

    Odyssey 스킨을 사용하시는 분은 tt_article_useless_p_margin article-view으로 바꿔 주시기 바랍니다.

    +내용 추가 (2021.04.21)

    #1 스킨을 사용하시는 분들 중 적용이 제대로 안 되시는 분은 tt_article_useless_p_margin area_view으로 바꿔 주시기 바랍니다.

    +내용 추가 (2021.09.23)

    매거진 스킨을 사용하시는 분은 tt_article_useless_p_margin inner_content으로 바꿔 주시기 바랍니다.

     

    목차 서식 등록

    티스토리에서 기본으로 제공하는 메뉴가 없으므로 목차를 적용하려면 서식을 등록해 주는 것이 좋습니다.

     

    관리 페이지 > 콘텐츠 > 서식 관리로 이동합니다.

     

    서식 쓰기 버튼을 클릭합니다.

     

    기본모드 > HTML 모드를 선택합니다.

     

    제목을 적당히 정하고 다음 코드를 작성합니다.

     

    코드는 복사 붙여넣기용으로 제공해 드립니다.

    <div class="book-toc">
      <p>목차</p>
      <ul id="toc"></ul>
    </div>

    이 코드가 작성된 부분에 실제로 목차가 생성 됩니다.

     

    완료 버튼을 클릭합니다.

     

    작성 글에 목차 적용하기

     

    글 에디터에서 ... > 서식을 선택 합니다.

     

    저장한 서식을 불러옵니다.

     

    원하는 위치에 적절히 삽입을 합니다.

     

    글을 작성하면 서식을 삽입한 부분에 목차가 정상적으로 생성되는 것을 볼 수 있습니다.

     

    완전 자동 목차 적용 방법

    일일이 서식 적용하기 귀찮으신 분은 다음 방법을 적용하시기 바랍니다.

     

    티스토리 목차 완전 자동으로 생성하기 (서식 저장 불필요)

     

    티스토리 목차 완전 자동으로 생성하기 (서식 저장 불필요)

    이번에는 서식에서 목차 태그를 끼워 넣는 것 조차 귀찮은 분들에게 추천드리는 방법입니다. 다만 목차는 항상 글 맨 상단에 위치하도록 해야한다는 제약이 있습니다. 필요에 따라 글 시작 후

    sangminem.tistory.com

     

    마무리

    목차를 만들면 글을 읽는 독자의 편의도 향상시킬 수 있고 SEO(검색 엔진 최적화)에도 좋은 영향을 미친다고 하니 될 수 있으면 작성하는 것이 좋을 것 같습니다.

     

    목차를 조금 더 꾸미고 싶으신 분들은 다음 포스팅도 참고 바랍니다.

     

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

     

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

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

    sangminem.tistory.com

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

     

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

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

    sangminem.tistory.com

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

     

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

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

    sangminem.tistory.com

    티스토리 모바일에서 유용한 떠 있는 플로팅 목차 위치 이동 방법

     

    티스토리 모바일에서 유용한 떠 있는 플로팅 목차 위치 이동 방법

    이번에는 플로팅 목차를 드래그 앤 드롭으로 원하는 위치로 이동시키는 기능을 만들건데요. 화면이 좁은 모바일에서 공간을 좀 더 효율적으로 활용하고자 생각하게 되었습니다. 목차가 계속 진

    sangminem.tistory.com

    티스토리 목차 링크 클립보드 복사하기

     

    티스토리 목차 링크 클립보드 복사하기

    목차를 클릭하면 해당위치로 바로 가는 기능까지는 지원이 되어 문제가 없는데, 문득 목차 링크를 클릭 한번으로 복사 가능하면 좋을 것 같다는 생각이 들어서 개발하게 되었습니다. 목차 작업

    sangminem.tistory.com

     

    감사합니다 :)

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

    댓글267

    • 이전 댓글 더보기
    • ㅇㅇ 2021.09.29 13:55

      안녕하세요.
      자동목차 너무 필요한 기능이었는데 정말 감사합니다!

      몇몇 기능을 저에게 맞춰서 수정해서 사용하고 싶은데,
      제가 코딩을 못해서 헤매고있어 조심스럽게 질문드립니다ㅠㅠ

      H3, H4 제목과 이에 포함된 단락을 들여쓰기 하고 싶은데 방법이 있을까요?
      CSS > /* content article */ > .content-article h4 > margin: 15px 0 10px 10px;
      이렇게 변경하면 제목 전체는 들여쓰기가 되던데,
      제목에 포함 된 단락은 그대로라 가독성이 떨어지더라구요.
      H4의 단락을 전체 들여쓰기 하고 싶습니다.

      그리고 자동목차 h3, h4의 스타일의 제목 아래의 얇고 긴 줄을 삭제 가능한지 궁금합니다.
      크롬에서 F12해보니 border-bottom 코드인것 같은데 HTML, CSS 에서 해당되는 코딩 검색해서 삭제해도 변하는게 없네요ㅠㅠ

      또 아래의 사이트 처럼 플로팅 목차에서 H2를 제외한 H3, H4는 접힘상태였다가, H2를 클릭하거나 스크롤 했을때 펼쳐지게 할 수 있을까요?
      details 테그를 쓰려니까 CSS에서 막혀서 어떻게 해야할지 모르겠어요.
      https://www.akhmorning.com/pvp/rival-wings-hidden-gorge/#party-roles
      이렇게 구동하고 싶습니다.

      질문이 많아서 죄송합니다ㅜㅜ
      답글

      • 아미넴 2021.09.29 19:40 신고

        안녕하세요.

        제목 아래 본문까지 들여쓰기 하고 싶다는 말씀인거면 완전 다른 얘기입니다. 일반적인 css로 구현은 불가능할 것 같고 자바스크립트를 이용한 복잡한 코딩이 들어가야 합니다.

        아래 줄은 css 중 border-bottom: 1px solid #548a25; 부분을 제거하시면 됩니다.

        스크롤 시 목차 펼쳐지는 기능도 코딩이 들어가야 하는 부분이라 간단히 말씀드리기 어렵습니다.

        감사합니다.

      • ㅇㅇ 2021.09.30 04:44

        친절한 답변 정말 감사합니다!!

    • 생활지식바이블 2021.10.22 10:15

      관리자의 승인을 기다리고 있는 댓글입니다
      답글

    • 익명 2021.10.28 19:12

      비밀댓글입니다
      답글

      • 아미넴 2021.10.28 19:20 신고

        글 작성하실 때 에디터에 있는 제목1, 2, 3을 넣으시면 그 부분을 자동으로 인식하여 목차 서식 부분에서 목차를 생성해 주는 원리입니다!
        이해가 잘 안 되시면 글 차근차근 한 번 다시 읽어보세요~

      • _양승현 2021.10.28 19:31

        관리자의 승인을 기다리고 있는 댓글입니다

    • 익명 2021.11.01 20:09

      비밀댓글입니다
      답글

      • 아미넴 2021.11.02 01:16 신고

        제 생각엔 css 보단 목차 서식을 확인해 보셔야할거 같습니다
        이해가 어려우시다면 적용한 글 하나 알려주시면 봐드릴게요~

      • 익명 2021.11.06 20:37

        비밀댓글입니다

      • 아미넴 2021.11.07 09:29 신고

        글머리 수정은 간단하지 않습니다. 다음 글 참고하시면 되구요.
        https://sangminem.tistory.com/319
        줄 간격도 스킨마다 수정 포인트가 달라서 간단히 말씀드리기가 어렵습니다 ㅎ

    • 익명 2021.11.12 09:18

      비밀댓글입니다
      답글

    • 애리포터 2021.11.15 15:11 신고

      미넴님 스킨 잘 쓰고 있습니다. 이 글 읽고 목차도 넣어보려고요.
      항상 좋은 정보 감사합니다ㅎㅎ
      답글

    • 익명 2021.12.29 13:29

      비밀댓글입니다
      답글

      • 아미넴 2021.12.30 11:19 신고

        네 포스터 스킨도 테스트를 완료했던 스킨이긴한데 안 되시면 확인할 수 있는 글 주소 남겨주시면 봐 드릴게요~

    • HunAlexander 2022.01.09 17:31 신고

      단락 공백 설정했던 이전글에는 적용할 수 없나요?
      답글

      • 아미넴 2022.01.09 19:55 신고

        저도 예전에는 단락 공백에 의한 클래스가 별도로 생기는지 모르고 tt_article_useless_p_margin 클래스를 사용하였지만 대체 가능한 다른 클래스 또는 아이디로 바꾸시거나 클래스나 아이디를 적절히 새로 추가하셔도 될 것 같습니다.
        직접 하시기 어려우시면 확인할 수 있는 글 주소 하나 남겨주시면 봐드릴게요~

      • HunAlexander 2022.01.09 20:05 신고

        엌 싹다 새로 썼는데 방법이 있었군요.. 눈물..
        제가 웹코딩 잘몰라서 ㅠ
        CSS에서 수정하는 건가요?

      • 아미넴 2022.01.10 19:10 신고

        스타일을 꾸미는건 아니라서 css에 적어야 할 코드는 없어 보이고 html 편집에서만 수정하면 될 것 같습니다~

      • HunAlexander 2022.01.11 11:25 신고

        감사합니다!

    • 페트론 2022.01.15 20:05 신고

      감사합니다!
      답글

    • 익명 2022.01.16 11:55

      비밀댓글입니다
      답글

      • 아미넴 2022.01.16 18:32 신고

        관리자 페이지의 스킨 편집 > html 편집에서 css 탭에 아무 곳에나 넣으시면 됩니다.
        판단이 잘 안 되신다면 맨 아래 붙여 넣으시길 바랄게요~

    • 익명 2022.01.20 15:47

      감사합니다, 그런데 h2 h3 아무것도 쓰지 않아도 목차 박스는 생성되던데 이는 어쩔수 없는건가요?
      답글

    • 익명 2022.01.21 00:28

      아 댓글을 잘못 달았네요, 서식이 아니라 자동 목차 생성 했습니다. 소제목이 없는 글을 쓸 때도 목차 박스가 생기는데
      원래 그런걸까요? 적용을 잘못한걸까요?
      답글

      • 아미넴 2022.01.21 21:26 신고

        네 뭔가를 잘못한 것 같은데 봐야 알 수 있을 듯 합니다.
        도움을 원하시면 확인할 수 있는 글 하나 알려주시면 봐 드릴게요~

    • 티스토리 초보 2022.02.02 07:02

      안녕하세요 운영님 티스토리 5일차 초보입니다.
      목차는 만들면 좋다고 해서 따라해서 잘 적용중입니다 감사합니다.
      혹시 목차 글자크기는 따로 변경이 안되나요?! 이리저리 찾아봣는데도 ㅠㅠ
      제목 글자 크기따라가는거 같아서요..ㅠㅠ
      답글

      • 아미넴 2022.02.02 21:32 신고

        안녕하세요~ 목차 스타일 부분에서 font-size 라고 되어있는 부분의 숫자 값을 조금씩 바꿔보시면 될 것 같습니다 ㅎ

    • 익명 2022.02.03 11:02

      비밀댓글입니다
      답글

      • 익명 2022.02.03 11:15

        비밀댓글입니다

      • 아미넴 2022.02.03 12:15 신고

        안녕하세요~ 플러그인 업로드가 제대로 안 된 것 같습니다. jQuery TOC 플러그인 업로드 부분을 다시 한 번 확인해 보세요.
        아니면 script 태그 위치 문제일 수도 있으니 설명에서 언급한대로 body 태그의 마지막 부분에 입력해 보세요.

      • KKUING 2022.02.03 15:25 신고

        알려주신데로 했는데 스킨에 TOC기능이 포함되어있어 충돌이 나는것 같습니다..ㅠㅠ

      • 아미넴 2022.02.03 16:37 신고

        아 이미 목차 기능이 있는 스킨이었군요. 그렇다면 기존 스킨의 목차 로직을 먼저 제거하거나 기존 목차 기능을 활용하여 수정을 해야할듯 싶은데 코딩을 안해보셨다면 직접하시긴 좀 어려울 수도 있어보입니다 ㅠ

    • 익명 2022.02.06 05:58

      비밀댓글입니다
      답글

    • 애드센드 2022.02.19 20:04 신고

      안녕하세요.
      목차 만들기에서 잘 실행이되는데요, 코드 공부하려고 비쥬얼 스튜디오 코드에서 똑같이 해 봤는데, 목록만 생성이 되지 않습니다. 비쥬얼 스튜디오 코드에 무언가 추가로 설치를 해야 하는지요? 여줘볼때가 없어서..ㅠㅠ
      답글

    • 청야에몽 2022.03.04 00:03 신고

      안녕하세요. 해당 글을 따라해봤는데 제목을 설정한 곳에 녹색 선과 맨 앞에 조그만한 녹색 블록, 그리고 목차가 생기는건 됩니다. 그런데 목차 안에도 따로 제목이 생성되어야 하는데 생기지가 않네요.. 혹시 예상이 되는 이유라도 있을까요??ㅠ
      답글

      • 아미넴 2022.03.04 17:22 신고

        목차 생성 라이브러리가 제대로 적용이 안 된 듯 싶습니다. 원인은 너무 다양해서 말씀하신 내용만으로는 파악이 어렵습니다. 도움을 원하시면 현상을 파악할 수 있는 글 주소 하나 남겨주세요~

    • Shina Itsuki 2022.05.01 21:12 신고

      안녕하세요. 모바일에 목차 적용이 안되서 꾸미기 > 모바일 > 티스토리 모바일웹 자동 연결을 사용하지 않습니다 로 설정했는데도 그대로 모바일에서 목차 생성이 되지 않습니다. 어떻게 해야 하나요?
      답글

      • 아미넴 2022.05.01 21:15 신고

        안녕하세요. 잘못한 부분이 있으실 겁니다. 증상 확인할 수 있는 글 주소 남겨주시면 확인 한 번 해드릴게요~

      • Shina Itsuki 2022.05.01 21:23 신고

        https://itsukiblog.tistory.com/2
        미리보기에서는 목차가 일반 텍스트로 표시됩니다. 또 지금은 목차 등 색이 초록색으로 보이는데 다른 색으로 바꾸는 방법은 무엇인가요?

      • 아미넴 2022.05.01 21:26 신고

        말씀하신 글에서는 잘 되고 있네요.
        색상을 바꾸려면 목차 스타일에 작성된 내용에서 color나 background-color 부분을 원하는 색상으로 수정하시면 됩니다. css는 간단히 말씀드릴 수 있는 부분은 아니므로 공부 좀 하셔야 할 거예요.

      • Shina Itsuki 2022.05.01 22:44 신고

        티스토리 모바일 앱에서는 목차 텍스트로먼 표시되는데, 그건 어쩔 수 없나요?

      • 아미넴 2022.05.01 22:46 신고

        네 앱에서는 기본 스킨으로만 적용돼서 어쩔 수 없습니다.

    • 망또띠 2022.05.11 22:55 신고

      제목1 제목2 로 글을 작성하는데 선생님처럼 초록박스가 안뜨고 그냥 글이 써져 인식이 안되는데 무엇을 잘못한걸까요
      답글

    • 익명 2022.05.14 11:16

      비밀댓글입니다
      답글

    💲 추천 글