정보/블로그 운영팁

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

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

기본 글머리 기호도 심플하긴 하지만 원하는 모양으로 바꾸면 더 좋을 것 같다는 생각을 했습니다.

 

기본 글머리 설정 방법

 

list-style-type - CSS: Cascading Style Sheets | MDN

The list-style-type CSS property sets the marker (such as a disc, character, or custom counter style) of a list item element. The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples

developer.mozilla.org

물론 위와 같이 기본으로 제공하는 글머리로도 바꾸는 방법이 있습니다만 만족할 수 없습니다.

지금부터 제가 원하는 스타일대로 바꿔 보겠습니다.

 

목차

     

    목차 기능 적용

    jQuery TOC 플러그인을 이용한 목차 생성 방법은 얼마 전에 포스팅 하였으므로 링크로 대체 하도록 하겠습니다.

     

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

     

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

    목차를 넣고 싶긴한데 글 쓸 때마다 매번 수작업으로 만든다면 상당히 번거롭겠죠. 그래서 jQuery 플러그인 Table of Contents(TOC)를 이용하여 자동으로 넣는 방법을 소개합니다. 저는 제목1, 제목2로

    sangminem.tistory.com

    이 기능 먼저 적용해 주세요 :)

     

     

    폰트 임포트

    다음 폰트를 다운 받습니다.

    fa-solid-900.zip
    0.51MB

    무료 폰트이므로 안심하고 사용하셔도 됩니다.

     

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

     

    추가 버튼을 클릭합니다.

     

    압축 해제한 4개 파일을 선택합니다.

     

    다음과 같이 추가되었으면 성공입니다.

     

    그리고 CSS 탭으로 이동하여 다음 코드를 추가합니다.

    @font-face{
        font-family:"Font_Awesome_5_Free";
        src:url(./images/fa-solid-900.woff2) format("woff2"),
            url(./images/fa-solid-900.woff) format("woff"),
            url(./images/fa-solid-900.ttf) format("truetype"),
            url(./images/fa-solid-900.svg#fontawesome) format("svg");
        font-style:normal;
        font-weight:900;
        font-display: block;
    }

    이 폰트를 사용하겠다고 선언한 것이므로 그대로 복사 붙여넣기 하시면 됩니다.

     

    공식 사이트에서 지원하는 모든 아이콘을 확인하실 수 있으며 유료 버전에 대한 정보도 얻으실 수 있습니다.

    아이콘마다 유니코드가 부여되어 있으므로 확인하여 적용하시면 됩니다.

     

    Font Awesome 5 Free 공식 사이트

     

    Font Awesome

    The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

    fontawesome.com

    참고로 빨간 박스 부분이 우리가 사용하고자 하는 유니코드 입니다.

     

    CSS 수정

    먼저 제목1에 대한 글머리를 수정해 보겠습니다.

    #toc > li {
        /* 기존 셋팅 유지 */
        list-style-type: none;
    }

    list-style-type에 따라 글머리가 달라지는데 저희는 브라우저가 기본으로 제공하는 글머리를 사용하지 않을 것이므로 속성 값을 none으로 해주었습니다.

     

    그리고 before라는 키워드로 실제 컨텐츠 앞 부분을 정의해 줄 수 있습니다.

    우리는 기본 제공 글머리 대신 이기능으로 원하는 아이콘을 넣을 것입니다.

    #toc > li:before {
        font-family: "Font_Awesome_5_Free";
        content: "\f00c";
        padding-right: 10px;
        color: #517135;
    }

    위에서 임포트 한 폰트를 사용하여 유니코드 f00c에 해당하는 값을 넣었습니다.

    그리고 오른쪽 여백을 10px 만큼 주었구요.

    색상도 변경하였습니다.

     

    다음은 제목2에 대한 글머리를 수정해 보겠습니다.

    #toc > li > ul li {
        /* 기존 셋팅 유지 */
        list-style-type: none;
    }

    마찬가지로 list-style-type 값을 none으로 해주었습니다.

     

    제목1에서 한 것과 똑같은 작업입니다.

    #toc > li > ul li:before {
        font-family: "Font_Awesome_5_Free";
        content: "\f105";
        padding-right: 8px;
        color: #548a25;
    }

    이번에는 유니코드 f105 값의 아이콘을 사용하였습니다.

    이번에는 오른쪽 여백을 8px 만큼 주었구요.

    색상도 살짝 다르게 변경하였습니다.

    +내용추가 (2021.01.13)

    제목3 부분도 요청이 있어서 추가했습니다,

    #toc > li > ul > li > ul > li {
        /* 기존 셋팅 유지 */
        list-style-type: none;
    }
    #toc > li > ul > li > ul > li:before {
        content: "\2022";
        padding-right: 5px;
        color: #548a25;
    }

    content 부분에 원하는 값을 유니코드 형태로 넣어 주시면 됩니다.

     

    결과

    다음과 같이 깔끔하게 적용이 되었네요.

    다들 저랑 취향이 같지는 않으실 테니 CSS 기본적인 사항 조금만 공부하셔서 원하는 스타일대로 바꿔 보시길 바랍니다.

     

    감사합니다 :)

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

    태그

    , ,

    댓글54

    • 이웃언니 2020.12.14 23:59 신고

      뭔가 신기하다!!
      하지말 해볼 자신이 없다!!
      다음생에서,,..도전~~
      답글

    • 앗싸붕 2020.12.15 01:44 신고

      좋은 정보 감사합니다. 티스토리 서식관련된 부분은 언제 한 번 보긴봐야 하는데 잘 안 봐지네용..ㅠㅠ
      답글

    • 널스동스 2020.12.15 02:22 신고

      제가 하고 싶은 말을 이웃언니님이 다 말씀하셨네요 ㅋㅋㅋㅋ
      답글

    • LunaCell 2020.12.17 17:34 신고

      좋은 정보 감사합니다 ^^
      답글

    • 카누라떼 2020.12.26 21:40 신고

      다음검색으로 서식 쳐서 들어왔는데 아는분이 나오니 기분이 좋네요 ^^
      역시 대단하십니다!
      답글

      • 아미넴 2020.12.27 10:08 신고

        오오 ㅋㅋ 감사해요! 아마 찾으시는 정보가 이거 말고 다른 서식이었을 것 같지만 ㅎㅎ
        그래도 신기하네요 :)

    • 도쿄정대리! 2021.01.09 19:12 신고

      오늘 하루종일 이 블로그에 머물고 있는것 같습니다 ㅎㅎ
      덕분에 제 블로그에도 드디어 목차를 적용하고 있습니다. 감사합니다.
      하나 질문이 있는데요 before 앞에 marker가 붙어서 ・와같은 기호가 check기호 앞에 있습니다.

      <li>
      ::marker
      ::before
      </li>
      위와같이 저 marker에 user agent stylesheet라는게 붙어있는데요
      혹시나.. 수정방법을 알고 계시면 알려주시면 감사하겠습니다...ㅠㅠ
      답글

      • 아미넴 2021.01.10 10:38 신고

        ㅎㅎ 고생하시네요

        아마 제 생각에는 css에 모든 li 태그에
        list-style-type: none;
        을 넣어주시면 될 것 같습니다

    • 닭둘기 2021.01.13 00:30

      혹시 제목3 에도 서식을 넣을 수 있도록 업데이트 해줄 수 있나요??
      답글

      • 아미넴 2021.01.13 10:23 신고

        안녕하세요~
        제목1, 제목2, 제목3 다 비슷한 형태라서 크게 생각을 안했는데..
        일단 내용 추가해 볼게요!

    • 알려주신 대로 CSS 탭으로 이동 후 복사-붙여넣기 까지 완료했는데 Html 문외한이라 그 다음은 어떻게 해야하는지 모르겠네요 ? ㅜ_ㅜ

      그 다음에 대해 알려주실 수 있을까요? 아미님.
      답글

      • 아미넴 2021.01.14 09:37 신고

        안녕하세요.
        본문에 설명은 대부분 적어놓았는데.. 정확히 어느 부분이 이해 안되시는지 말씀해 주셔야 도움드릴 수 있을거 같아요 ㅎㅎ

    • ㅎㅎ 친절하게 답변 달아주셔서 감사드려요. CSS에 대해 검색해서 해결했어요 제가 너무 조급해서 아미넴님 귀찮게 해드린거 같네요 죄송하고 좋은 포스팅 해주셔서 감사합니다 ㅎㅎ
      답글

    • LunaCell 2021.01.17 17:13 신고

      안녕하세요. 오랜만에 다시 뵙게 되네요.

      스킨을 다시 변경할려고 적용 도중에 계속 왼쪽에 빈 공간이 너무 많이 남는 문제가 생기고 있습니다.

      https://lunacellstonesecond.tistory.com/23#cxvzxcvzx

      검사를 해보니 element.style margin 영역이 40씩이나 찍히고 있는데 css에서 어떻게 찾을 수 있는 방법이 없네요.

      어떻게 해결해야 되는지 여쭙고 싶습니다.
      답글

      • 아미넴 2021.01.17 18:49 신고

        네 안녕하세요~
        언급하신 URL은 글이 비공개로 되어있는지 보이지 않습니다.
        그리고 메인 블로그에 가보니 스킨이 변경되어 목차가 사이드바에 노출이 되는군요~ 이것도 나빠보이지 않네요 ㅎㅎ

      • LunaCell 2021.01.17 20:19 신고

        아. 다시 공개로 맞춰놨습니당!. 저는 아무래도 메인 화면에 낱나 있는 목차가 더 좋은 것 같아 아미넴님의 목차를 다시 사용할려구요 ㅎㅎ

      • 아미넴 2021.01.17 21:16 신고

        아하 그렇군요 ㅎㅎ

        이 부분을
        #toc {
        margin-bottom: 0;
        }

        이렇게 바꿔 보세요.
        #toc {
        margin-bottom: 0;
        padding-left: 0;
        }

      • LunaCell 2021.01.17 21:31 신고

        흠... 다시 적용해보니 아미넴꺼만큼 모바일 친화적인 목차는 잘 없는 것 같습니다. 문제가 있으면 또 댓글 드리겠습니다

    • 익명 2021.03.17 00:57

      비밀댓글입니다
      답글

    • июÐ′ 2021.03.29 22:42 신고

      안녕하세요, 플로팅 목차에서 제목1과 제목2의 줄간격을 띄울 수 있는 방법이 있을까요?


      본문의 목차에서는 제목1과 제목2가 괜찮게 줄간격이 띄워져 있는데, 플로팅에서는 다르게 나오네요.
      답글

      • 아미넴 2021.03.29 22:46 신고

        안녕하세요. 조치 방법은 상황에 따라 달라서 직접 봐야 알 것 같습니다. 테스트 글 하나 작성해서 알려주시면 봐 드릴게요.

        목차가 기본 기능으로 들어가 있는 미넴 스킨도 한번 둘러 보세요.
        https://sangminem.tistory.com/506

      • 익명 2021.03.29 23:56

        비밀댓글입니다

      • 아미넴 2021.03.30 00:41 신고

        적당히 손 봤는데 마음에 안 드시면 값을 조금씩 조절해 보시면 될거 같습니다.

        일단 다음 부분에서 margin-bottom을 10px에서 0으로 바꾸시구요.
        .floating-toc #toc-body #toc * {
        font-size: 15px;
        margin-bottom: 0;
        }

        아래 스타일을 추가하셔서 간격을 좀 더 조절하시면 될 것 같습니다.
        .floating-toc #toc-body #toc > li {
        margin-bottom: 5px;
        }
        .floating-toc #toc-body #toc > li > ul > li {
        margin-bottom: 1px;
        }

        참고하세요~

    • BAPA 2021.05.28 00:36 신고

      다른거 적용은 다 됬는데.... 점만 안 사라지네요 ㅠㅠ list-style-type:none; list-style:none; 이거 둘다 해봤는데.... 해결을 어떻게 해야할지 모르겟어요 ㅠㅠ 이뻐서 따라하고 싶은데. 어렵네요 ㅠㅠ
      답글

      • 아미넴 2021.05.28 00:40 신고

        스킨편집 css에서

        ul[data-ke-list-type='disc'],
        ul[data-ke-list-type='disc'] li,
        #tt-body-page ul[data-ke-list-type='disc'],
        #tt-body-page ul[data-ke-list-type='disc'] li {
        list-style-type: none !important;
        }

        를 추가해 보세요~

      • BAPA 2021.05.28 01:12 신고

        ㅠㅠㅠㅠ 몇시간동안 뭐가 문제지 하고 있었는데 ㅠㅠ 이렇게 늦은시간인데도 알려주시다니 ㅠㅠ 너무 감사합니다.ㅠㅠ 지금 웹 공부를 하고 있는데 더 많이 공부해야겠네요 ㅠㅠ 감사합니다!!

    • 정말 감사합니다~ 티스토리 목차 사용을 해보고싶어서 검색하다가 선생님 블로그를 발견하고 따라했는데 너무 신기해요 ㅠㅠ 친절하고 자세한 설명 감사합니다! 이런 고급 강의를 공짜로 보게 되다니! 정말 행운이 아닐 수 없네요 잘 사용해볼게요!
      답글

    •  . 2021.06.29 21:39 신고

      선생님 글머리 동그라미로 되어있는거 이거 없애려면 어떻게 해야하나요? 기본 목차에서나, 플로팅 둘다에서요,
      답글

    • 만땅이 2021.08.16 15:09 신고

      안녕하세요..! 덕분에 목차를 적용해보고 있습니다
      다름이 아니라 ,도쿄정대리님처럼 check앞에 점이 붙고 있습니다 ㅠㅠ
      댓글에 쓰신것처럼 list-style-type: disc; 로 되어 있던것을 none으로 변경해주었는데도
      동일하게 보이고 있습니다 혹시 방법이 있을까요? ㅠㅠ
      답글

      • 아미넴 2021.08.17 12:44 신고

        안녕하세요. 해당 현상이 일어나는 글 주소 남겨주시면 확인해보고 말씀드릴게요~

      • 익명 2021.08.17 12:47

        비밀댓글입니다

      • 아미넴 2021.08.17 14:51 신고

        알려주신 주소로 직접 들어가서 본 건데

        <div class="book-toc">
        <div class="book-toc">
        <div class="book-toc">
        <div class="book-toc">
        내용
        </div>
        </div>
        </div>
        </div>

        이렇게 중복으로 되어있긴 하네요. 목차태그 부분 전체를 지우고 다시 태그를 작성해보세요~

        그리고 점이 붙는 현상은

        ul[data-ke-list-type='disc'], ul[data-ke-list-type='disc'] li, #tt-body-page ul[data-ke-list-type='disc'], #tt-body-page ul[data-ke-list-type='disc'] li {
        list-style-type: none;
        }

        이렇게 추가 작성해 보세요~

      • 만땅이 2021.08.17 15:06 신고

        답변주셔서 감사합니다!

        알려주신방법으로
        목차태그 부분
        1) 작성한 서식을 삭제 후에 다시 설정
        2) 글에서 추가한 서식 삭제 후 다시 추가하여 업데이트
        하였습니다만.. 더 난장판이 되어버렸습니다 ㅠㅠ

        그리고 점이 붙는 현상은
        추가했더니 해당부분은 없어졌습니다
        혹시 왜 저 부분을 추가해야하는지도 알 수 있을까요?

        감사합니다!

      • 만땅이 2021.08.17 15:08 신고

        그리고 아예 글에서 추가했던 서식을 삭제했는데도 박스가 남아있습니다... ㅠㅠ

      • 아미넴 2021.08.17 15:25 신고

        완전히 지우려면 에디터를 html 모드로 바꾸고 보셔야 되는데 다시 한 번 확인해 보시기 바랄게요~

        티스토리에서 기본으로 먹이는 스타일이 있는데 그 부분을 overriding 한거라고 보시면 됩니다 ㅎ

      • 만땅이 2021.08.18 13:16 신고

        감사합니다!
        페이지 소스를 확인했더니 말씀해주신데로 중복되어 있더라구요!

        글자체를 서식 추가한 뒤에 html로 확인하고 수정하고 했더니 해결되었습니다

        감사합니다:)

    • 익명 2021.08.29 11:06

      비밀댓글입니다
      답글

      • 아미넴 2021.08.30 15:47 신고

        안녕하세요. 다음 부분에 margin-left: 0;을 추가하시면 괜찮을 것 같습니다.

        ul[data-ke-list-type='disc'],
        ul[data-ke-list-type='disc'] li,
        #tt-body-page ul[data-ke-list-type='disc'],
        #tt-body-page ul[data-ke-list-type='disc'] li {
        list-style-type: none !important;
        }

    • 익명 2021.09.25 16:32

      비밀댓글입니다
      답글

    • 익명 2022.02.24 00:20

      비밀댓글입니다
      답글

      • 아미넴 2022.02.24 01:10 신고

        안녕하세요.

        1. $toc.toc({content: ".tt_article_useless_p_margin", headings: "h2,h3,h4"}); 부분에서 .tt_article_useless_p_margin를 .e-content로 바꿔보세요.

        2. 사용하시는 스킨이 제가 만든 스킨이 아니라서 본문의 글머리 기호까지는 신경을 써 드릴 수 없을 것 같고 어느 부분을 말씀하시는지도 정확히 모르겠습니다 ㅠ css에 대한 이해가 좀 더 필요하실 것 같은데 참고로 말씀드리면 css의 클래스나 태그를 좀 더 세분화 하여 각각 작성할 필요가 있어 보입니다.

      • 익명 2022.02.24 20:27

        비밀댓글입니다

    💲 추천 글