티스토리 자동목차 HTML 서식 모음집 #1

TOC 자동목차(HTML) 서식 모음.

'자동목차 만들기 (TOC) part 2, part 4'에 적용 가능한 서식 스타일 모음

본 서식은 '자동목차 만들기 part 2' 또는 'part 4'를 설정한 후에 사용할 수 있습니다.
기본 코드와 CSS 코드는 part 2와 part 4에서 모두 동일하게 사용됩니다.
자동목차 서식 스타일 모음은 CSS를 수정하지 않고 HTML 코드를 서식으로 저장 후, 필요한 페이지나 위치에 넣거나 본문에 바로 넣어 사용할 수 있습니다.

CSS 코드 변경 대신 서식을 사용하는 이유

간편한 사용: 기존에 작성한 목차에 영향을 주지 않고 쉽게 적용할 수 있습니다.
개별 수정 가능: 코드 내 색상 등을 약간만 수정하여 각 포스팅에 어울리는 자동목차를 만들 수 있습니다.

📌 알림

웹서핑을 하다 보면 제가 만든 코드, 태그 속성, 그리고 오탈자까지 그대로 가져가 본인 작성한 글인 것처럼 사용하는 경우가 있습니다. 코드를 가져가는 것까지는 막을 수 없지만, 제 자료를 사용해 관련된 포스팅을 할 때는 출처를 꼭 밝혀 주시기 바랍니다.

그 외 개인적인 사용은 자유롭게 하시면 됩니다.

자동목차 수정에 필요한 HTML 코드

태그 속성	설명
padding: 10px 20px 10px 20px;	박스 내부 여백: 상, 좌, 하, 우
margin: 10px 0;	박스 외부 여백: 상/하, 좌/우
color: #8568e1;	글꼴색: #색상;
background-color: #6c7ae0;	배경색: #색상;
border: 1px solid #A9A9F5;	전체 태두리선: 선굵기px, 선 스타일, #색상
border-bottom: 2px solid #7cae02;	밑줄: 두께, 선종류, #색상
border: 10px;	테이블 모서리: 전체모서리 둥글게;
box-shadow: 5px 5px 5px #999;	그림자 효과: 좌, 하, 그림자 크기, #색상
px와 em은 모두 크기 입니다.(16px → 1em, 18px → 1.1em)

TOC 자동목차 Part 2 서식 모음

1. 제목의 길이에 따라 가로길이가 달라지는 자동목차 코드

사용하는 블로그의 스킨 버전에 따라 목차 박스의 내부 여백이 다를 수 있습니다.

이때는 목차 코드 첫 번째 줄의 padding: 10px(상) 30px(좌) 10px(하) 20px(우);를 수정하여 간격을 맞춰주세요.

서식 1

<div style="display: inline-block; padding: 10px 30px 10px 20px; margin: 10px 0px; border-radius: 10px; border: 1px solid #ccd0d7; box-shadow: 1px 2px 3px 1px rgba(0,0,0,.1);">
<p style="border-bottom: 2px solid #ccd0d7; font-weight: 600;" data-ke-size="size16"><span style="font-size: 1.2em;">≣</span> 목차</p>
<ul id="toc" style="list-style-type: disc;"></ul>
<script type="text/javascript"> $(function(){  $("#toc").toc({content: ".tt_article_useless_p_margin", headings: "h2, h3, h4"}); });</script>
</div>

서식 2

<div style="display: inline-block; padding: 10px 30px 10px 20px; margin: 10px 0px; background: #f7ffe2; border-radius: 10px; border: 1px solid #7cae02; box-shadow: 1px 2px 3px 1px rgba(0,0,0,.1);">
<p style="border-bottom: 2px solid #7cae02; font-weight: bold; color: #5d8300;" data-ke-size="size16"><span style="font-size: 1.2em;">≣</span> 목차</p>
<ul id="toc" style="list-style-type: disc;"></ul>
<script type="text/javascript"> $(function(){  $("#toc").toc({content: ".tt_article_useless_p_margin", headings: "h2, h3, h4"}); });</script>
</div>

서식 3

<div style="display: inline-block; padding: 10px 30px 10px 20px; margin: 10px 0px; background: #fef4ef; border-radius: 10px; border: 1px solid #d94701; box-shadow: 1px 2px 3px 1px rgba(0,0,0,.1);">
<p style="border-bottom: 2px solid #d94701; font-weight: bold; color: #d94701;" data-ke-size="size16"><span style="font-size: 1.2em;">≣</span> 목차</p>
<ul id="toc" style="list-style-type: disc;"></ul>
<script type="text/javascript"> $(function(){  $("#toc").toc({content: ".tt_article_useless_p_margin", headings: "h2, h3, h4"}); });</script>
</div>

서식 4

<div style="display: inline-block; padding: 10px 30px 10px 20px; margin: 10px 0px; background: #f3f8fe; border-radius: 10px; border: 1px solid #6c96ca; box-shadow: 1px 2px 3px 1px rgba(0,0,0,.1);">
<p style="border-bottom: 2px solid #6c96ca; font-weight: bold; color: #6c96ca;" data-ke-size="size16"><span style="font-size: 1.2em;">≣</span> 목차</p>
<ul id="toc" style="list-style-type: disc;"></ul>
<script type="text/javascript"> $(function(){  $("#toc").toc({content: ".tt_article_useless_p_margin", headings: "h2, h3, h4"}); });</script>
</div>

서식 5

<div style="display: inline-block; padding: 10px 30px 10px 20px; margin: 10px 0px; background: #fbf9e3; border-radius: 10px; border: 1px solid #02343F; box-shadow: 1px 2px 3px 1px rgba(0,0,0,.1);">
<p style="border-bottom: 2px solid #02343F; font-weight: bold; color: #02343F;" data-ke-size="size16"><span style="font-size: 1.2em;">≣</span> 목차</p>
<ul id="toc" style="list-style-type: disc;"></ul>
<script type="text/javascript"> $(function(){  $("#toc").toc({content: ".tt_article_useless_p_margin", headings: "h2, h3, h4"}); });</script>
</div>

서식 6

<div style="display: inline-block; padding: 10px 30px 10px 20px; margin: 10px 0px; background: #f2f4f9; border-radius: 10px; border: 1px solid #50586C; box-shadow: 1px 2px 3px 1px rgba(0,0,0,.1);">
<p style="border-bottom: 2px solid #50586C; font-weight: bold; color: #50586C;" data-ke-size="size16"><span style="font-size: 1.2em;">≣</span> 목차</p>
<ul id="toc" style="list-style-type: disc;"></ul>
<script type="text/javascript"> $(function(){  $("#toc").toc({content: ".tt_article_useless_p_margin", headings: "h2, h3, h4"}); });</script>
</div>

서식 7

<div style="display: inline-block; padding: 10px 30px 10px 20px; margin: 10px 0px; background: #faf0e6; border-radius: 10px; border: 1px solid #815854; box-shadow: 1px 2px 3px 1px rgba(0,0,0,.1);">
<p style="border-bottom: 2px solid #815854; font-weight: bold; color: #815854;" data-ke-size="size16"><span style="font-size: 1.2em;">≣</span> 목차</p>
<ul id="toc" style="list-style-type: disc;"></ul>
<script type="text/javascript"> $(function(){  $("#toc").toc({content: ".tt_article_useless_p_margin", headings: "h2, h3, h4"}); });</script>
</div>

서식 8

<div style="display: inline-block; padding: 10px 30px 10px 20px; margin: 10px 0px; background: #fefcf0; border-radius: 10px; border: 1px solid #F96167; box-shadow: 1px 2px 3px 1px rgba(0,0,0,.1);">
<p style="border-bottom: 2px solid #F96167; font-weight: bold; color: #F96167;" data-ke-size="size16"><span style="font-size: 1.2em;">≣</span> 목차</p>
<ul id="toc" style="list-style-type: disc;"></ul>
<script type="text/javascript"> $(function(){  $("#toc").toc({content: ".tt_article_useless_p_margin", headings: "h2, h3, h4"}); });</script>
</div>

서식 9

<div style="display: inline-block; padding: 10px 30px 10px 20px; margin: 10px 0px; background: #fffaaa; border-radius: 10px; border: 1px solid #ff56d8; box-shadow: 1px 2px 3px 1px rgba(0,0,0,.1);">
<p style="border-bottom: 2px solid #ff56d8; font-weight: bold; color: #ff56d8" data-ke-size="size16"><span style="font-size: 1.2em;">≣</span> 목차</p>
<ul id="toc" style="list-style-type: disc;"></ul>
<script type="text/javascript"> $(function(){  $("#toc").toc({content: ".tt_article_useless_p_margin", headings: "h2, h3, h4"}); });</script>
</div>

서식 10

<div style="display: inline-block; padding: 10px 30px 10px 20px; margin: 10px 0px; background: #E0F2F1; border-radius: 10px; border: 1px solid #006064; box-shadow: 1px 2px 3px 1px rgba(0,0,0,.1);">
<p style="border-bottom: 2px solid #006064; font-weight: bold; color: #006064;" data-ke-size="size16"><span style="font-size: 1.2em;">≣</span> 목차</p>
<ul id="toc" style="list-style-type: disc;"></ul>
<script type="text/javascript"> $(function(){  $("#toc").toc({content: ".tt_article_useless_p_margin", headings: "h2, h3, h4"}); });</script>
</div>

2. 풀사이즈 고정형 자동목차 코드

위의 가로로 길어지는 코드 중 맨 윗줄의 style코드에서 display: inline-block;만 지워 주면 아래처럼 풀사이즈 '자동목차'가 됩니다.

사용하는 블로그의 스킨 버전에 따라 목차 박스의 내부 여백이 다를 수 있습니다.

이때는 목차 코드 첫 번째 줄의 padding: 10px(상) 20px(좌) 10px(하) 30px(우);를 수정하여 간격을 맞춰주세요.

서식 1

<div style="padding: 10px 20px 10px 20px; margin: 10px 0px; background: #f3f8fe; border-radius: 10px; border: 1px solid #6c96ca; box-shadow: 1px 2px 3px 1px rgba(0,0,0,.1);">
<p style="border-bottom: 2px solid #6c96ca; font-weight: bold; color: #6c96ca;" data-ke-size="size16"><span style="font-size: 1.2em;">≣</span> 목차</p>
<ul id="toc" style="list-style-type: disc;"></ul>
<script type="text/javascript"> $(function(){  $("#toc").toc({content: ".tt_article_useless_p_margin", headings: "h2, h3, h4"}); });</script>
</div>

서식 2

<div style="padding: 10px 20px 10px 20px; margin: 10px 0px; background: rgba(0,0,0,0.01); border-radius:10px; border: 1px solid #ccd0d7; box-shadow: 1px 2px 3px 1px rgba(0,0,0,.1);">
<p style="border-bottom: 2px solid #ccd0d7; font-weight: 600;" data-ke-size="size16"><span style="font-size: 1.2em;">≣</span> 목차</p>
<ul id="toc" style="list-style-type: disc;"></ul>
<script type="text/javascript"> $(function(){  $("#toc").toc({content: ".tt_article_useless_p_margin", headings: "h2, h3, h4"}); });</script>
</div>

서식 3

<div style="padding: 10px 20px 10px 20px; margin: 10px 0px; background: #FCF6F5; border-radius: 10px; border: 1px solid #2BAE66; box-shadow: 1px 2px 3px 1px rgba(0,0,0,.1);">
<p style="border-bottom: 2px solid #2BAE66; font-weight: bold; color: #2BAE66;" data-ke-size="size16"><span style="font-size: 1.2em;">≣</span> 목차</p>
<ul id="toc" style="list-style-type: disc;"></ul>
<script type="text/javascript"> $(function(){  $("#toc").toc({content: ".tt_article_useless_p_margin", headings: "h2, h3, h4"}); });</script>
</div>

서식 4

<div style="padding: 10px 20px 10px 20px; margin: 10px 0px; background: #F9EBDE; border-radius: 10px; border: 1px solid #815854; box-shadow: 1px 2px 3px 1px rgba(0,0,0,.1);">
<p style="border-bottom: 2px solid #815854; font-weight: bold; color: #815854;" data-ke-size="size16"><span style="font-size: 1.2em;">≣</span> 목차</span></p>
<ul id="toc" style="list-style-type: disc;"></ul>
<script type="text/javascript"> $(function(){  $("#toc").toc({content: ".tt_article_useless_p_margin", headings: "h2, h3, h4"}); });</script>
</div>

서식 5

<div style="padding: 10px 20px 10px 20px; margin: 10px 0px; background: #f7f3ff; border-radius: 10px; border: 1px solid #8c6aed; box-shadow: 1px 2px 3px 1px rgba(0,0,0,.1);">
<p style="border-bottom: 2px solid #8c6aed;"><span style="color: #8c6aed; font-weight: bold; font-size:1.2em;">≣ Contents</span></p>
<ul id="toc" style="list-style-type: disc;"></ul>
<script type="text/javascript"> $(function(){  $("#toc").toc({content: ".tt_article_useless_p_margin", headings: "h2, h3, h4"}); });</script>
</div>

서식 6

<div style="position: relative; padding: 5px 25px 10px 65px; margin: 10px 0px; background-color: #fdfdfd; border-radius: 0px 10px; border: 1px solid #e5e5e5; box-shadow: 1px 2px 3px 1px rgba(0,0,0,.1);">
<div style="position: absolute; top: -1px; left: 14px; width: 30px; height: 47px; background-color: #009bff;">&nbsp;</div>
<p style="border-bottom: 2px solid #e5e5e5;"data-ke-size="size18"><span style="color: #006dd7; font-size: 1.1em; font-weight: bold">목차</span></p>
<div style="position: absolute; top: 17px; left: 14px; width: 0; height: 0; border: 15px solid; border-color: transparent transparent #fdfdfd transparent;">&nbsp;</div>
<ul id="toc" style="list-style-type: square;"></ul>
<script type="text/javascript"> $(function(){  $("#toc").toc({content: ".tt_article_useless_p_margin", headings: "h1, h2, h3, h4"}); });</script>
</div>

서식 7

<div style="position: relative; padding: 5px 25px 10px 65px; margin: 10px 0px; background-color: #fdfdfd; border-radius: 0px 10px; border: 1px solid #e5e5e5; box-shadow: 1px 2px 3px 1px rgba(0,0,0,.1);">
<div style="position: absolute; top: -1px; left: 14px; width: 30px; height: 47px; background-color: #e60012;">&nbsp;</div>
<p style="border-bottom: 2px solid #e5e5e5;"data-ke-size="size18"><span style="color: #e60012; font-size: 1.1em; font-weight: bold">목차</span></p>
<div style="position: absolute; top: 17px; left: 14px; width: 0; height: 0; border: 15px solid; border-color: transparent transparent #fdfdfd transparent;">&nbsp;</div>
<ul id="toc" style="list-style-type: square;"></ul>
<script type="text/javascript"> $(function(){  $("#toc").toc({content: ".tt_article_useless_p_margin", headings: "h1, h2, h3, h4"}); });</script>
</div>

서식 8

<div style="position: relative; padding: 5px 25px 10px 65px; margin: 10px 0px; background-color: #fdfdfd; border: 1px solid #e5e5e5; border-radius: 10px; box-shadow: 1px 1px 1px 0px rgba(0,0,0,.1);">
<div style="position: absolute; top: -1px; right: 20px; width: 30px; height: 47px; background-color: #12b886;">&nbsp;</div>
<p style="border-bottom: 2px solid #e5e5e5; font-weight: bold;" data-ke-size="size16"><span style=" font-size: 1.2em;">≣</span> 목차</p>
<div style="position: absolute; top: 17px; right: 20px; width: 0; height: 0; border: 15px solid; border-color: transparent transparent #fdfdfd transparent;">&nbsp;</div>
<ul id="toc" style="list-style-type: square;"></ul>
<script type="text/javascript"> $(function(){  $("#toc").toc({content: ".tt_article_useless_p_margin", headings: "h2, h3, h4"}); });</script>
</div>

서식 9

<div style="width: 150px; height: 0px; margin: 0.5em 0em 0em 0em; border-bottom: 35px solid #bbb; border-right: 35px solid rgba(0,0,0,0); border-radius: 10px 0px 0px 0px;"><span style="padding: 0px 30px; position: relative; bottom: -10px; font-weight: 800; font-size: 1.1em; color: #ffffff;">목차</span></div>
<div style="background: #bbb; margin: 0em 0em 1em 0em; padding: 10px 0px 0px 0px; border-radius: 0px 10px 20px 20px;">
<div style="background: #fff; border: 2px solid #bbb; padding: 10px 20px 10px 20px; border-radius: 10px;">
<ul id="toc" style="list-style-type: disc;" data-ke-list-type="disc"></ul>
<script type="text/javascript"> $(function(){  $("#toc").toc({content: ".tt_article_useless_p_margin", headings: "h2, h3, h4"}); });</script>
</div>
</div>

서식 10

<div style="padding: 5px 30px 10px 30px; margin: 0.5em 0em; background-color: #fff; border: 2px solid; border-color: #444; border-radius: 10px;"><center><span style="background-color: #444; position: relative; margin: 0px 5px; padding: 8px 30px; bottom: 15px; border-radius: 50px; font-weight: bold; color: #ffffff;">목 차</span></center>
<ul id="toc" style="list-style-type: disc; padding: 0px 20px 0px 0px;" data-ke-list-type="disc"></ul>
<script type="text/javascript"> $(function(){  $("#toc").toc({content: ".tt_article_useless_p_margin", headings: "h2, h3, h4"}); });</script>
</div>

서식 11

<div style="padding: 5px 30px 10px 30px; margin: 0.5em 0em; background-color: #fff8fb; border: 2px solid; border-color: #f24385; border-radius: 10px;"><center><span style="background-color: #f24385; position: relative; margin: 0px 5px; padding: 8px 30px; bottom: 15px; border-radius: 50px; font-weight: bold; color: #ffffff;">목 차</span></center>
<ul id="toc" style="list-style-type: disc; padding: 0px 20px 0px 0px;" data-ke-list-type="disc"></ul>
<script type="text/javascript"> $(function(){  $("#toc").toc({content: ".tt_article_useless_p_margin", headings: "h2, h3, h4"}); });</script>
</div>

서식 12

<div style="padding: 5px 30px 10px 30px; margin: 0.5em 0em; background-color: #f6f6ff; border: 2px solid; border-color: #6c7ae0; border-radius: 10px;"><center><span style="background-color: #6c7ae0; position: relative; margin: 0px 5px; padding: 8px 30px; bottom: 15px; border-radius: 50px; font-weight: bold; color: #ffffff;">목 차</span></center>
<ul id="toc" style="list-style-type: disc; padding: 0px 20px 0px 0px;" data-ke-list-type="disc"></ul>
<script type="text/javascript"> $(function(){  $("#toc").toc({content: ".tt_article_useless_p_margin", headings: "h2, h3, h4"}); });</script>
</div>

728x90

자동목차 #2 서식 모음 이슈 해결

홈 목록에 '목차'가 표시되는 문제가 있습니다.

자동목차 #2를 글 최상단에 적용하면, 아래처럼 홈 목록에 '목차'가 표시되는 문제가 있습니다.

이를 해결하기 위해 CSS 코드를 추가 후 서식을 수정할 예정입니다..

CSS 코드 추가.

1) CSS 탭으로 이동 후 아래 코드를 기존 TOC 코드 위에 추가합니다.

#toc-ym:before {
    content: "목차"; /*목차*/
    display: block; /*div 기본값 적용*/
    font-size: 1.1em; /*폰트 크기*/
    font-weight: bold; /*폰트 굵게*/
    margin: 10px 1px -15px 1px; /*외부 여백*/
}

2) 코드를 추가 후 [적용]을 눌러 '저장'합니다.

자동목차 서식 수정

1) 기존의 서식 코드에서 <p> 코드를 <div> 코드로 바꿔 줍니다.

[수정전 코드]

<div style="padding: 10px 20px 10px 20px; margin: 10px 0px; background: #f3f8fe; border-radius: 10px; border: 1px solid #6c96ca; box-shadow: 1px 2px 3px 1px rgba(0,0,0,.1);">
<p style="border-bottom: 2px solid #6c96ca; font-weight: bold; color: #6c96ca;" data-ke-size="size16"><span style="font-size: 1.2em;">≣</span> 목차</p> ← 변경할 코드
<ul id="toc" style="list-style-type: disc;"></ul>
<script type="text/javascript"> $(function(){  $("#toc").toc({content: ".tt_article_useless_p_margin", headings: "h2, h3, h4"}); });</script>
</div>

[수정후 코드]

<div style="padding: 10px 20px 10px 20px; margin: 10px 0px; background: #f3f8fe; border-radius: 10px; border: 1px solid #6c96ca; box-shadow: 1px 2px 3px 1px rgba(0,0,0,.1);">
<div id="toc-ym" style="border-bottom: 2px solid #6c96ca; color: #6c96ca;">&nbsp;</div> ← 변경된 코드
<ul id="toc" style="list-style-type: disc;"></ul>
<script type="text/javascript"> $(function(){  $("#toc").toc({content: ".tt_article_useless_p_margin", headings: "h2, h3, h4"}); });</script>
</div>

2) 코드설명

아래 설명대로 목차와 어울리게 밑줄과 폰트의 색상을 변경해 주면 됩니다.

<div id="toc-ym" style="border-bottom: 2px solid #434343; color: #535353;">&nbsp;</div>

<div id="toc-ym" ← 목차 id, 변경금지

style="border-bottom: 2px solid #434343; ← 밑줄: 굵기, 종류, 색상

color: #535353; ← #목차 색상

"> </div>

3) 적용된 모습

추가 팁

여기서 둥근 점이나 숫자가 나오는 게 싫으신 분은 "decimal" 나 "disc"를 "none"로 바꿔주시면 됩니다.

🔻 '자동목차'의 목록 앞 마커의 모양을 정하는 속성 코드

<ol id="toc" style="list-style-type: disc;" data-ke-list-type="disc"></ol> 점
리스트1 리스트2	disc
리스트1 리스트2	circle
리스트1 리스트2	square
<ul id="toc" style="list-style-type: decimal;" data-ke-list-type="decimal"></ul> 숫자
리스트1 리스트2	decimal
리스트1 리스트2	decimal-leading-zero
리스트1 리스트2	upper-latin

티스토리 자동목차 HTML 서식 모음집 #1 | 북클럽 스킨

TOC 자동목차(HTML) 서식 모음.

자동목차 수정에 필요한 HTML 코드

TOC 자동목차 Part 2 서식 모음

1. 제목의 길이에 따라 가로길이가 달라지는 자동목차 코드

서식 1

서식 2

서식 3

서식 4

서식 5

서식 6

서식 7

서식 8

서식 9

서식 10

2. 풀사이즈 고정형 자동목차 코드

서식 1

서식 2

서식 3

서식 4

서식 5

서식 6

서식 7

서식 8

서식 9

서식 10

서식 11

서식 12

자동목차 #2 서식 모음 이슈 해결

홈 목록에 '목차'가 표시되는 문제가 있습니다.

CSS 코드 추가.

자동목차 서식 수정

추가 팁

🔻 '자동목차'의 목록 앞 마커의 모양을 정하는 속성 코드

관련글 바로가기

티스토리툴바

티스토리 자동목차 HTML 서식 모음집 #1 | 북클럽 스킨

TOC 자동목차(HTML) 서식 모음.

자동목차 수정에 필요한 HTML 코드

TOC 자동목차 Part 2 서식 모음

1. 제목의 길이에 따라 가로길이가 달라지는 자동목차 코드

서식 1

서식 2

서식 3

서식 4

서식 5

서식 6

서식 7

서식 8

서식 9

서식 10

2. 풀사이즈 고정형 자동목차 코드

서식 1

서식 2

서식 3

서식 4

서식 5

서식 6

서식 7

서식 8

서식 9

서식 10

서식 11

서식 12

자동목차 #2 서식 모음 이슈 해결

홈 목록에 '목차'가 표시되는 문제가 있습니다.

CSS 코드 추가.

자동목차 서식 수정

추가 팁

🔻 '자동목차'의 목록 앞 마커의 모양을 정하는 속성 코드

관련글 바로가기

• 관련글 바로가기

티스토리툴바