๋ฐ๋ผํ๋ฉฐ ๋ง๋๋ ์ฌ๋ฆฌํ ์คํธ with HTML/CSS/JS
์์ฅ
์ง์ ๋๋ง์ MBTI ๊ธฐ๋ฐ ์ฌ๋ฆฌํ ์คํธ ์ฌ์ดํธ๋ฅผ ๋ง๋ค๋ฉฐ HTML, CSS, JS์ ๊ธฐ์ด ํ๋ฆ์ ์ดํดํ ์ ์๋ ๊ฐ์์ ๋๋ค.
์ ๋ฌธ
HTML/CSS, JavaScript, vanilla-javascript
๋ณธ ๊ฐ์๋ HTML, CSS, JS ๋ง์ ์ด์ฉํ์ฌ ๋๋ง์ ํฌํธํด๋ฆฌ์ค ์นํ์ด์ง๋ฅผ ๋ง๋ค์ด๋ณด๋ ๊ฐ์ข์ ๋๋ค. ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ์์กดํ์ง ์๊ณ ์์ HTML, CSS, JS๋ก ๊ฐ๋ฐํ๊ธฐ ๋๋ฌธ์ ์นํ์ด์ง ์ ์์ ๋ํ ์ดํด๋๋ฅผ ๋์ผ ์ ์์ต๋๋ค.
์๊ฐ์ 396๋ช
๋์ด๋ ์ ๋ฌธ
์๊ฐ๊ธฐํ ๋ฌด์ ํ







ํฐ๋งฅ์ค์ํํธ
์์ง์๋ค๋ ์ด ๊ฐ์๋ฅผ ๋ฃ๊ณ ์์ด์!





ํฐ๋งฅ์ค์ํํธ
์์ง์๋ค๋ ์ด ๊ฐ์๋ฅผ ๋ฃ๊ณ ์์ด์!
๋จผ์ ๊ฒฝํํ ์๊ฐ์๋ค์ ํ๊ธฐ
5.0
๊น์งํ (ํํด)
์น๋์์ธ์ ๋ณธ๊ฒฉ์ ์ผ๋ก ์์ํ๋ ์ฌ๋์๊ฒ ํ์๊ฐ์ข ์ด ๊ฐ์ข๋ HTML, CSS, JS์ ๋ํด ๋ค ๋ฐฐ์ฐ๊ณ ์น๋์์ธ์ ๋ณธ๊ฒฉ์ ์ผ๋ก ์์ํ๋ ๋ถ๋ค๊ป ์ถ์ฒ๋๋ฆฝ๋๋ค. ์ฅ์ JS ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฐ์ง ์๊ณ ์์ JS๋ก ์ฝ๋๋ฅผ ์ง์ฃผ์๊ธฐ ๋๋ฌธ์ ๊ธฐ์ด๋ฅผ ๋ค์ง๊ธฐ์ ์ข์ ๊ฒ ๊ฐ์ต๋๋ค. ์ดํดํ๊ธฐ ์ด๋ ค์ด ๋ถ๋ถ์ ์ ๊น์ฉ ์ค๋ช ํด์ฃผ์๊ณ ๋์ด๊ฐ๊ธฐ ๋๋ฌธ์ ์กฐ๊ธ๋ง ์๊ฐํด๋ณด๋ฉด ์ดํด๊ฐ ๋ฉ๋๋ค. ๊ฐ์ข ์์์์ 1์ด๋ ๋ฒ๋ฆด๊ฒ ์๋ค๊ณ ๋๊ผ์ต๋๋ค. ํจ๋๋ฐฑ ์ ํํ ๋ ์๋๊ฐ ์กฐ๊ธ ๋นจ๋๋ ๊ฒ ๊ฐ์์. ์กฐ๊ธ๋ง ๋ ๊ตฌ์ฒด์ ์ผ๋ก ์์๋ฅผ ๋ค์ด ์ค๋ช ํด์ฃผ์ จ์ผ๋ฉด ์ข์์ ๊ฒ ๊ฐ์์. ์์ ๊ธ์ ํฌ๊ธฐ ๋๋ฌธ์ ์ฝ๊ฐ์ ๋ถํธํจ์ ๊ฐ์ํด์ผ ํ์ด์. (๊ฐ์ข ๋ณด์ค ๋ถ๋ค์ ๋์ผ ๋ชจ๋ํฐ๋ฅผ ๊ถ์ฅํจ)
5.0
์๊ธฐ๊ฐ๋ฐํ๋ด์!
์์ ์๋ฐ์คํฌ๋ฆฝํธ์ ์์ง์์ ๋ณผ์ ์์ด ์ข์๊ณ , html, css์ ์ฐ์์๋ ๋ณผ์์์ด์ ์ข์์ต๋๋ค! ๊ฐ์ฌํฉ๋๋ค!
5.0
James Bae
์ข์ ๊ฐ์ ๊ฐ์ฌํฉ๋๋ค. ์์ฃผ ๊น์ ์ ๋ฌธ์ฑ์์ ๋์ค๋ ๊ฐ๊ฒฐํ๊ณ ๋ช ์พํ ๊ฐ์๋ก ๋ง์ ๋์์ ๋ฐ์์ต๋๋ค. ๊ฐ์ฌํฉ๋๋ค.
๋ฐ์ํ ํฌํธํด๋ฆฌ์ค ์นํ์ด์ง ์ ์
HTML, CSS, JavaScript ํ์ฉ
๋ค๋น๊ฒ์ด์ ๋ฐ, ์ด๋ฏธ์ง ์ฌ๋ผ์ด๋, ํฌํธํด๋ฆฌ์ค ์น์ ๊ตฌํ
์ค์ ํ๋ก์ ํธ์ ์ ์ฉ ๊ฐ๋ฅํ ์น ๊ฐ๋ฐ ๊ธฐ์

ํ์ต ๋์์
๋๊ตฌ์ผ๊น์?
์น ๊ฐ๋ฐ ์ด๋ณด์
ํฌํธํด๋ฆฌ์ค ์นํ์ด์ง๋ฅผ ๋ง๋ค๊ณ ์ถ์ ์ฌ๋
HTML, CSS, JavaScript๋ฅผ ์ค์ตํ๊ณ ์ถ์ ์ฌ๋
์ค์ ํ๋ก์ ํธ ๊ฒฝํ์ ์๊ณ ์ถ์ ์ฌ๋
396
๋ช
์๊ฐ์
22
๊ฐ
์๊ฐํ
20
๊ฐ
๋ต๋ณ
4.5
์
๊ฐ์ ํ์
1
๊ฐ
๊ฐ์
์ ์ฒด
20๊ฐ โ (2์๊ฐ 47๋ถ)
1. 1-1. INTRO
01:00
2. 2-1. HTML
08:00
3. 2-2. CSS
18:00
4. 2-3. JS
06:00
5. 3-1. HTML
05:00
6. 3-2. CSS
08:00
7. 3-3. JS
13:00
์ ์ฒด
22๊ฐ
4.5
22๊ฐ์ ์๊ฐํ
์๊ฐํ 1
โ
ํ๊ท ํ์ 5.0
5
์น๋์์ธ์ ๋ณธ๊ฒฉ์ ์ผ๋ก ์์ํ๋ ์ฌ๋์๊ฒ ํ์๊ฐ์ข ์ด ๊ฐ์ข๋ HTML, CSS, JS์ ๋ํด ๋ค ๋ฐฐ์ฐ๊ณ ์น๋์์ธ์ ๋ณธ๊ฒฉ์ ์ผ๋ก ์์ํ๋ ๋ถ๋ค๊ป ์ถ์ฒ๋๋ฆฝ๋๋ค. ์ฅ์ JS ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฐ์ง ์๊ณ ์์ JS๋ก ์ฝ๋๋ฅผ ์ง์ฃผ์๊ธฐ ๋๋ฌธ์ ๊ธฐ์ด๋ฅผ ๋ค์ง๊ธฐ์ ์ข์ ๊ฒ ๊ฐ์ต๋๋ค. ์ดํดํ๊ธฐ ์ด๋ ค์ด ๋ถ๋ถ์ ์ ๊น์ฉ ์ค๋ช ํด์ฃผ์๊ณ ๋์ด๊ฐ๊ธฐ ๋๋ฌธ์ ์กฐ๊ธ๋ง ์๊ฐํด๋ณด๋ฉด ์ดํด๊ฐ ๋ฉ๋๋ค. ๊ฐ์ข ์์์์ 1์ด๋ ๋ฒ๋ฆด๊ฒ ์๋ค๊ณ ๋๊ผ์ต๋๋ค. ํจ๋๋ฐฑ ์ ํํ ๋ ์๋๊ฐ ์กฐ๊ธ ๋นจ๋๋ ๊ฒ ๊ฐ์์. ์กฐ๊ธ๋ง ๋ ๊ตฌ์ฒด์ ์ผ๋ก ์์๋ฅผ ๋ค์ด ์ค๋ช ํด์ฃผ์ จ์ผ๋ฉด ์ข์์ ๊ฒ ๊ฐ์์. ์์ ๊ธ์ ํฌ๊ธฐ ๋๋ฌธ์ ์ฝ๊ฐ์ ๋ถํธํจ์ ๊ฐ์ํด์ผ ํ์ด์. (๊ฐ์ข ๋ณด์ค ๋ถ๋ค์ ๋์ผ ๋ชจ๋ํฐ๋ฅผ ๊ถ์ฅํจ)
์๊ฐํ 13
โ
ํ๊ท ํ์ 5.0
์๊ฐํ 9
โ
ํ๊ท ํ์ 4.1
3
์ฅ์ : - ๋น ๋ฅด๊ฒ ํฌํธํด๋ฆฌ์ค๋ฅผ ๊ตฌํํ ์ ์์ต๋๋ค. ๋จ์ : - ๋น๊ต์ ์ต๊ทผ์ ์ฌ๋ผ์จ ๊ฐ์ข์์๋ ES6๋ฅผ ์งํค์ง ์์ต๋๋ค. var๋ฅผ ์ด๋ค๋์ง, ๊ถ์ฅ๋์ง ์๋ ๊ตฌํ๋ฐฉ์ ๋ฑ๋ฑ.. - ์ด๋ฏธ์ง ์ฌ๋ผ์ด๋๋ 1๋ถํฐ ์์ํ๋๋ฐ, ๋ฆฌ๋ทฐ ์ฌ๋ผ์ด๋๋ 0๋ถํฐ ์์ํฉ๋๋ค. ํต์ผ์ฑ์ด ์์ต๋๋ค.. - ๊ฐ์ข ํ๋์ฝ๋ฉ.. ๊ฐ์ธ์ ์ผ๋ก๋ ์ ์ฐํ๊ฒ ํ์ฅ์ฑ์ ์๊ฐํด์ ๊ตฌํํ์ผ๋ฉด ๋ ์ข์์ ๊ฒ ๊ฐ์ต๋๋ค.
์๊ฐํ 4
โ
ํ๊ท ํ์ 4.5
4
๊ธฐ๋ํ๋ ๊ฒ๋ณด๋ค ๋ง์ ๊ฒ์ ์ป์ ์ ์๋ ๊ฐ์์์ต๋๋ค. ์ฒ์ ์์ํ ๋๋ง ํด๋ ๊ฐ์ธ ํฌํธํด๋ฆฌ์ค ์ฌ์ดํธ๋ฅผ ์๋ ๊ธฐํํ๊ณ ๋ง๋ค๊ณ ์ถ์ดํ๋ ์ด์ ๋ก ๋ฃ๊ธฐ ์์ํ์ต๋๋ค. ํ์ง๋ง ๋ค์ผ๋ฉด์ ์ ๊ฐ ๊ณผ๊ฑฐ์ UI ๋ฐฐ์น์ ๋ฌธ์ ๋ก ํฌ๊ธฐํ๋ web์ ์ฌ๋ฏธ๊ฐ ์๊ธฐ๊ธฐ ์์ํ๊ณ ์ฆ๊ฒ๊ฒ ๋๊น์ง ๋ค์ ์ ์์์ต๋๋ค. ๊ฐ์๋ ์งง์ง๋ง web์์ ๋ง๋ค๊ณ ์ถ์๋ ์ปดํฌ๋ํธ๋ค์ด ๋๋ถ๋ถ ๊ฐ์ ์์ ์์ด ์ข์์ต๋๋ค. ์กฐ๊ธ ์์ฌ์ด ์ ์ ์๊ฐ๋ณด๋ค ๋น ๋ฅธ ์งํ.. ์กฐ๊ธ์ ๋ถ์กฑํ ์ค๋ช .. ๊ทธ๋ฆฌ๊ณ ์์ ํฐํธ๋ก ๋ฐ๋ผ ์น๊ธฐ ์ด๋ ค์ด ๋ถ๋ถ์ด์์ต๋๋ค. ๊ฐ์ด ์น๋ฉด์ ๋๋ถ๋ถ์ ์ฌ๋๋ค์ ๋ฌธ๋ฒ์ ์ต์ํด์ง๋๋ฐ ์ฝ์ง ์์๋ ๊ฒ ๊ฐ์ต๋๋ค. ( ์ ๋ ๊ฐ์ฌ๋์ ๋ธ๋ผ์ฐ์ ๋ ๋ณด์ง ์๊ณ ์ฝ๋๋ถ๋ถ๋ง ํ๋ํ์ฌ ์ผ๋๊ณ ์ค์ตํ์ต๋๋ค. ) ๋๋ถ์ ๊ฐ์ ์ ๋ฃ๊ณ ์ฌ๋ฏธ๊น์ง ์ป์ด๊ฐ๋๋ค. ๊ฐ์ฌํฉ๋๋ค.
์์์ ์ฆ๊ฒ๊ฒ ๋ด์ฃผ์ จ๋ค๋ ๊ฐ์ฌํฉ๋๋ค. ์งํ ์๋, ์ค๋ช , ํฐํธ ์ฌ์ด์ฆ๊ฐ ์์ฌ์ด ๋ถ๋ถ์ด์๋ค๋ ์์คํ ์๊ฒฌ ๊ฐ์ฌ๋๋ฆฝ๋๋ค. ^^ ์์์ ๋ณด์๋ ๋ถ๋ค์ ๊ด์ ์ ๋ํ ๊ณ ๋ ค๊ฐ ์กฐ๊ธ ๋ถ์กฑํ๋ ๊ฒ ๊ฐ์ต๋๋ค. ์์ผ๋ก๋ ์ด๋ฌํ ๋ถ๋ถ์ ๋ํด ๊ฐ์ ํด๋๊ฐ๋๋ก ํ๊ฒ ์ต๋๋ค. ๊ฐ์ฌํฉ๋๋ค!
์๊ฐํ 2
โ
ํ๊ท ํ์ 4.0
3
ํ๋์ ํฌํธํด๋ฆฌ์ค๋ฅผ ๋ง๋ค์ ์์ด ์ข์ ๊ตฌ์ฑ์ด๋ผ ์ ์ฒญํ๋๋ฐ ์ ๊ฐ ์ด๋ณด๋ผ์ ๊ทธ๋ฐ์ง ๋ท๋ถ๋ถ์ผ๋ก ๊ฐ์๋ก ์ ์ ํ๋ค์ด์ง๋ค์...์์ค๊ฐ ์ด๋ ค์๋ณด์ด์ง๋ ์๋ ๋ฐ ์กฐ๊ธ๋ง ๋, ์ง๊ธ ํ์์น๊ณ ์๋ ๊ทธ ๋ถ๋ถ์ (css์์ ์ด๊ฒ ์ ์ฐ์๋ ์ง, javascript์์ ์ด ํจ์๊ฐ ์ ์ฐ์๋์ง) ํ๋ง๋๋ง ๋ ์ค๋ช ์ ํด์ฃผ์์ผ๋ฉด ์ดํด๊ฐ ๋ ์ฝ๊ณ ํผ์ ์ ๊ทธ๋ฐ์น ํํด์น๋ฉฐ ์๊ฐ๋ญ๋น๋ฅผ ํ์ง ์์ ์๋ ์์์ ๊ฑฐ ๊ฐ์๋ฐ ๊ทธ๋ฐ ์ ์ด ์ข ์์ฝ๊ณ ์๋๋ ์ข ๋น ๋ฅธ ํธ์ด๋ค์. ๊ทธ๋ฐ ์ ์ด ๋ณด์๋์๋๋ผ๋ฉด ์ ๋ง ์ ์ฉํ๊ณ ์ค์ ํ์ํ ๊ฐ์ข์์ ๊ฒ ๊ฐ๋ค์. ๊ทธ๋ฆฌ๊ณ ์ง๋ฌธ์ ๋ํ ๋ต๋ ์ข ๋๋ฆฐ๊ฑฐ ๊ฐ๊ณ ์...ํ์ง๋ง ๋๋ง์์ ์ด๋ฐ ๊ฐ์ข๋ฅผ ๋ค์ ์ ์์ด์ ๊ฑ ๋ง์กฑํ๋ ค๊ณ ํฉ๋๋ค.
๊ฐ์ ๋ถ์ผ์ ๋ค๋ฅธ ๊ฐ์๋ฅผ ๋ง๋๋ณด์ธ์!