Blog/Tistory. ์„œ์‹ ํŒŒ์ผ

[์ž๋™ ๋ชฉ์ฐจ] ํ‹ฐ์Šคํ† ๋ฆฌ ์ž๋™๋ชฉ์ฐจ ๋งŒ๋“ค๊ธฐ (JS ํŒŒ์ผ ๋“ฑ๋ก, HTML ํŽธ์ง‘, CSS ํŽธ์ง‘ ํŒŒ์ผ ์ œ๊ณต)

๋ชฝ๋ฌผ๊ณ ๊ธฐ๐“†œ 2023. 6. 2. 13:04
728x90
728x90

 

 

๋จผ์ € ์šฐ๋ฆฌ๊ฐ€ ๊ธ€์„ ์ž‘์„ฑํ•˜๊ธฐ์— ์•ž์„œ ๋ชฉ์ฐจ๋กœ ์ผ๋ชฉ์š”์—ฐํ•˜๊ฒŒ ์ •๋ฆฌํ•  ํ•„์š”๊ฐ€ ์žˆ๋‹ค. 

 

๋‚ด๊ฐ€ ์›ํ•˜๊ณ ์ž ํ•˜๋Š” ๋ฐ”๋ฅผ ๋น ๋ฅด๊ฒŒ ์บ์น˜ํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ์žฅ์ ์ด ์žˆ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. 

 

์ด๋ฅผ ์œ„ํ•ด ์ž๋™์œผ๋กœ ๋ชฉ์ฐจ๋ฅผ ์ •๋ฆฌํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์„ ํฌ์ŠคํŒ…ํ•˜๊ณ ์ž ํ•œ๋‹ค. 

 

 ์ˆ˜๋™์œผ๋กœ ๋ชฉ์ฐจ๋ฅผ ๋งŒ๋“œ๋Š” ๋ฐฉ๋ฒ•์€ ๋งค๋ฒˆ ์ง์ ‘ ํŽธ์ง‘ํ•  ์ˆ˜๋„ ์žˆ์ง€๋งŒ, ์„œ์‹์œผ๋กœ ๊ฐ„์ดํ•˜๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜๋„ ์žˆ๋‹ค.

์ด์™€ ๊ด€๋ จํ•˜์—ฌ๋Š” ์•„๋ž˜ ํฌ์ŠคํŒ… ํด๋ฆญํ•˜๋ฉด ์ •๋ฆฌ๋œ ๋‚ด์šฉ์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.



 

 


 

 

โ… . jquery_toc ํŒŒ์ผ ๋“ฑ๋กํ•˜๊ธฐ 

 

1.  jquery_toc ํŒŒ์ผ ๋‹ค์šด๋กœ๋“œ

 

๋จผ์ € ๋ชฉ์ฐจ๋ฅผ ๋งŒ๋“ค๊ธฐ ์œ„ํ•˜์—ฌ๋Š”  jquery_toc ํŒŒ์ผ์„ ๋“ฑ๋กํ•ด์•ผ ํ•œ๋‹ค. 

๋ชฉ์ฐจ๋ฅผ ๋งŒ๋“ค์–ด ์ค„ ์ˆ˜ ์žˆ๋Š” ํ”„๋กœ๊ทธ๋žจ์œผ๋กœ ํ•ด๋‹น ํŒŒ์ผ์€ ์••์ถ•๋˜์–ด ์žˆ๋‹ค. 

 

jquery_toc.zip
0.00MB

์•„๋ž˜์™€ ๊ฐ™์ด "jquery.toc", " jquery.toc.min " 2๊ฐ€์ง€๊ฐ€ ์žˆ๋Š”๋ฐ,  jquery.toc.min ํŒŒ์ผ์ด ๋” ์—…๊ทธ๋ ˆ์ด๋“œ ๋œ ํŒŒ์ผ์ด๋‹ค. 

 

๋„คํŠธ์›Œํฌ์ƒ ๋น ๋ฅผ ์†๋„๋ฅผ ์œ„ํ•ด์„œ ์••์ถ•ํ•ด๋†“์€ ํŒŒ์ผ์ด๋ฉฐ,  jquery.toc.min๋งŒ ๋“ฑ๋กํ•˜์—ฌ๋„ ๋ฌด๋ฐฉํ•˜๋‹ค. 

 

jquery_toc ํŒŒ์ผ
jquery_toc ํŒŒ์ผ

 

 

2.  jquery_toc ํŒŒ์ผ ๋“ฑ๋กํ•˜๊ธฐ 

 

 

 

 

 

 

 

 

                         ๋จผ์ € ์„ค์ • > ์Šคํ‚จํŽธ์ง‘ > HTML ํŽธ์ง‘์„ ๋“ค์–ด๊ฐ„๋‹ค. 

 ํŒŒ์ผ ์—…๋กœ๋“œ๋ฅผ ํด๋ฆญ ํ›„ ํ•ด๋‹น ํŒŒ์ผ์„ ์ถ”๊ฐ€ํ•˜๋ฉด ๋“ฑ๋ก์ ˆ์ฐจ๊ฐ€ ๋งˆ๋ฌด๋ฆฌ ๋œ๋‹ค. 

 


 

โ…ก. HTML ๋ฐ CSS ์ฝ”๋“œ ํŽธ์ง‘ํ•˜๊ธฐ 

 

 

1.  HTML ์ฝ”๋“œ ๋‹ค์šด๋กœ๋“œ 

 

HTML์€ ์„ธ ๊ตฐ๋ฐ์— ์ถ”๊ฐ€ํ•ด์•ผ ํ•œ๋‹ค. 

 

1) Head์— ์ถ”๊ฐ€ํ•˜๊ธฐ

Head์ถ”๊ฐ€.txt
0.00MB

 

 2) Body ๋ ๋ถ€๋ถ„ ์ถ”๊ฐ€ํ•˜๊ธฐ 

body์ถ”๊ฐ€.txt
0.00MB

 

3) Body ์ค‘๊ฐ„ ๋ถ€๋ถ„  ์ถ”๊ฐ€ํ•˜๊ธฐ 

body์ถ”๊ฐ€ 2.txt
0.00MB

 

 


 

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๋Š” ๊พธ๋ฉฐ์ฃผ๋Š” ์ฝ”๋“œ์ด๋‹ค. 

์•„๋ž˜ ์ฒจ๋ถ€ํŒŒ์ผ ๋‹ค์šด๋กœ๋“œ ํ•œ ๋’ค, ํ•˜๋‹จ ํŽธ์ง‘ํ•˜๊ธฐ๋ฅผ ์ฐธ๊ณ ํ•˜์‹œ์–ด ๋ถ™์—ฌ๋„ฃ์œผ๋ฉด ๋œ๋‹ค. 

css์ถ”๊ฐ€.txt
0.00MB

 

 


 

4. CSS ์ฝ”๋“œ ํŽธ์ง‘ํ•˜๊ธฐ 

 

CSS ํƒญ์œผ๋กœ ๊ฐ€์„œ, ์•„๋ž˜์™€ ๊ฐ™์ด ์ถ”๊ฐ€ํ•ด์ค€๋‹ค. 

 

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

 

 


 

 

 

728x90
728x90