
๋จผ์ ์ฐ๋ฆฌ๊ฐ ๊ธ์ ์์ฑํ๊ธฐ์ ์์ ๋ชฉ์ฐจ๋ก ์ผ๋ชฉ์์ฐํ๊ฒ ์ ๋ฆฌํ ํ์๊ฐ ์๋ค.
๋ด๊ฐ ์ํ๊ณ ์ ํ๋ ๋ฐ๋ฅผ ๋น ๋ฅด๊ฒ ์บ์นํ ์ ์๋ค๋ ์ฅ์ ์ด ์๊ธฐ ๋๋ฌธ์ด๋ค.
์ด๋ฅผ ์ํด ์๋์ผ๋ก ๋ชฉ์ฐจ๋ฅผ ์ ๋ฆฌํ ์ ์๋ ๋ฐฉ๋ฒ์ ํฌ์คํ ํ๊ณ ์ ํ๋ค.
์๋์ผ๋ก ๋ชฉ์ฐจ๋ฅผ ๋ง๋๋ ๋ฐฉ๋ฒ์ ๋งค๋ฒ ์ง์ ํธ์งํ ์๋ ์์ง๋ง, ์์์ผ๋ก ๊ฐ์ดํ๊ฒ ์ฌ์ฉํ ์๋ ์๋ค.
์ด์ ๊ด๋ จํ์ฌ๋ ์๋ ํฌ์คํ ํด๋ฆญํ๋ฉด ์ ๋ฆฌ๋ ๋ด์ฉ์ ๋ณผ ์ ์๋ค.
โ . jquery_toc ํ์ผ ๋ฑ๋กํ๊ธฐ
1. jquery_toc ํ์ผ ๋ค์ด๋ก๋
๋จผ์ ๋ชฉ์ฐจ๋ฅผ ๋ง๋ค๊ธฐ ์ํ์ฌ๋ jquery_toc ํ์ผ์ ๋ฑ๋กํด์ผ ํ๋ค.
๋ชฉ์ฐจ๋ฅผ ๋ง๋ค์ด ์ค ์ ์๋ ํ๋ก๊ทธ๋จ์ผ๋ก ํด๋น ํ์ผ์ ์์ถ๋์ด ์๋ค.
์๋์ ๊ฐ์ด "jquery.toc", " jquery.toc.min " 2๊ฐ์ง๊ฐ ์๋๋ฐ, jquery.toc.min ํ์ผ์ด ๋ ์ ๊ทธ๋ ์ด๋ ๋ ํ์ผ์ด๋ค.
๋คํธ์ํฌ์ ๋น ๋ฅผ ์๋๋ฅผ ์ํด์ ์์ถํด๋์ ํ์ผ์ด๋ฉฐ, jquery.toc.min๋ง ๋ฑ๋กํ์ฌ๋ ๋ฌด๋ฐฉํ๋ค.

2. jquery_toc ํ์ผ ๋ฑ๋กํ๊ธฐ


๋จผ์ ์ค์ > ์คํจํธ์ง > HTML ํธ์ง์ ๋ค์ด๊ฐ๋ค.
ํ์ผ ์ ๋ก๋๋ฅผ ํด๋ฆญ ํ ํด๋น ํ์ผ์ ์ถ๊ฐํ๋ฉด ๋ฑ๋ก์ ์ฐจ๊ฐ ๋ง๋ฌด๋ฆฌ ๋๋ค.


โ ก. HTML ๋ฐ CSS ์ฝ๋ ํธ์งํ๊ธฐ
1. HTML ์ฝ๋ ๋ค์ด๋ก๋
HTML์ ์ธ ๊ตฐ๋ฐ์ ์ถ๊ฐํด์ผ ํ๋ค.
1) Head์ ์ถ๊ฐํ๊ธฐ
2) Body ๋ ๋ถ๋ถ ์ถ๊ฐํ๊ธฐ
3) Body ์ค๊ฐ ๋ถ๋ถ ์ถ๊ฐํ๊ธฐ
2. HTML ์ฝ๋ ํธ์งํ๊ธฐ
HTML์ ์ถ๊ฐํด์ผ ํ๋ ์ธ ๊ณณ์ ๋ค์๊ณผ ๊ฐ๋ค.
1) Head์ ์ถ๊ฐํ๊ธฐ

<head>
......
<!-- jquery toc ๋ชฉ์ฐจ -->
<script src="./images/jquery.toc.min.js" ></script>
</head>
2) Body ๋ ๋ถ๋ถ ์ถ๊ฐํ๊ธฐ
<script>
$(document).ready(function() {
$("#toc_list").toc({
content: ".tt_article_useless_p_margin",
headings: "h2,h3,h4,h5"
});
</script>
</body>
3) Body ์ค๊ฐ ๋ถ๋ถ ์ถ๊ฐํ๊ธฐ

3. CSS ์ฝ๋ ๋ค์ด๋ก๋
CSS๋ ๊พธ๋ฉฐ์ฃผ๋ ์ฝ๋์ด๋ค.
์๋ ์ฒจ๋ถํ์ผ ๋ค์ด๋ก๋ ํ ๋ค, ํ๋จ ํธ์งํ๊ธฐ๋ฅผ ์ฐธ๊ณ ํ์์ด ๋ถ์ฌ๋ฃ์ผ๋ฉด ๋๋ค.
4. CSS ์ฝ๋ ํธ์งํ๊ธฐ
CSS ํญ์ผ๋ก ๊ฐ์, ์๋์ ๊ฐ์ด ์ถ๊ฐํด์ค๋ค.

์ค์ ๋ก ์ฝ์ ๋ ๋ชฉ์ฐจ๋ฅผ ๊ณ์ ํ์ธํด๋ณด๋ฉฐ
์ทจํฅ์ ๋ง๊ฒ ์กฐ์ ํ์ฌ ๋ฃ์ ์ ์๋ค.
์ด์ธ ํฐ์คํ ๋ฆฌ ๊ธฐ๋ณธ ์ ํ ๋ฐฉ๋ฒ
[์๋์ผ์ค ๋์ ๊ธฐ 01] ํฐ์คํ ๋ฆฌ ๋ธ๋ก๊ทธ ์์.. : ๋ค์ด๋ฒ๋ธ๋ก๊ทธ (naver.com)
[์๋์ผ์ค ๋์ ๊ธฐ 01] ํฐ์คํ ๋ฆฌ ๋ธ๋ก๊ทธ ์์์ ์์ ๊ธฐ๋ณธ ์ ํ ๋ฐฉ๋ฒ
์์ ์ ํฐ์คํ ๋ฆฌ ๋ธ๋ก๊ทธ๋ฅผ ์์ํ ์ ์ด ์๋ค. ๋น์์๋ ํธ์ ๋ ์ค๋นํ์๊ณ , ์ฌ๋ฌ๊ฐ์ง๋ก ์ผ์ด ๋ง์์ ์์๋ง...
blog.naver.com
์คํ ๋ฆฌ ๋ธ๋ก๊ทธ ๊ฒ์ ์์ง ์ต์ ํ(SEO) ๋ฐฉ๋ฒ
[์๋์ผ์ค ๋์ ๊ธฐ 02 ] ํฐ์คํ ๋ฆฌ ๋ธ๋ก๊ทธ ๊ฒ.. : ๋ค์ด๋ฒ๋ธ๋ก๊ทธ (naver.com)
[์๋์ผ์ค ๋์ ๊ธฐ 02 ] ํฐ์คํ ๋ฆฌ ๋ธ๋ก๊ทธ ๊ฒ์ ์์ง ์ต์ ํ(SEO)
1. ํฌ์คํธ ์ฃผ์ ๋ฌธ์๋ก ์ค์ ํ๊ธฐ 2. ๊ตฌ๊ธ๋ด ์ ๊ทผ์ ์ํ ๋ฉํํ๊ทธ ๋ฑ๋ก๋ฐฉ๋ฒ 3. ๊ตฌ๊ธ ์์น ์ฝ์ ํ๋ก๊ทธ๋จ ํ...
blog.naver.com
[์๋์ผ์ค ๋์ ๊ธฐ 03 ] ํฐ์คํ ๋ฆฌ ์ค(Zum.. : ๋ค์ด๋ฒ๋ธ๋ก๊ทธ (naver.com)
[์๋์ผ์ค ๋์ ๊ธฐ 03 ] ํฐ์คํ ๋ฆฌ ์ค(Zum)์์ง, ๋น(Bing)์์ง, ๋ค์ดํธ(Nate)์์ง ์ต์ ํ(SEO)
1. ์ค(Zum)์์ง ๋ฑ๋กํ๊ธฐ 2. ๋น(Bing)์์ง ๋ฑ๋กํ๊ธฐ 3. ๋ค์ดํธ(Nate)์์ง ๋ฑ๋กํ๊ธฐ #์ค #Zum์์ง ์ค Z...
blog.naver.com
