친절한효자손 취미생활

친효애드온! 본문 목차 리스트 모듈 (마크1)(TOC 스크립트 X)

블로그/친효애드온
2020. 6. 1. 00:04

본문 목차에 대한 리스트 모듈 입니다. 말 그대로 본문 분량이 많아지는 경우에 요긴하게 사용할 수 있는 모듈 입니다. 이 방법은 현재 널리 알려져있는 TOC 제이쿼리 스크립트를 이용한 방법이 아닙니다. 비록 자동은 아니지만 수동으로 넣음으로서 불필요한 스크립트를 최대한 줄여 속도를 개선했습니다. 어차피 목차라는게 본문 내용이 길어질 때 필요한 경우이고, 티스토리의 모든 문서에 대해서 목차화를 할 필요가 전혀 없다고 판단되어지기 때문에 이렇게 따로 친효애드온으로 모듈을 만들었습니다. 현재 친효스킨 다운로드 페이지와 티스토리 사용법 페이지에 해당 목차 모듈이 적용되어 있으니 한번 직접 방문하셔서 확인해 보시기 바라겠습니다.

 

친효스킨 다운로드 / 사용법 / 업데이트 일지

티스토리 블로그 사용법

 

수동으로 넣는 방법이 번거로우신 분들을 위해서 TOC 스크립트를 통한 반자동 등록 방법을 새롭게 작성했습니다. 아래의 글을 참고하시면 됩니다.

 

티스토리 본문 반자동 목차 목록 (TOC) 리스트 만들기

 

현재 친효스킨 1.17 버전에서는 해당 모듈이 기본적으로 적용되어 있습니다. 다른 스킨을 사용하시는 분들중에서 친효애드온을 사용하고 싶으시면 다음의 절차를 따라주시면 됩니다. 먼저 첨부파일을 다운받아 주시기 바랍니다.

 

친효애드온 - 본문 목차 리스트 모듈 (마크1).txt
0.00MB

 

본문 목차 모듈의 장단점

개인적으로 생각하는 본문 목차 바로가기 모듈의 장점과 단점은 이렇습니다.

 

<장점>

-방문자로 하여금 빠른 정보 열람이 가능함

-본문의 메뉴를 한 눈에 살펴볼 수 있음

<단점>

-본문 중간 애드센스를 건너뛸 가능성이 있음

-문서가 다소 복잡해 보일 수 있음

-글 작성 시간이 늘어남

 

그럼에도 불구하고 저는 장점의 역할이 더 중요하다고 판단되기에 다소 내용이 길고 복잡한 문서일수록 목차를 만들어 두고 있습니다. 무엇보다도 방문자 입장에서 생각해보면 더할나위없이 좋은 기능이기 때문 입니다. 그리고 강좌 콘텐츠의 경우는 어차피 모든 내용을 이해하므로 본문 중간의 자동 애드센스 광고가 게시 상태라면 무조건 한 번은 봐야 합니다.

 

HTML CDN Setting

첨부파일의 1번 부분에 해당됩니다. 먼저 HTML의 <head> 안쪽에 폰트어썸 부트스트랩 CND 링크를 입력해야 합니다.

 

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

이 코드를 스킨의 HTML <head> 안쪽에 붙여넣기를 해주시기 바랍니다. 이 주소는 모듈의 특수 기호를 로드하는데 사용 됩니다.

 

Script Setting

첨부파일 2번 항목 입니다. 마찬가지로 <head> 안쪽에 붙여넣기를 진행합니다.

 

<script>
    $(document).ready(function() {
        // 본문 목차 버튼 //
        $(window).scroll(function() {
            if ($(this).scrollTop() > 100) {
                $('#listBtn').fadeIn();
            } else {
                $('#listBtn').fadeOut();
            }
        });
</script>

이 코드를 그대로 붙여넣기를 하시면 됩니다. 이 스크립트는 친효스킨 기준으로 목차 버튼을 위/아래로 스크롤할때 나타나게하고 사라지게 하는 기능을 담고 있습니다.

 

CSS Setting

이제 CSS의 빈 공간을 확보하여 첨부파일에 있는 3번의 CSS 코드를 모두 붙여넣기 합니다.

 

/* 친효애드온 : 본문 목차 시작 */
.rgyList {
    position: relative;
    padding: 10px;
    margin: 10px 20px;
    border-top: 10px solid #FF5544;
    background-color: #e5e5e5;
}

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

.rgyList > ol,
.rgyList > ul {
    padding-top: 30px;
}

.rgyList li {
    position: relative;
    border-bottom: 1px dashed #FF5544;
    list-style-type: none !important;
}

.rgyList li:first-child {
    border-top: 1px dashed #FF5544;
}

.rgyList li::after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    right: 10px;
    content:"\f078";
    font-family: "FontAwesome";
    font-size: 11px;
    color: #555;
}

.rgyList li:hover a,
.rgyList li:hover::after {
    color: #FF5544 !important;
}

.rgyList li a {
    display: block;
    padding: 0 20px 0 10px;
    font-size: 14px;
    color: #555 !important;
}

/* 본문 목차 버튼 */
#listBtn {
    display: none;
    position: fixed;
    right: -4px;
    bottom: 230px;
    transform: scale(0.7);
    z-index: 9999;
}

#listBtn > a {
    display: block;
    width: 50px;
    height: 50px;
    border: 1px solid #fff;
    border-radius: 5px;
    font-size: 15px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    background-color: #ff5544;
    transition: all 0.2s;
}

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

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

바로 이 부분 입니다. 그대로 모두 복사하시면 됩니다. 여기까지 진행하시면 세팅은 모두 끝났습니다. 이제 본격적인 사용 방법에 대해 안내해 드리겠습니다.

 

HTML 사용 방법 : 본문 목차 만들기

이번 본문 목차 애드온은 수동 방식 입니다. 즉 글을 작성할때마다 수동으로 감싸줘야 합니다. 티스토리 글쓰기 에디터에서 제공하는 기능을 활용하였습니다. 구형과 신형 글쓰기 에디터 모두 동일 합니다. 목차 리스트 기능을 활용하는 방법 입니다. 먼저 본문의 목차를 만드는 과정 입니다.

 

본문 리스트 기능은 바로 이 부분 입니다. 신형과 구형 글쓰기 에디터 모두 지원하는 기능 입니다. 이걸로 목차를 구성합니다. 아래는 예시로 만든 목록 입니다. 목차 리스트의 형태는 아무거나 상관 없습니다.

 

  • 목차 리스트1
  • 목차 리스트2
  • 목차 리스트3

 

이렇게 리스트를 만들고 이제 리스트에 링크를 걸어야 합니다. 단 지금까지 사용해왔던 링크 거는 방법과는 조금 다릅니다. 이 방법에 대해 더 자세하게 작성해놓은 페이지가 있으니 아래의 글을 참고하시기 바랍니다.

 

티스토리 본문 내에서 하이퍼링크 목차를 만들어 소제목으로 바로 이동하는 방법

 

이렇게 링크를 완성시키고 이제 해당 목차를 div로 감싸주기만 하면 됩니다. 아시다시피 친효애드온의 대부분은 이렇게 div 태그를 활용하여 수동으로 감싸주는 방법을 취하고 있습니다. 본문 목차 리스트의 div 클래스명은 rgyList 입니다. 대/소문자를 구별하며 L만 대문자 입니다. 유의해 주시기 바랍니다. 또한 수정해야 할 부분이 한 군데 더 있습니다.

 

<ul style="list-style-type: disc;" data-ke-list-type="disc">
    <li><a href="#">목차 리스트1</a></li>
    <li><a href="#">목차 리스트2</a></li>
    <li><a href="#">목차 리스트3</a></li>
</ul>

여기까지가 본문 내용대로 작업한 HTML 상태 입니다. 현재 리스트에 수동으로 링크를 만들어 주었습니다. 보시면 ul (혹은 ol) 다음에 style과 data-ke-list-type 등이 보입니다. 이 부분을 모두 지워줘야 합니다. 즉 ul (혹은 ol) 태그만 남기고 모두 지우면 됩니다. 신형/구형 글쓰기 에디터 모두 동일하게 적용됩니다.

 

<ul>
    <li><a href="#">목차 리스트1</a></li>
    <li><a href="#">목차 리스트2</a></li>
    <li><a href="#">목차 리스트3</a></li>
</ul>

그러면 이렇게 될 겁니다. 이 상태에서 div로 감싸주는 겁니다. 클래스명은 위에서 말씀드렸듯 rgyList 입니다.

 

<div class="rgyList">
    <ul>
        <li><a href="#">목차 리스트1</a></li>
        <li><a href="#">목차 리스트2</a></li>
        <li><a href="#">목차 리스트3</a></li>
    </ul>
</div>

클래스명을 적용시키면 이렇게 될 것 입니다. 이렇게 해야 정상적으로 세팅된 본문 목록 모듈이 됩니다. 이제 글을 완성하시고 정상적으로 작동 되는지 한번 테스트해 보시기 바랍니다. 하지만 여기서 끝이 아닙니다. 본문 목차 모듈로 바로 오게 만드는 버튼도 있는데, 이 버튼을 클릭했을 때 다시 모듈 위치로 돌아오게 만들겁니다. 그래서 이 모듈에 이번에는 ID명도 입력합니다.

 

<div id="아이디명" class="rgyList">
    <ul>
        <li><a href="#">목차 리스트1</a></li>
        <li><a href="#">목차 리스트2</a></li>
        <li><a href="#">목차 리스트3</a></li>
    </ul>
</div>

따라서 최종적인 형태는 대략 이렇게 됩니다. 이제 아이디명에 대한 부분은 바로 아래의 목차 버튼 만들기에서 나오니까 꼭 정독해서 차근 차근 숙지해 나가시기 바랍니다.

 

HTML 사용 방법 : 목차 버튼 만들기

이제 방금 위에서 만든 본문 목차 모듈로 바로가는 버튼을 만들어 보겠습니다. 첨부파일의 4번에 있는 태그를 사용합니다.

 

<div id="listBtn">
    <a href="#아이디명">목차</a>
</div>

이 부분 입니다. 이것을 글 작성 시 본문 맨 아래에 수동으로 적용하시면 됩니다. 사실 본문의 HTML 그 어떤 위치에 입력해도 상관은 없지만 그냥 편의상 본문 맨 아래에 넣는것을 추천합니다.

 

친효스킨 다운로드 페이지의 문서 HTML 상태를 살펴봅니다. 보시면 이렇게 본문의 맨 아래에 위의 코드를 입력해놓았음을 확인할 수 있습니다. 그리고 중요한 부분이 하나 더 있습니다. 코드에서 수정해야 하는 부분이 있는데 "#아이디명" 이라고 적혀있는 부분을 변경해줘야 합니다. 위의 스크린샷을 예시로 들면 현재 #rgyTop 이라고 입력이 되어 있는것을 확인할 수 있습니다. 이제 이 ID명을 다른 한 곳에도 똑같이 입력을 해줘야 합니다. 바로 목차 모듈의 div 태그에 심어줘야 합니다.

 

이 버튼의 역할은 딱 이겁니다. 친효스킨을 기준으로 다시 설명을 드리겠습니다. 본문을 아래로 스크롤을 했을 때 위의 스크린샷 이미지처럼 저 위치에 목차 버튼이 나타나게 됩니다. 이 버튼을 클릭했을 때, 방금 만든 목차 모듈로 바로가게 됩니다. 이 버튼은 목차 모듈의 바로가기 버튼인 샘 입니다. 예시에서는 rgyTop 이라는 ID값을 만들었으니 이것을 그대로 목차 모듈의 div에 id값을 입력하기만 하면 됩니다.

 

<div id="rgyTop" class="rgyList">
    <ul>
        <li><a href="#">목차 리스트1</a></li>
        <li><a href="#">목차 리스트2</a></li>
        <li><a href="#">목차 리스트3</a></li>
    </ul>
</div>

따라서 최종적인 본문 목차 모듈의 형태는 위와 같이 완성됩니다. 이제 최종적으로 완성된 본문 내용을 한번 테스트해 보시기 바랍니다. 정상적으로 잘 동작하나요? 축하드립니다. (짝짝짝)

 

부록 : 타스킨에서 본문 목차 모듈 사용 시 주의사항

친효애드온 목차 모듈로 바로가는 버튼의 위치는 고정되어 있습니다. 친효스킨을 기준으로 오른쪽에 나타나는 숨겨진 버튼들과 조화롭게 어우러지기 위해서 위치를 조금 과장되게 수정해 놓은 상태 입니다. 따라서 다른 스킨에서 이 모듈을 사용하게 되어도 해당 위치에 고정되어 나타나게 됩니다. 타 스킨에서의 본문 목차 모듈을 사용하시는 분들은 CSS에서 위치 수정을 해주셔야 하는데 right, bottom, margin 값을 일부 수정하거나 삭제하여 사용하면 됩니다. 대략적인 예시는 다음과 같습니다.

 

#listBtn {
    display: none;
    position: fixed;
    right: 10px; /*수정*/
    bottom: 10px; /*수정*/
    transform: scale(0.7);
    z-index: 9999;
}
@media (min-width: 1000px) {
    #listBtn {
        right: 10px; /*삭제*/
        bottom: 300px; /*삭제*/
        margin: 5px; /*삭제*/
        transform: scale(1);
        -webkit-transform: scale(1);
    }
}

이렇게 변경하시면 될 겁니다. 끝.

저작자표시 비영리 변경금지

공유하기

facebook twitter kakaoTalk kakaostory naver band

'블로그/친효애드온' 의 관련글

티스토리툴바