티스토리 자동 목차 코드 및 순서

티스토리 자동 목차 코드 및 순서

 

1. 파일업로드

 

articleToc.js

0.00MB

 

 

 

 

 

 

2. HTML

 

<!-- 목차 -->
<div id="tocContainer" data-tags="h2, h3">
    <div id="tocHeader">
        <span>목차</span>
        <button id="toggleToc">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M3 12H21" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                <path d="M3 6H21" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                <path d="M3 18H21" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
        </button>
    </div>
    <div id="tocContent" class="expanded">
        <div id="toc"></div>
    </div>
</div>
<!-- 목차 끝 -->

티스토리 자동 목차 코드 및 순서

 

1. 파일업로드

 

articleToc.js

0.00MB

 

 

 

 

 

 

2. HTML

 

<!-- 목차 -->
<div id="tocContainer" data-tags="h2, h3">
    <div id="tocHeader">
        <span>목차</span>
        <button id="toggleToc">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M3 12H21" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                <path d="M3 6H21" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                <path d="M3 18H21" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
        </button>
    </div>
    <div id="tocContent" class="expanded">
        <div id="toc"></div>
    </div>
</div>
<!-- 목차 끝 -->


</div>
<s_tag_label>

 

 

3. HTML

 

<script src="./images/articleToc.js"></script>

</body>
</html>

 

 

4. CSS

 

/* articleToc CSS 스타일 */
#tocContainer, #tocHeader, #tocContent {
box-sizing: border-box;
}

#tocContainer {
width: 100%;
position: relative;
margin-bottom: 15px;
}

#tocHeader {
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px 10px;
background-color: #f9f9f9;
border: 1px solid #ddd;
}

#tocContent {
width: 100%;
overflow: hidden;
transition: max-height 0.5s ease, padding 0.5s ease;
max-height: 0;
padding: 0;
border: 1px solid #ddd;
background-color: #f9f9f9;
}

#tocContent.expanded {
max-height: 2000px; /* 펼쳐진 상태의 높이 조절 */
padding: 10px;
}

#toc {
font-size: 14px; /* 폰트 사이즈 */
color: #2b2a2a;
line-height: 1.2; /* 줄간격 숫자가 클수록 멀어짐 */
}

#toc ul {
list-style-type: none;
padding: 0;
margin: 0;
}

#toc li.h2 {
margin-left: 20px;
margin-top: 6px;
font-weight: bold; /* h2 볼드체 설정 */
}

#toc li.h2:before {
content: "•"; /* 작은 원으로 시작 */
margin-right: 5px; /* 원과 제목 사이의 간격 조절 */
}

#toc li.h3 {
    margin-left: 40px;
}

#toggleToc {
background-color: transparent;
border: none;
padding: 0;
cursor: pointer;
/* articleToc CSS 스타일 */
}

/* articleToc CSS 스타일 끝 */

 

반응형

</div>
<s_tag_label>

 

 

3. HTML

 

<script src="./images/articleToc.js"></script>

</body>
</html>

 

 

4. CSS

 

/* articleToc CSS 스타일 */
#tocContainer, #tocHeader, #tocContent {
box-sizing: border-box;
}

#tocContainer {
width: 100%;
position: relative;
margin-bottom: 15px;
}

#tocHeader {
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px 10px;
background-color: #f9f9f9;
border: 1px solid #ddd;
}

#tocContent {
width: 100%;
overflow: hidden;
transition: max-height 0.5s ease, padding 0.5s ease;
max-height: 0;
padding: 0;
border: 1px solid #ddd;
background-color: #f9f9f9;
}

#tocContent.expanded {
max-height: 2000px; /* 펼쳐진 상태의 높이 조절 */
padding: 10px;
}

#toc {
font-size: 14px; /* 폰트 사이즈 */
color: #2b2a2a;
line-height: 1.2; /* 줄간격 숫자가 클수록 멀어짐 */
}

#toc ul {
list-style-type: none;
padding: 0;
margin: 0;
}

#toc li.h2 {
margin-left: 20px;
margin-top: 6px;
font-weight: bold; /* h2 볼드체 설정 */
}

#toc li.h2:before {
content: "•"; /* 작은 원으로 시작 */
margin-right: 5px; /* 원과 제목 사이의 간격 조절 */
}

#toc li.h3 {
    margin-left: 40px;
}

#toggleToc {
background-color: transparent;
border: none;
padding: 0;
cursor: pointer;
/* articleToc CSS 스타일 */
}

/* articleToc CSS 스타일 끝 */