์ธํ”„๋Ÿฐ ์˜๋ฌธ ๋ธŒ๋žœ๋“œ ๋กœ๊ณ 
์ธํ”„๋Ÿฐ ์˜๋ฌธ ๋ธŒ๋žœ๋“œ ๋กœ๊ณ 

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ES6+ ๊ธฐ์ดˆ ํ•ต์‹ฌ ๋ฌธ๋ฒ•

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์— ์ฒ˜์Œ ์ž…๋ฌธํ•˜์‹œ๋Š” ๋ถ„๋“ค์ด ๋ชจ๋˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์— ๋Œ€ํ•ด ์•Œ์•„์•ผ ํ•˜๋Š” ํ•ต์‹ฌ ๋ฌธ๋ฒ•์„ ์งง๊ณ  ๊ตต๊ฒŒ ์ •๋ฆฌํ–ˆ์Šต๋‹ˆ๋‹ค. ๋ฌธ๋ฒ• ๊ณต๋ถ€๋Š” ํ•œ ๋ฒˆ์— ํ™•์‹คํ•˜๊ฒŒ ๊ทธ๋ฆฌ๊ณ  ์งง๊ฒŒ ๋๋‚ด๊ณ , ์†Œ์ค‘ํ•œ ์‹œ๊ฐ„์€ ๋ฌด์–ธ๊ฐ€ ๋งŒ๋“œ๋Š”๋ฐ ํˆฌ์žํ•˜์„ธ์š”!

Thumbnail

์ดˆ๊ธ‰์ž๋ฅผ ์œ„ํ•ด ์ค€๋น„ํ•œ
[ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด, ์›น ๊ฐœ๋ฐœ] ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๊ฑธ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์–ด์š”

  • ์ž…๋ฌธ์ž๋ฅผ ์œ„ํ•œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ธฐ์ดˆ ๋ฌธ๋ฒ•

  • ์ตœ์‹  ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ํ•ต์‹ฌ ๋ฌธ๋ฒ•

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๊ธฐ์ดˆ ํ•ต์‹ฌ ๋ฌธ๋ฒ•,
์งง๊ณ  ๊ตต๊ฒŒ ๋๋‚ผ ์ˆ˜ ์žˆ์–ด์š” ๐Ÿ˜š

JS ๊ธฐ์ดˆ ๋ฌธ๋ฒ•์—์„œ ์˜ˆ์ œ๊นŒ์ง€ ์™„์ถฉ ๐Ÿ”‹

์ด ๊ฐ•์˜๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์— ์ž…๋ฌธํ•˜๋Š” ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์ž…๋ฌธ์ž๋ฅผ ์œ„ํ•ด ๋งŒ๋“ค์–ด์กŒ์œผ๋ฉฐ, ๊ธฐ์ดˆ ํ•ต์‹ฌ ๋ฌธ๋ฒ•์„ ์š”์•ฝํ•˜์—ฌ '๋ฌดํ•œ ๋ฌธ๋ฒ• ๊ณต๋ถ€' ๊ตด๋ ˆ๋ฅผ ์ตœ๋Œ€ํ•œ ์งง๊ณ  ๊ตต๊ฒŒ ๋๋‚ผ ์ˆ˜ ์žˆ๋„๋ก ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค. ์ด ๊ฐ•์˜๋ฅผ ํ†ตํ•ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ES6+ ๋ฌธ๋ฒ•์— ๋Œ€ํ•ด ํ•™์Šตํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, ๊ฐ•์˜๋ฅผ ์ˆ˜๊ฐ•ํ•œ ์ดํ›„์—๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฏธ๋‹ˆ ํ”„๋กœ์ ํŠธ ์ œ์ž‘, ์„œ๋น„์Šค ๋งŒ๋“ค๊ธฐ ์˜ˆ์ œ ๋“ฑ์œผ๋กœ ๋„˜์–ด๊ฐ€์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์กฐ๊ฑด๋ฌธ, ๋ฐ˜๋ณต๋ฌธ ๋“ฑ
๊ธฐ์ดˆ ๊ฐœ๋…๋ถ€ํ„ฐ ์ฐจ๊ทผ์ฐจ๊ทผ!

DOM, ์ด๋ฒคํŠธ ์ฒ˜๋ฆฌ๋กœ
HTML ๋ฌธ์„œ ์ƒ๋ช…๋ ฅ Up!
 

์„œ๋น„์Šค ์ œ์ž‘ ์˜ˆ์ œ์™€ ํ•จ๊ป˜
ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์„ธ๊ณ„๋กœ!


์ด๋Ÿฐ ๋ถ„๋“ค๊ป˜ ์ถ”์ฒœํ•ด์š” ๐Ÿ™‹โ€โ™€๏ธ

์›น๋””์ž์ด๋„ˆ ๋˜๋Š” ์›นํผ๋ธ”๋ฆฌ์…”๋ฅผ ๊ฟˆ๊พธ๋Š” ์ž…๋ฌธ์ž

์›น ๊ฐœ๋ฐœ์ž ์ทจ์—…์„ ๋ชฉํ‘œ๋กœ ํ•˜๋Š” ์ž…๋ฌธ์ž

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ฒ˜์Œ ์ ‘ํ•˜๋Š” ์ฝ”๋ฆฐ์ด

HTML, CSS ๊ณต๋ถ€ ์ดํ›„ ๊ฐˆ ๊ธธ์„ ์žƒ์€ ์ฝ”๋ฆฐ์ด


๊ฐ•์˜ ํŠน์ง• โœจ

#1.
๊ผญ ํ•„์š”ํ•œ ๋‚ด์šฉ๋งŒ
์š”์•ฝ์ ์œผ๋กœ

๊ณต๋ถ€๋Š” ๊ฐ€๋ฅด์น˜๋Š” ์‚ฌ๋žŒ์ด ๋” ๋งŽ์ด ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ž…๋ฌธ์ž ๋ˆˆ๋†’์ด์—์„œ ๋”ฑ ํ•„์š”ํ•œ ๋ถ€๋ถ„๋งŒ ์š”์•ฝํ•ด์„œ ์ง€๋„ํ•ฉ๋‹ˆ๋‹ค.

#2.
์งง๊ณ  ๊ตต์ง€๋งŒ
์•Œ์ฐจ๊ฒŒ

๋ฌธ๋ฒ• ๊ณต๋ถ€๋ฅผ ์งง๊ณ  ๊ตต๊ฒŒ ๋๋‚ด์•ผ ํ•œ๋‹ค๊ณ  ๊ฐ•์กฐํ•˜์ง€๋งŒ, ๊ผญ ํ•„์š”ํ•œ ๋ถ€๋ถ„์€ ๋ชจ๋‘ ๋‹ด์•˜์Šต๋‹ˆ๋‹ค!

#3.
์˜ˆ์ œ๊นŒ์ง€ ์ •๋ณต

ํ•™์Šต ๋‚ด์šฉ์„ ์ „๋ฐ˜์ ์œผ๋กœ ๋ณต์Šตํ•˜๊ณ  ํ๋ฆ„์„ ์žก์„ ์ˆ˜ ์žˆ๋Š” ์˜ˆ์ œ๋„ ์ œ๊ณต๋ฉ๋‹ˆ๋‹ค.


ํ•™์Šต ๋‚ด์šฉ ๐Ÿ“š

์„น์…˜ 0. ์˜ค๋ฆฌ์—”ํ…Œ์ด์…˜

  • ๊ฐ•์˜๋ฅผ ์†Œ๊ฐœํ•˜๊ณ  ์‹ค์Šต ํ™˜๊ฒฝ์„ ๊ตฌ์ถ•ํ•ฉ๋‹ˆ๋‹ค.

์„น์…˜ 1. ๊ธฐ์ดˆ ๋ฌธ๋ฒ• Part. 1

  • ๋ณ€์ˆ˜์™€ ์ƒ์ˆ˜, ๋ฐ์ดํ„ฐ ํƒ€์ž…๊ณผ ์—ฐ์‚ฐ์ž์˜ ์ข…๋ฅ˜์— ๋Œ€ํ•ด ํ•™์Šตํ•ฉ๋‹ˆ๋‹ค.

์„น์…˜ 2. ๊ธฐ์ดˆ ๋ฌธ๋ฒ• Part. 2

  • ์กฐ๊ฑด๋ฌธ๊ณผ ๋ฐ˜๋ณต๋ฌธ์— ๋Œ€ํ•ด ํ•™์Šตํ•ฉ๋‹ˆ๋‹ค.

์„น์…˜ 3. ๊ธฐ์ดˆ ๋ฌธ๋ฒ• Part. 3

  • ํ•จ์ˆ˜์™€ ํ•จ์ˆ˜์˜ ํ‘œํ˜„์‹, ํ™”์‚ดํ‘œ ํ•จ์ˆ˜์— ๋Œ€ํ•ด ํ•™์Šตํ•ฉ๋‹ˆ๋‹ค.

์„น์…˜ 4. ๋ณด์ถฉ ์ˆ˜์—… Part. 1

  • ์‹ค์ œ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์—์„œ ์ž์ฃผ ์‚ฌ์šฉ๋˜๋Š” ๋ฌธ์ž์—ด ๋ฉ”์†Œ๋“œ, ๋ฐฐ์—ด ๋ฉ”์†Œ๋“œ์˜ ๊ธฐ๋ณธ ์‚ฌ์šฉ๋ฒ•์„ ๋ฐฐ์šฐ๊ณ , ES6+ ์ดํ›„ ๋งŽ์ด ๊ฐœ์„ ๋œ ๋ถ€๋ถ„์ธ ๊ฐ์ฒด์™€ ๊ตฌ์กฐ ๋ถ„ํ•ด ํ• ๋‹น์— ๋Œ€ํ•ด ํ•™์Šตํ•ฉ๋‹ˆ๋‹ค.

์„น์…˜ 5. ๋ณด์ถฉ ์ˆ˜์—… Part. 2

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์›น์—์„œ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด ํ•„์š”ํ•œ DOM, ์ด๋ฒคํŠธ ๋“ฑ์— ๋Œ€ํ•œ ๋‚ด์šฉ์„ ํ•™์Šตํ•ฉ๋‹ˆ๋‹ค.

์„น์…˜ 6. ์˜ˆ์ œ ๋งŒ๋“ค๊ธฐ (์—ฐ์Šต ๋ฌธ์ œ)

  • DOM ์กฐ์ž‘, ์ด๋ฒคํŠธ ์ฒ˜๋ฆฌ๋ถ€ํ„ฐ, Date ๊ฐ์ฒด, Math.random, setInterval(), localStorage ๋“ฑ ๋‹ค์–‘ํ•œ ๊ฐ์ฒด์™€ ๋ฉ”์†Œ๋“œ๋ฅผ ํ™œ์šฉํ•ด ํ•™์Šต ๋‚ด์šฉ์„ ๋ณต์Šตํ•˜๊ณ  ๋ชธํ’€๊ธฐ์— ์ ํ•ฉํ•œ ์˜ˆ์ œ๋ฅผ ํ•จ๊ป˜ ๋งŒ๋“ค์–ด ๋ด…๋‹ˆ๋‹ค.

 


์˜ˆ์ƒ ์งˆ๋ฌธ Q&A ๐Ÿ’ฌ

Q. ํ•„์š”ํ•œ ์„ ํ–‰ ๊ณผ์ •์ด ์žˆ๋‚˜์š”?

HTML, CSS ๊ธฐ์ดˆ ๊ณผ์ • ํ•™์Šต์ด ์„ ํ–‰๋˜์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ˆ˜์—…์˜ ํšจ์œจ์„ ์œ„ํ•ด์„œ ์ด๋ฏธ ๋ณ„๋„๋กœ HTML, CSS์— ๋Œ€ํ•œ ๋ฌด๋ฃŒ ๊ฐ•์˜ ์ œ๊ณตํ•˜๊ณ  ์žˆ๊ธฐ ๋•Œ๋ฌธ์—, ํ•ด๋‹น ๊ฐ•์˜์—์„œ๋Š” HTML, CSS์— ๋Œ€ํ•œ ๋ถ€๋ถ„์€ ์„ค๋ช…ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค!

Q. ์™œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์— ์ž…๋ฌธํ•ด์•ผ ํ•˜๋‚˜์š”?

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ํ”„๋ก ํŠธ์—”๋“œ์—์„œ ์“ธ ์ˆ˜ ์žˆ๋Š” ์œ ์ผํ•œ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด์ž…๋‹ˆ๋‹ค. ๋งŒ์•ฝ ์›น ํผ๋ธ”๋ฆฌ์…”๋‚˜ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž ๋˜๋Š” ํ’€์Šคํƒ ๊ฐœ๋ฐœ์ž๋ฅผ ๋ชฉํ‘œ๋กœ ํ•˜์‹ ๋‹ค๋ฉด, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ํ”ผํ•ด ๊ฐ€์‹ค ์ˆ˜ ์—†๋Š” ์šด๋ช…์  ์นœ๊ตฌ์˜ˆ์š”.

Q. ์ˆ˜์—… ๋‚ด์šฉ์„ ์–ด๋Š ์ˆ˜์ค€๊นŒ์ง€ ๋‹ค๋ฃจ๋‚˜์š”?

๊ฐ•์˜๋ฅผ ๋“ฃ๊ณ  ๋‚˜๋ฉด '๋ฌดํ•œ ๋ฌธ๋ฒ• ๊ณต๋ถ€'์˜ ๊ตด๋ ˆ์—์„œ ๋ฒ—์–ด๋‚˜์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ฐ•์˜๋ฅผ ๋“ฃ๊ณ  ๋‚œ ์ดํ›„์—๋Š” ๋ฌธ๋ฒ• ๊ณต๋ถ€๋Š” ๊ทธ๋งŒํ•˜์‹œ๊ณ , ์šฐ์„  ๋ฌด์—‡์ด๋“  ๋งŒ๋“ค์–ด๋ณด์„ธ์š”. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ผ๋Š” ์–ธ์–ด์— ๊นŠ์ด๋ฅผ ๋”ํ•˜๋Š” ๊ฒƒ์€ ๊ทธ ์ดํ›„์— ํ•ด๋„ ๋Šฆ์ง€ ์•Š๋‹ต๋‹ˆ๋‹ค.


์ง€์‹๊ณต์œ ์ž ์†Œ๊ฐœ โœ’๏ธ

์•ˆ๋…•ํ•˜์„ธ์š”.
๊ฐœ๋ฐœ์ž ์ด๋„ํ•ด์ž…๋‹ˆ๋‹ค.

  • โ‰ชHTML5 ๋…ํ•™๋ฐฑ์„œโ‰ซ ์ €์ž
  • โ‰ชCSS3 ๋…ํ•™๋ฐฑ์„œโ‰ซ ์ €์ž
  • โ‰ช์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ES6+ ๋…ํ•™๋ฐฑ์„œโ‰ซ ์ €์ž
  • โ‰ช๋ชจ๋‘๋ฅผ ์œ„ํ•œ ์—”ํŠธ๋ฆฌ ๊ต๊ณผ์„œโ‰ซ ์ €์ž

๊ฐ•์˜ GitHub ์ €์žฅ์†Œ ๋งํฌ ๐Ÿ”—


์ด๋Ÿฐ ๋ถ„๋“ค๊ป˜
์ถ”์ฒœ๋“œ๋ ค์š”!

ํ•™์Šต ๋Œ€์ƒ์€
๋ˆ„๊ตฌ์ผ๊นŒ์š”?

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฌธ๋ฒ•์„ ์ฒ˜์Œ ๋ฐฐ์šฐ์‹œ๋Š” ๋ถ„๋“ค

  • ์›น ๊ฐœ๋ฐœ์— ์ฒ˜์Œ ์ž…๋ฌธํ•˜์‹œ๋Š” ๋ถ„๋“ค

  • ์ด์ œ ๋ง‰ HTML & CSS ๋ฌธ๋ฒ•์„ ๋๋‚ด์‹  ๋ถ„๋“ค

์„ ์ˆ˜ ์ง€์‹,
ํ•„์š”ํ• ๊นŒ์š”?

  • HTML

  • CSS

์•ˆ๋…•ํ•˜์„ธ์š”
์ด๋ฃธ์ฝ”๋”ฉ์ž…๋‹ˆ๋‹ค.

4,220

๋ช…

์ˆ˜๊ฐ•์ƒ

143

๊ฐœ

์ˆ˜๊ฐ•ํ‰

30

๊ฐœ

๋‹ต๋ณ€

4.9

์ 

๊ฐ•์˜ ํ‰์ 

7

๊ฐœ

๊ฐ•์˜

์ด๋ฃธ์ฝ”๋”ฉ ErumCoding

ํ•จ๊ป˜ ๊ฟˆ์„ ์ฝ”๋”ฉํ•ด์š”! ๐Ÿš€

๋”๋ณด๊ธฐ

์ปค๋ฆฌํ˜๋Ÿผ

์ „์ฒด

23๊ฐœ โˆ™ (3์‹œ๊ฐ„ 54๋ถ„)

๊ฐ•์˜ ๊ฒŒ์‹œ์ผ: 
๋งˆ์ง€๋ง‰ ์—…๋ฐ์ดํŠธ์ผ: 

์ˆ˜๊ฐ•ํ‰

์•„์ง ์ถฉ๋ถ„ํ•œ ํ‰๊ฐ€๋ฅผ ๋ฐ›์ง€ ๋ชปํ•œ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.
๋ชจ๋‘์—๊ฒŒ ๋„์›€์ด ๋˜๋Š” ์ˆ˜๊ฐ•ํ‰์˜ ์ฃผ์ธ๊ณต์ด ๋˜์–ด์ฃผ์„ธ์š”!

๋ฌด๋ฃŒ