์๋ฐ์คํฌ๋ฆฝํธ์ ๊ธฐ์ด ํต์ฌ ๋ฌธ๋ฒ,
์งง๊ณ ๊ตต๊ฒ ๋๋ผ ์ ์์ด์ ๐
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 ์ ์ฅ์ ๋งํฌ ๐