contents
2023.02.19 ๋ชจ๋ฐ์ผ์ฑ์์๋ ๋ชฉ์ฐจ๊ฐ ์์ฑ๋์ง ์์์ ํ์ธํ์์ต๋๋ค. ๋ชจ๋ฐ์ผ์น์์๋ ์ ์์ ์ผ๋ก ๋ชฉ์ฐจ๊ฐ ์์ฑ๋ฉ๋๋ค.
2023.04.05 ์ ํ์ง ์๋ ๋ชฉ์ฐจ๋ฅผ ์์ฑํ๋ html ๋งํฌ์ ์ ์ถ๊ฐํ์์ต๋๋ค.
๋ชฉ์ฐจ๋ ํฐ์คํ ๋ฆฌ์ ์ ๋ชฉ1~์ ๋ชฉ3์ ์์งํ์ฌ ์์๋๋ก ๋ณด์ฌ์ฃผ๋ ๊ฒ์ด๋ค. ๋ชฉ์ฐจ๋ ํ์์ ๋ ผ๋ฆฌ์ ๊ธ์ฐ๊ธฐ๋ฅผ ๋๊ณ ๋ ์์ ๊ธ ์ดํด๋ฅผ ๋๋๋ค. ํฐ์คํ ๋ฆฌ์ ๊ฐ์ ์ค๊ธ ํ์์ ๋ธ๋ก๊ทธ์์ ๋ชฉ์ฐจ๊ฐ ๋๋ฌด ๊ธธ์ด์ง๋ฉด ๋ด์ฉ์ด ๋ฆ๊ฒ ๋ ธ์ถ๋๋ ๋ถํธํจ์ด ์๋ค. ๋ฐ๋ผ์ ์ด ํฌ์คํธ์์๋ ์ ๊ณ ํผ ์ ์๋ ๋ชฉ์ฐจ๋ฅผ ์์ฑํ๋ ๋ฐฉ๋ฒ์ ์๊ฐํ๋ค.
์ธํ
js ํ์ผ ๋ค์ด
์๋์ ํ์ผ์ ๋ค์ด๋ฐ๋๋ค. hํ๊ทธ๋ก ๋ชฉ์ฐจ๋ฅผ ๋ง๋ค์ด์ฃผ๋ ํ๋ฌ๊ทธ์ธ์ ์ถ์(minify)ํ javascript ํ์ผ์ด๋ค.
์ฐธ๊ณ ๋ก ํฐ์คํ ๋ฆฌ์ ์ ๋ชฉ1, ์ ๋ชฉ2, ์ ๋ชฉ3์ ๊ฐ๊ฐ h2, h3, h4 ํ๊ทธ์ ๋์น๋๋ค.
js ํ์ผ ์ ๋ก๋
๋ธ๋ก๊ทธ ์ค์ >๊พธ๋ฏธ๊ธฐ>์คํจ ํธ์ง์ ๋ค์ด๊ฐ html ํธ์ง์ ์์ํ๋ค.
ํ์ผ์ ๋ก๋๋ก ์ด๋ํ์ฌ ๋งจ ์๋ [+์ถ๊ฐ]๋ก ๋ฐ์ js ํ์ผ์ ์ฌ๋ฆฐ๋ค.
์ ๋ก๋ํ jquery.toc.min.js์ ์ฐํด๋ฆญํ์ฌ ๋งํฌ ์ฃผ์๋ฅผ ๋ณต์ฌํด๋๋ค.
html ์์
header ํ๊ทธ ์์ ๋ค์๊ณผ ๋ค์๊ณผ ๊ฐ์ ์คํฌ๋ฆฝํธ๋ฅผ ๋ฃ๋๋ค.
<script type="text/javascript" src="{์๊น ๋ณต์ฌํด๋ js ํ์ผ ๋งํฌ}"></script>
์์ ๋ฑ๋ก
๋ธ๋ก๊ทธ ์ค์ >์ฝํ ์ธ >์์ ๊ด๋ฆฌ์์ ์์ ์ฐ๊ธฐ๋ฅผ ์์ํ๋ค.
์ค๋ฅธ์ชฝ ์๋จ์ HTML ๋ชจ๋๋ก ์ง์ ํ๋ค.
์์ ์ ๋ชฉ์ ์ ๋ ฅํ๊ณ ์๋์ ์ฝ๋๋ฅผ ๊ทธ๋๋ก ๋ณต์ฌํ์ฌ ๋ถ์ฌ๋ฃ๊ณ ์ ์ฅํ๋ค.
<div data-ke-type="moreLess" data-text-more="contents" data-text-less="close"><a class="btn-toggle-moreless">๋๋ณด๊ธฐ</a>
<div class="moreless-content">
<div class="txc-textbox">
<p data-ke-size="size26"><b>contents</b></p>
<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" , top: -90, isBlink : true, blinkColor : '#3669CF' } ) });
</script>
</div>
</div>
</div>
+์ ํ์ง ์๋ ๋ชฉ์ฐจ
๋ชจ๋ฐ์ผ ํ๊ฒฝ์์ ์๋ณด์ด๋ ๊ฒฝ์ฐ๊ฐ ๋ง์ ์ถ๊ฐํ์ต๋๋ค. 2023.04.05
<div class="txc-textbox">
<p data-ke-size="size26"><b>๋ชฉ์ฐจ</b></p>
<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" , top: -90, isBlink : true, blinkColor : '#3669CF' } ) });
</script>
</div>
์คํ
์๋จ์ ํด๋ฐ๋ฅผ ๋๋ฌ ๋ง๋ ์์์ ์ํ๋ ์์น์ ๋ฃ๋๋ค.
์๋์ ๊ฐ์ด ์์์ด ๋ค์ด๊ฐ๋ค.
์ด ์์์ ์ ์๊ธ ์์ ๋ชฉ์ฐจ๊ฐ ์์ฑ๋๋ฏ๋ก ๋ฏธ๋ฆฌ๋ณด๊ธฐ๋ฅผ ํด๋ ๋ชฉ์ฐจ๋ฅผ ๋ณผ ์ ์๋ค.
๊ธ์ ๋ฐํํ๊ณ ๋๋ฉด ๋ค์๊ณผ ๊ฐ์ด ๋ชฉ์ฐจ๋ฅผ ๋๋ฌ ํ์ธํ ์ ์๋ค.
์ฐธ๊ณ
https://www.codingfactory.net/12114