loading

친절한효자손 취미생활

이 방법은 기존 친효애드온에서 한 단계 더 업그레이드가 진행된 방법 입니다. 본문의 H1~H4 태그를 스크립트로 불러오고 자동으로 ID값을 할당하여 자동으로 목록을 생성하게 됩니다. 기존 친효애드온의 목록 리스트 모듈은 완전 수동이었습니다만 이 방법을 사용하면 반자동으로 편리하게 사용 할 수 있습니다. 아래는 본문에서 소개한 방법으로 생성된 목차 리스트 입니다. 친효스킨 1.175 이상 버전 사용자분들은 세팅할 필요는 없습니다. 바로 사용하시면 됩니다. 이분들은 HTML 사용 방법을 참조하세요.

 

목차

     

 

유튜브 영상 설명

텍스트 설명만으로는 조금 어려운 부분이 있어서 급하게 유튜브 동영상으로 남겨보았습니다. 말투나 선풍기 바람소리(?)는 좀 양해 부탁드리겠습니다. 라이브로 한다는게 상당히 어렵네요... 텍스트 작성은 자신 있는데 말하는건 어휴~ 아직은 어려운 영역 입니다. 많이 하다보면 나아지겠죠? (웃음)

 

필요한 코드 다운로드

본문에서 필요한 모든 코드가 담긴 아래의 텍스트 파일을 먼저 다운로드 받아 주시기 바랍니다.

 

TOC.txt
0.02MB

 

Github jQuery.toc.zip 다운로드

아래의 링크를 통해서 필요한 제이쿼리 스크립트 파일을 다운로드 받습니다.

 

 

다운로드 받은 파일을 압축 풀면 jquery.toc.min.js 파일이 들어 있을 겁니다. 이 파일을 자신의 스킨 파일 보관함에 업로드 합니다.

 

관리자 > 꾸미기 > 스킨편집 > HTML 편집 > 파일업로드 > 추가로 들어가서 파일을 올리시고 적용 버튼을 눌러주면 됩니다.

 

jQuery Script <head> 세팅

먼저 제이쿼리를 세팅합니다. 친효스킨의 HTML에 있는 <head> 안쪽에 아래의 코드를 삽입 합니다.

 

<!-- TOC 스크립트 -->
<script type="text/javascript" src="./images/jquery.toc.min.js"></script>

통상적으로 </head> 바로 위에 삽입하면 아무 문제가 없습니다. 참고로 친효스킨에서도 </head> 바로 위에 넣었습니다.

 

jQuery Script <body> 세팅

이번에는 <body>용 TOC 제이쿼리 스크립트를 삽입합니다. 아래의 코드를 붙여넣기 해줍니다.

 

<!-- TOC BODY 스크립트 -->
<script type="text/javascript">
    $(function() {
        $("#toc").toc({
            content: "#toc-contents",
            headings: "h1,h2,h3,h4",
            numberate: true,
            autoId: true
        });
    });
</script>

위치는 자신의 스킨의 </body> 바로 위쪽에 붙여넣기를 하시면 됩니다.

 

CSS 세팅

사용하는 스킨의 CSS에 빈 공간을 확보하고 아래의 코드를 추가합니다. 코드가 조금 깁니다.

 

/* 친효애드온 : 본문 목차 목록 모듈 (TOC) 시작 */
div.rgyList,
div#rgyTOC {
    position: relative;
    padding: 10px;
    border-top: 10px solid #FF5544;
    border-top: 10px solid var(--mouseHoverColor);
    background-color: #e5e5e5;
}

div.rgyList::after,
div#rgyTOC::after {
    position: absolute;
    content: "<LIST>";
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    font-size: 1.3em;
    font-family: 'Nanum Pen Script';
    font-style: italic;
    color: #FF5544;
    color: var(--mouseHoverColor);
    letter-spacing: 5px;
}

/* ======== (중략) ======== */

#listBtn > a:hover {
    background-color: #f00;
}

@media (min-width: 1000px) {
    #listBtn {
        right: 10px;
        bottom: 300px;
        margin: 5px;
        transform: scale(1);
        -webkit-transform: scale(1);
    }
}
/* 본문 목차 끝 */

이 CSS 스타일 코드는 기존 "친효애드온 - 목차 리스트 모듈"에서 그대로 계승해서 세팅되었습니다. 기존 친효애드온 목차 스타일과 똑같습니다. 따라서 기존 목차 스타일을 위의 CSS 코드로 업데이트 해주시면 됩니다. 다음은 다른 CSS 코드 부분 입니다.

 

/* ========== 새로운 글쓰기 에디터 시작 ========== */
/* 티스토리 본문 이미지 (새로운 글쓰기 에디터) */
.tt_article_useless_p_margin > figure.imageblock.alignCenter,
.tt_article_useless_p_margin > div#toc-contents > figure.imageblock.alignCenter {
    margin: 25px auto 10px !important;
}

/* ========== (중략) ========== */

.tt_article_useless_p_margin > figure.fileblock a:hover div.desc div.size,
.tt_article_useless_p_margin > div#toc-contents > figure.fileblock a:hover div.desc div.size {
    background-color: #FF5544 !important;
    background-color: var(--mouseHoverColor) !important;
    filter: brightness(0.8) !important;
    -webkit-filter: brightness(0.8) !important;
    -moz-filter: brightness(0.8) !important;
    -ms-filter: brightness(0.8) !important;
    -o-filter: brightness(0.8) !important;
}
/* ========== 새로운 글쓰기 에디터 끝 ========== */


/* ====== (이후 아래에 있는 CSS 코드 포함) ====== */
/* =================== (중략) =================== */

#contents .article .rgyImg-File > p > span.imageblock > a img,
#contents .article .tt_article_useless_p_margin > p > span.imageblock > a img,
#contents .article .tt_article_useless_p_margin > div#toc-contents > p > span.imageblock > a img,
#contents .article .tt_article_useless_p_margin > .rgyImg > p > span.imageblock > a img,
#contents .article .tt_article_useless_p_margin > .rgyImg > .rgyImg-File > p > span.imageblock::after {
    display: none !important;
}
/* 여기까지 CSS 교체 부분 */

나머지 CSS 코드 또한 기존 친효스킨의 동일한 CSS 코드를 찾아서 모두 교체해줘야 합니다. 번거롭겠지만 꼭 이렇게 해주셔야 합니다. 여기까지 진행하셨으면 이제 세팅은 모두 끝났습니다. 이제부터는 사용하는 방법에 대해 알아보겠습니다.

 

글 작성 시 HTML 모드 사용 방법

제목에서 언급했듯 반자동 입니다. 따라서 일부 코드는 수동으로 사용을 해줘야 합니다. 첨부파일의 텍스트 파일에 보시면 다음 부분이 존재 합니다.

 

<!-- 친효스킨 : 목차 바로가기 버튼 시작 -->
<div id="listBtn">
    <a href="#rgyTOC">목차</a>
</div>
<!-- 목차 바로가기 버튼 끝 -->

이 태그는 TOC 목차 리스트로 바로갈 수 있는 아이콘 태그 입니다. 친효스킨을 기준으로 제작되었으며 친효스킨의 경우 아래로 스크롤을 내리면 오른쪽 하단에 숨겨진 아이콘들이 나타나는걸 확인할 수 있을 겁니다.

 

바로 저 아이콘 입니다. 원래는 회색 아이콘 4개만 나타나는게 정상이지만, 방금 소개해드린 목차 바로가기 태그를 본문에 수동 삽입하면 해당 문서에 대해서만 저렇게 목차 아이콘이 나타나게 됩니다. 이 버튼을 누르면 TOC 목록 리스트로 바로 이동할 수 있습니다. 이 태그는 본문의 아무 위치에나 삽입해도 상관 없습니다만 통상적으로 깔끔하고 복잡하지 않게 진행하기 위해서 본문의 맨 위에 삽입하는걸 추천 합니다.

 

그 다음으로는 다음의 HTML 태그를 본문에 삽입합니다.

 

<div id="toc-contents">

이 태그는 본문의 h1~h4 태그가 사용된 소제목들을 불러오는 기능을 가지고 있습니다. 따라서 목차 버튼 태그 바로 다음에 삽입하는걸 권장 합니다. 그런데 HTML 구조를 이해하셨다면 저 태그로만 단독으로 사용하는건 오류를 불러오게 됩니다. 왜냐하면 끝맺음을 하는 </div> 태그가 없기 때문입니다. 따라서 본문 작성을 다 마무리 짓고 반드시 HTML 모드에서 마지막 부분에 </div>를 수동으로 입력을 해줘야 합니다. 이 점을 꼭 기억해 주시기 바랍니다.

 

만약 이 태그를 서식으로 만들어 사용하게 된다면 애석하게도 서식을 꾸리고 본문에 그대로 삽입하면 완성형 태그로 들어갑니다. 즉 <div id="toc-contents"> 뒤에 자동으로 </div>가 붙어 있을 겁니다. 사용자가 임의로 입력을 하지 않았는데도 말입니다. 구형 및 신형 글쓰기 에디터 모두 동일한 증상이 발생함을 확인했습니다. 따라서 서식으로 만들어 사용한다면 반드시 끝의 </div>를 본문의 맨 하단으로 옮겨줘야 합니다. 중요합니다.

 

이제 본문의 TOC 목차 리스트를 생성할 태그 입력만 남았습니다. 아래의 태그를 본문의 원하는 위치에 삽입합니다.

 

<!-- TOC 시작 -->
<div id="rgyTOC">
  <ul id="toc">&nbsp;</ul>
</div>
<!-- TOC 끝 -->

여기서 별도로 수정할 부분은 없습니다. 이 태그는 실제 TOC 목차가 보여지게 될 태그 입니다. 따라서 본문의 어디에 목록 리스트를 출력시킬지를 정한 후 해당 위치에 이 태그를 붙여넣어야 합니다. 그런데 신형 글쓰기 에디터에서는 버그가 있습니다. 글쓰기 모드에서 기본 모드와 HTML 모드를 왔다 갔다 하면 <ul id="toc"></ul> 태그가 사라집니다. 따라서 모드 변경 후 번거롭더라도 다시 재입력을 해줘야 합니다.

 

현재 보시는 이 문서의 경우에서는 맨 위의 문장 다음에 TOC 태그가 삽입되었습니다. 즉 이 글에서의 html 구조는 다음과 같습니다.

 

<!-- 친효스킨 : 목차 바로가기 버튼 시작 -->
<div id="listBtn">
    <a href="#rgyTOC">목차</a>
</div>
<!-- 목차 바로가기 버튼 끝 -->
<div id="toc-contents">
    <p>이 방법은... (중략) ...본문에서 소개한 방법으로 생성된 목차 리스트 입니다.</p>
    <p>&nbsp;</p>
    <!-- TOC 시작 -->
    <div id="rgyTOC">
        <ul id="toc">&nbsp;</ul>
    </div>
    <!-- TOC 끝 -->
    <p>&nbsp;</p>
    <!-- 중략 -->
    <p>여기서 별도로 수정할 부분은 없습니다... (중략) ...즉 이 글에서의 html 구조는 다음과 같습니다.</p>
</div>

이런 구조로 작성이 된 것 입니다. 중요한건 본문의 맨 마지막에 반드시 </div> 로 마무리를 지어야 한다는 것 입니다. 그래야 본문을 toc-contents로 완전히 감싸는 구조가 되기 때문 입니다. 따라서 본문의 반자동 TOC 목차 모듈에 대한 서식을 크게 2개 정도 만들어두면 좋을 것 같습니다. 하나는 목차 버튼과 toc-contents에 대한 div 태그의 시작이며 마지막 하나는 TOC 관련 태그 입니다. 그래서 목차버튼 서식을 먼저 불러오고, 그 다음에 원하는 위치에 TOC 목차 리스트 태그를 불러오면 편리하게 이용이 가능 합니다. 물론 이 때도 마무리는 반드시 </div>로 닫아줘야 한다는 것 잊어서는 안 됩니다. 끝.

공유하기

facebook twitter kakaoTalk kakaostory naver band

댓글

비밀글모드

  1. 저는 H2 태그가 2개 이상인 모든 글에 자동으로 목차가 표시되도록 설정하여 사용하고 있습니다.
    2020.06.23 09:23 신고
    • 안녕하세요, 저도 자동으로 할까 싶었는데 굳이 모든 글에 목록이 들어갈 필요성을 못느껴서 번거롭지만 목록이 꼭 필요한 문서에만 수동 적용 중 입니다. :)
      2020.06.23 16:31 신고
  2. 친효스킨 잘 사용하고 있습니다. 설명해주신대로 HTML과 CSS 변경해서 적용해봤는데, list 항목은 제대로 나오는데요. 위에 설명한대로 주황색 점선이 나오지 않는데요. 그리고,오른쪽 하단에 목차부분에 마우스 올렸을때 목차라는 텍스트가 나오고 아이콘은 보이지 않습니다.
    제가 빠뜨린 부분 있을까요?

    그러니까 정리해보면,
    1. list부분 텍스트 아래 점선 라인 안보임.
    2. 오른쪽 하단 목차 아이콘 안보임.
    2020.07.30 22:37 신고
    • 친효스킨 2.0은 이 기능이 기본 세팅되어 있어서 본문 글쓰기시 수동으로 적용만 하면 됩니다. CSS며 스크립트가 다 세팅되어 있습니다. 지금 보니까 목차 버튼도 정상적으로 출력이 안 되고 있네요.
      2020.07.30 22:44 신고
  3. 안녕하세요. 친효스킨(v2.0) 잘 적용하여 쓰고 있습니다. 댓글들을 읽어보니 친효스킨 2.0은 본문 글쓰기시 수동 적용만 하면 된다고 하셨는데 다른 부분들은 잘 적용되는데 목차 버튼이 정상적으로 작동하지 않습니다. 어떤 문제가 있는걸까요?
    2020.10.18 23:30 신고
    • 안녕하세요, 어디가 아파서 오셨나요? 근데 환자가 안보이네요? 환자가 없으니 진찰을 못하겠어요. 환자를 보여주셔야 합니다.
      2020.10.19 05:52 신고
  4. 안녕하세요. 친절한효자손님. 죄송합니다. 제가 포스팅을 지워버려서.. 환자가 사라져버렸네요.
    지금 증상은 카테고리가 잘 적용되긴 하는데 우측 목차 버튼을 클릭하면 카테고리가 아닌 다른 곳으로 화면이 이동합니다.
    혹시 시간 되실때 진찰 한번만 부탁드립니다 ㅠㅠ
    2020.10.19 22:32 신고
    • 안녕하세요. 댓글을 이제서야 확인했습니다. 죄송해요. 혹시 환자주소좀 알 수 있나요?
      2020.11.24 18:20 신고
  5. 이렇게 편하게 만드는 방법이 있는지 처음알았습니다 ㅎ
    목차를 만들고 싶긴해서.. 하이퍼링크 줘서 하나하나 주는걸 어디서 봐가지고
    그걸로 하다가 힘들어서 안하고 있었는데 ㅠ ㅎ

    덕분에 또 하나 배워갑니당!!
    2020.11.24 18:13 신고
  6. 저 TOC만드는 부분이 너무 이해가 안가서 문의좀 드려도 될까요?

    지금 계정의 블로그는 아니고 원래 기존에 쓰던 블로그에 TOC를 다른걸 쓰고 있었습니다.
    <div id="toc">
    <p><span style="background-color: #9feec3;"><b>목차</b></span></p>
    </div>
    <div id="toc-contents" class="toc-contents">
    위 코드로 호출을 해서 사용했구요..

    1. 친효님걸로 수정하려고 한다면 해당 호출코드를 전부다 바꾸는건 현실적으로 무리인데 방법이 없을까요?

    2. 그리고 친효님이 알려주신대로 css코드를 바꾸던 중 신에디터 글쓰기? 교체작업부분이 너무 이해가 안됩니다 한번에 긁어서 복붙하면 되는건가요...?

    3. html코드에 /head, /body 부분위에 붙여넣고 css 교체작업부분만 넣으면 목차가 안나오거나 호출은 되지만 서식이 전혀 없이 글만 출력이되는데 방법이 없을까요..

    너무 질문이 많아서 죄송합니다.ㅠㅠ
    2020.12.07 17:17 신고
    • 비밀글 해제 부탁합니다.
      2020.12.07 18:17 신고
    • 앗 죄송해요 비밀글 해제했습니다~
      2020.12.07 18:50 신고
    • 1. 이 방법은 수동이기 때문에 기존에 다른 방법을 썼다면 당연히 수동으로 싹 다 바꿀수밖에 없어요.

      2. CSS 부분은 그냥 싹다 붙여넣기 한다고 생각하시면 됩니다. 본문의 내용은 친효스킨을 기준으로 설명되어 있습니다.

      3. 세팅까지 모두 정상적으로 적용했다면 최종적으로 본문에 수동 적용해서 사용해야 합니다. 본문 동영상까지 같이 시청하시어 다시 한 번 적용시켜 보시기 바랍니다.
      2020.12.07 18:53 신고
    • 넵 수동인건인지하고있습니다 호출만 코드변경을하면안되는건가해서 질문을드렸어요.. ㅠㅠ수동으로 수정하기에는 저품이무섭네여.. 휴 ㅠㅠ css는 전체를복붙하면되는건가요
      2020.12.07 18:54 신고
    • 네. CSS는 전체를 사용해 주시기 바랍니다.
      2020.12.07 18:55 신고
    • 넵 이해했습니닷

      css는 올려주신 파일내에있는것중에 빈칸에 넣는것 제외하고 전체를 교체하면 된다는 말씀이시져?
      답변감사합니다^^
      2020.12.07 18:59 신고
  7. 유튜브랑 글 읽으면서 적용해 보았는데
    자꾸 넣지도 않은 소제목이 들어가는데요.
    진짜 죄송한데 제 블로그 한번 봐주시면 안될까요...ㅠㅠ
    첫번째 글 목록인데
    소제목이 자꾸 들어가요 ㅠㅠㅠ
    흐규ㅠㅠ
    2021.03.03 09:49 신고
    • 태그 잘 못 넣으셨습니다. 이 이상은 댓글로 상담이 어렵습니다.
      2021.03.03 18:21 신고
  8. 그럼 어케 해야될까요 방법이 없나요
    본문에 목차태그를 잘못넣은걸까요 스킨편집에 태그를 잘못넣은걸까요 죄송함미다 ㅜ
    2021.03.03 18:40 신고
  9. 유로교육신청은 어디서 해요?^^
    2021.03.03 18:49 신고
  10. 친효님 안녕하세요.
    귀찮게 해드려서 죄송합니만 한 가지 문의드리고 싶은 것이 있어 댓글 남깁니다 ㅜㅜ

    포스팅 보면서 따라해서 목차를 만들고 잘 적용하고 있는데
    목차 앞에 리스트 효과가 적용 된 것처럼 자꾸 숫자가 붙습니다.
    태그를 잘못 건드린걸까요..?
    2021.06.02 11:45 신고
    • 안녕하세요. CSS에서 다음의 영역을 찾아 삭제해주세요.

      #contents .article li {
      list-style: block !important;
      }
      2021.06.02 11:50 신고
    • 바로 해결했습니다.
      빠르고 정확한 답변 감사합니다 :)
      2021.06.02 11:57 신고
  11. 친효 선생님 도움이 필요합니다.

    /body 라인 위에 코드를 입력 할려고 하니 처음부터 "/body" 태그가 빨간색으로 표시되어 있고 유튜브영상에서처럼 "/s_t3" 코드도 보이지 않습니다.

    영상에선 "/s_t3"와 "/body" 사이에 넣으라 되어 있습니다.

    그렇다면 만약 <!-- TOC BODY 스크립트 --> <script type="text/javascript"> $(function() { $("#toc";).toc({ content: "#toc-contents", headings: "h1,h2,h3,h4", numberate: true, autoId: true }); }); </script>

    이 코드들은 어디로 입력해야 하는건가요? 무엇보다 "/body" 태그가 빨간색으로 나온다는건 어느 코드가 아다리가 맞지 않기 때문에 나타나는 것 아닌가요?

    참고로 /body 태그 빨간색은 친효스킨 처음부터 받았을 때부터 이미 빨간색으로 되어 있었습니다.
    2021.08.01 00:21 신고
    • 스크립트코드는 <head>안에 들어가있어야 합니다. 2.3 버전에서는 빨간색으로 표시된게 맞습니다.
      2021.08.01 00:45 신고
    • 그리고 지금 사용하는 스킨은 마넴스킨 아닌가요? 그건 자동목차가 이미 스킨에 내장되어있는걸로 알고 있습니다. 따라서 본문 내용이 딱히 필요 없어보입니다.
      2021.08.01 00:46 신고
    • 아 그럼 /body 바로 위에다 넣어도 상관 없겠지요? 어떤건 중간에 넣으니 자바 스크립트 순서 오류나서 뒤죽박죽 되는 경우가 가끔 있더군요.
      2021.08.01 00:47 신고
    • 친효스킨으로 교체할려고 세컨드 블로그에서 실험하고 있습니다. 메인 블로그로 실험하면 아무래도 타격이 꽤 있어서... ㅎ
      이전에 친효님께 스킨 비밀번호 받았고 여러가지 테스트하고 있습니다.
      2021.08.01 00:47 신고
    • 친효스킨이 아닌 다른 스킨에서 테스트를 한다는 뜻이죠? 왜냐하면 친효스킨은 이미 본문의 내용이 다 기본 세팅되어있기 때문입니다.
      2021.08.01 00:53 신고
    • 제가 정리를 먼저 드릴게요.

      방금 친효님 질문의 답은 아뇨 입니다. 세컨드 블로그에서 친효스킨님 스킨을 먼저 입히고 거기서 지금 테스트 중이고, TOC 목차를 작동시킬려니 친효님께서 자동목차를 안해놓으셨고 반자동으로 해놓으셨더군요.

      반자동이라면 결국 HTML, CSS를 건들여줘야된다는 것인데 여기서 HTML 코드가 /body가 빨간색으로 되어 있었고 이 위에다 TOC 스크립트를 그대로 넣어도 되냐는 것이 제 목적이었습니다.

      그 다음 /bidy가 빨간색으로 되어 있는 것은 정상이라 답변을 들었고 저의 마지막 결론적인 질문은 /body 위에 TOC 스크립트를 그대로 넣어도 괜찮은가가 제 질문이었습니다.

      친효님 설명서가 95% 모두 기본 작동 된다는 것은 알고 있습니더. 단지 목차 TOC 부분만 수동으로 해줘야 되더군요.
      2021.08.01 00:56 신고
    • 친효스킨 버전이 몇인가요? 2.3이라면 TOC 세팅은 다 되어있습니다. 즉 본문 작성할때만 수동 세팅하면 됩니다. 근데 질문주신건 본문 세팅 부분을 물어보셨으니 당연히 저는 다른 스킨을 사용하시는줄 알았습니다.
      2021.08.01 01:02 신고
    • 아 본문 세팅이 아니고 스킨 세팅이죠.
      2021.08.01 01:02 신고
    • 아 제가 명확하게 못 알려드려서 죄송합니다. 한국말이 이럴 때 어렵네요. 설명서를 보다가 2.3이 자동으로 목차가 적용 되어 있단걸 보질 못해서 제가 직접 HTML과 CSS를 설정해주어야하는 줄 알았습니다. 한번 목차 생성해보고 궁금한 점이 또 있으면 바로 답글 달겠습니다.

      늦은 시간에 항상 고생하시는데 답변 감사합니다.
      2021.08.01 01:04 신고
    • 아 설명서가 아니고 목차 설정 페이지에 1.175 이상은 세팅할 필요가 없다고 나와 있네요. 지금까지 다른걸 보고 삽질하고 있었네요.

      제가 명확히 알지 못한 점 죄송합니다.
      2021.08.01 01:08 신고