티스토리 뷰

티스토리 목차 자동으로 만들기 방법을 알아보겠습니다. 블로그에 목차를 만들면 전체적인 내용을 요약해서 보여줄 수 있어서 좋습니다. 티스토리 블로그에 코드를 넣어서 자동으로 목차를 만들 수 있습니다. 그러면 번거롭게 직접 목차를 입력하지 않아도 됩니다. 프로그래밍을 잘 모르는 분들도 쉽게 따라할 수 있도록 최대한 자세하게 설명하겠습니다.

목차

     

    티스토리 목차 자동으로 만들기.png

    1. 제목 H 태그 이해하기

    티스토리 목차 자동으로 만들 때 H 태그를 사용합니다. 티스토리 에디터를 보면 제목1,2,3이 있습니다. 웹사이트에서 제목은 H 태그를 사용합니다. H1은 가장 중요한 제목이고 숫자가 커질수록 중요도가 낮아집니다.

     

    H1 태그는 현재 웹사이트에서 한 개만 사용해야 합니다. 블로그 제목을 H1 태그로 사용하는 것을 추천합니다. 본문에서는 H2 태그부터 순서대로 사용하는 것이 좋습니다.

    티스토리 제목 태그 확인하기.png

     

    HTML 모드에서 제목1이 어떤 태그인지 확인하겠습니다.

    HTML모드.png

     

    H2 태그인 것을 알 수 있습니다. 제목2는 H3, 제목3은 H4 태그입니다.

    태그 확인하기.png

     

    티스토리에서 제목1, 제목2를 목차를 만들어보겠습니다. 이 방법을 배우면 제목3도 목차로 만들 수 있습니다.

     

    2. jQuery TOC 플러그인 업로드

     

    자바스크립트 프레임워크인 제이쿼리를 사용해서 티스토리 자동 목차를 만들 수 있습니다. 제이쿼리는 자바스크립트를 조금 더 쉽게 사용할 수 있게 해주는 언어입니다. 다음 파일을 다운로드 받습니다.

    jquery.toc.min.js
    0.00MB

     

    티스토리 관리자 메뉴에서 꾸미기 > 스킨 편집 > html 편집 > 파일업로드를 순서대로 클릭합니다.

    파일업로드.png

     

    아래에 있는 '추가' 버튼을 클릭합니다. 

    추가버튼.png

     

    그리고 다운로드 받은 제이쿼리 파일을 업로드 합니다.

     

    3. 자동목차 스크립트 넣기

    관리자 메뉴에서 스킨 편집 > html 편집을 순서대로 클릭합니다.

    html편집.png

     

    body 태그 아래 쪽에 스크립트를 붙여넣으면 됩니다.

    티스토리 목차 자동 코드 붙여넣기.png

     

    <script src="./images/jquery.toc.min.js"></script>

    <script>

      $(document).ready(function() {

      $("#toc").toc({content: "본문과 관련된 클래스", headings: "h2,h3"});

    });

    </script>

     

    $("#toc")는 id가 toc의 태그 안에 목차를 만들겠다는 뜻입니다. headings에서 h2, h3는 제목1과 제목2를 목차로 만들겠다는 뜻입니다. 만약 제목1로만 목차를 만들고 싶으면 h2만 입력합니다.

     

    그리고 content에 본문과 관련된 클래스를 넣어야 합니다. 스킨마다 본문과 관련된 클래스 이름이 다릅니다. 그러면 티스토리에서 본문과 관련된 클래스를 찾는 방법을 알아보겠습니다. 이 방법을 알면 다른 스킨에도 적용할 수 있습니다.

     

    크롬에서 F12키를 눌러서 개발자 도구를 엽니다. 빨간색으로 표시한 아이콘을 선택하고 블로그에서 본문과 관련된 부분을 선택합니다.

    개발자도구 선택아이콘.png

     

    그리고 개발자 도구에서 HTML 코드를 선택하면 블로그에 색깔로 해당 영역을 표시해줍니다.

    클래스 확인하기.png

     

    아래와 같이 본문이 영역을 표시될 때 class를 확인합니다. 티스토리 #1에서는 class="tt_article_useless_p_margin contents_style"입니다. 클래스 이름이 2개 있습니다. tt_article_useless_p_margin와 contents_style입니다. 이 중에서 tt_article_useless_p_margin를 content에 넣습니다.

    티스토리 영역 확인하기.png

     

    tt_article_useless_p_margin앞에 점(.)을 붙여서 content에 입력합니다. 자바스크립트와 제이쿼리에서 점(.)은 클래스를 나타냅니다.

    <script src="./images/jquery.toc.min.js"></script>

    <script>

      $(document).ready(function() {

      $("#toc").toc({content: ".tt_article_useless_p_margin", headings: "h2,h3"});

    });

    </script>

    코드 완성하기.png

     

    4. 티스토리 자동 목차 CSS 꾸미기

     

    그리고 목차의 css를 꾸미겠습니다. 관리자 메뉴에서 꾸미기 > 스킨 편집 > html 편집 > CSS 탭을 순서대로 클릭합니다.

    css 편집하기.png

     

    그리고 맨 아래 css코드를 넣습니다. font-sizes는 폰트 크기도 color는 폰트 색깔입니다. 원하는 크기와 색깔을 넣습니다.

    .book-toc {

      padding : 15px 0 5px;

      border-top : 1px solid #000000;

      border-bottom : 1px solid #000000;

    }

    .book-toc p {

      font-weight: bold;

      font-size: 1.5rem !important;

      color: var(--font-basic-1);

    }

    #toc {

      margin: 5px 0;

    }

    #toc * {

      font-size: 1.25rem;

      color:var(--font-basic-1) !important;

    }

    #toc a{

      font-weight:normal;

      text-decoration:none;

    }

    #toc a:hover {

      font-weight:bold;

    }

    #toc > li {

      margin-left: 30px;

      list-style-type: disc !important;

    }

    #toc > li > a {

      font-weight:bold;

      color : #006dd7 !important;

    }

    #toc > li > ul {

      margin-left: 10px;

    }

    #toc > li > ul > li {

      list-style-type: disc !important;

    }

    #toc > li > ul > li > a {

     

    }

    #toc > li > ul > li > ul {

     

    }

    #toc > li > ul > li > ul > li {

     

    }

    #toc > li > ul > li > ul > li > a {

     

    }

     

    목차를 만들 때 서식을 만들어서 넣는 것이 좋습니다. 콘텐츠 메뉴에서 서식 관리를 선택합니다.

    티스토리 서식관리하기.png

     

    오른쪽 위에 있는 서식 쓰기를 클릭합니다. 서식을 쓸 때 제목을 정합니다. 이 포스팅에서는 '자동 목차 만들기'로 정했습니다. HTML 모드에서 아래 코드를 붙여넣습니다.

    티스토리 자동 목차 만들기.png

     

    <div class="book-toc">

    <p>목차</p>

    <ul id="toc"></ul>

    </div>

     

    글을 쓰고 목차를 넣을 곳에 서식으로 만든 내용을 넣으면 됩니다. 서식 메뉴를 선택합니다.

    서식.png

     

    만든 서식을 선택합니다.

    서식 완료.png

     

    발행하면 아래와 같이 목차가 자동으로 완성됩니다.

    목차 완성.png

     

    css 코드를 설명하겠습니다. 우리가 목차를 만들 때 book-toc 클래스를 사용합니다. padding은 여백공간을 말합니다. 위에 15px, 왼쪽과 오른쪽은 0, 아래는 5px의 여백을 줍니다. border-top과 border-bottom으로 위 아래 줄을 표시합니다.

    .book-toc {

      padding : 15px 0 5px;

      border-top : 1px solid #000000;

      border-bottom : 1px solid #000000;

    }

     

    .book-toc p는 book-toc 클래스 안에 있는 p태그를 말합니다. 목차라고 표시되는 부분이 p태그입니다. font-weight: bold로 굵게 표시했습니다. css 코드 뒤에 !important를 쓰면 다른 css 코드 보다 최우선으로 적용됩니다. 만약 원하는 대로 잘 안 바뀌면 위에 있는 css 코드 때문입니다. 이럴 때는 !important를 사용합니다.

    .book-toc p {

      font-weight: bold;

      font-size: 1.5rem !important;

      color: var(--font-basic-1);

    }

     

    #toc *는 리스트를 나타내는 ul태그(id가 toc) 밑에 있는 모든 태그를 말합니다. 글자 크기를 1.25rem으로 통일했습니다.

    #toc * {

      font-size: 1.25rem;

      color:var(--font-basic-1) !important;

    }

     

    #toc a는 a링크를 말합니다. 목차를 클릭하면 해당 제목으로 이동할 때 a태그를 사용합니다. 원래 a태그를 사용하면 기본값으로 아래 밑줄이 생깁니다. text-decoration:none로 밑줄이 생기지 않도록 합니다.

    #toc a{

      font-weight:normal;

      text-decoration:none;

    }

     

    #toc a:hover는 목차 위에 마우스를 가져갔을 때 말합니다. font-weight:bold로 글자를 굵게 합니다.

    #toc a:hover {

      font-weight:bold;

    }

     

    #toc > li는 ul 태그 밑에 바로 밑에 있는, 첫번째 목차를 말합니다. 제목1(H2)로 만든 목차를 말합니다. margin-left: 30px오 오른쪽으로 들여쓰기 되도록 합니다. list-style-type: disc로 목차 앞에 디스크 모양이 아이콘이 생기도록 합니다.

    #toc > li {

      margin-left: 30px;

      list-style-type: disc !important;

    }

     

    #toc > li > a 는 제목1(H2)로 만든 태그의 링크를 말합니다. 제목1의 목차는 색깔을 파란색으로 정해서 눈에 잘 보이도록 했습니다.

    #toc > li > a {

      font-weight:bold;

      color : #006dd7 !important;

    }

    #toc > li > ul 는 제목2(H3)로 만든 목차가 있는 ul 태그입니다. margin-left: 10px로 들여쓰기 했습니다.

    #toc > li > ul {

      margin-left: 10px;

    }

    제목3(H4)까지 목차로 만들고 싶다면 아래 코드를 완성하면 됩니다.

    #toc > li > ul > li > ul {

     

    }

    #toc > li > ul > li > ul > li {

     

    }

    #toc > li > ul > li > ul > li > a {

     

    }

     

     

    이번 포스팅에서는 티스토리 목차 자동 만들기 방법을 알아봤습니다. 기본적인 HTML, CSS, 자바스크립트, 제이쿼리를 알면 블로그를 다양하게 만들 수 있습니다. 이번 포스팅이 여러분에게 도움이 되었으면 좋겠습니다. 감사합니다.

     

    추천 포스팅

     

    티스토리 제목 H1 태그로 바꾸기

    티스토리 제목 H1 태그로 바꾸기 방법을 알아보겠습니다. 구글 SEO에서 좋은 점수를 받으려면 H1 태그를 사용해야 합니다. H태그는 제목을 나타내는 태그로 1이 가장 중요한 제목을 나타냅니다. 그

    www.itple.co.kr

     

    티스토리 스킨 속도 비교

    티스토리 스킨 속도 비교 이번 포스팅에서는 티스토리 스킨 속도 비교 결과를 소개합니다. 티스토리 블로그는 애드센스나 텐핑 같은 광고를 넣을 수 있어서 수익을 낼 수 있습니다. 네이버의 애

    www.itple.co.kr

    댓글
    댓글쓰기 폼