![[CSS&JS Master] - ํธ๋ ๋ํ ๊ฐ์ ๊ธฐ๋ก ์ผ๊ธฐ์ฅ ๋ง๋ค๊ธฐ๊ฐ์ ์ธ๋ค์ผ](https://cdn.inflearn.com/public/courses/335863/cover/836195ea-22e0-4a97-84a9-5c520b028729/335863.png?w=420)
[CSS&JS Master] - ํธ๋ ๋ํ ๊ฐ์ ๊ธฐ๋ก ์ผ๊ธฐ์ฅ ๋ง๋ค๊ธฐ
์ฝ๋์บ ํ
์ต์ CSS ํ๋ฌํผํฐ์ ์ค๋ฌด์ ์ธ Javascript๋ฅผ ํ๋ก์ ํธ๋ฅผ ์งํํ๋ฉด์ ์ฌ๋ฐ๊ฒ ๋ฐฐ์ธ ์ ์์ต๋๋ค.
์ ๋ฌธ
HTML/CSS, JavaScript, vanilla-javascript
์ ์์ค์ฝ๋ฉ ๊ณผ์ ์ ํ์คํ ์ฌํ ์ปค๋ฆฌํ๋ผ ์์ ์ , ์น ๊ฐ๋ฐ์ ๊ธฐ๋ณธ๊ธฐ๋ฅผ ํจ์ํ ์ ์๋ ํ์คํ ๊ฐ๋ฐ ์ ๋ฌธ ๊ณผ์ ์ ๋๋ค. ์ฌ๋ฌ๋ถ์ ์ ์์ค์ฝ๋ฉ ํ์คํ ๊ฐ๋ฐ ์ ๋ฌธ 5์ฃผ ์์ฑ์ ํตํด ํ๋ก๊ทธ๋๋ฐ๊ณผ ์๋ฐ์คํฌ๋ฆฝํธ์ ๊ธฐ์ด๋ฅผ ํํํ๊ฒ ๋ค์ง ์ ์์ต๋๋ค.
์๊ฐ์ 79๋ช
๋์ด๋ ์ ๋ฌธ
์๊ฐ๊ธฐํ ๋ฌด์ ํ
.png?w=736)





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





LG์ ์
์์ง์๋ค๋ ์ด ๊ฐ์๋ฅผ ๋ฃ๊ณ ์์ด์!
๋จผ์ ๊ฒฝํํ ์๊ฐ์๋ค์ ํ๊ธฐ
5.0
ํฉ๋๊ทผ
์์์ฒ์๋ฃ๋ ํ๋ก ํธ์๋ ๊ฐ์๋ก js์ j์๋ ๋ชจ๋ฅด๋ ์ฌ๋์ด ๊ธฐ์ด๋ฅผ ํ์คํ๊ฒ ์์์๋ ๊ฐ์์ ๋๋ค. ์ฒด๊ณ์ ์ผ๋ก ์ ๋ฆฌ๋ ์ปค๋ฆฌํ๋ผ์ด ์กด์ฌํ์ฌ์ ์ค๊ฐ์ ๊ฐ์๋ฅผ ๋ฃ๋ค๊ฐ ๊ฐ์๊ธฐ ๋์ด๋๊ฐ ํ์์นํ๋ ๊ตฌ๊ฐ์ด ์กด์ฌํ์ง์์ต๋๋ค. ๋จ ๋ชจ๋ ๊ฒ์ a to z๊น์ง ์๋ ค์ฃผ๋ ๋ฐฉ์์ ์๋ ๊ธฐํ ํ์ํ๊ฒ์ ๋ณธ์ธ์ด ์ด๋์ ๋ ์ฐพ์๋ด์ผํ๋๋ ์ด๋ ์คํ๋ ค ๋ด๊ฐ ๋ฌด์์ ๋ชจ๋ฅด๊ณ ๊ฐ์ ๋ด์ฉ์์ ๋๋์๊ฐ ๊น๊ฒ ํ์ตํ ์์๋ ๊ฒฝํ์ ์ฃผ๋ ๊ณผ์ ์ด์์ต๋๋ค. ์ด ๊ฐ์๋ฅผ ๋ค์ผ๋ฉด์ js๊ฐ ์ ์ฐ์ด๋์ง js๊ฐ ์ง๋ํ๋ฑ์ ํ์คํ ์๊ฒ ๋์ด๊ฐ๋๋ค.
5.0
์ ์๋ฆฌ
ํ์ต ์ฝํ ์ธ ๊ฐ ๋ค์ํด์ ์ข์์ต๋๋ค. ๊ฐ์๋ก ๋ค์ ๋ด์ฉ์ ๊ฐ์๋ก์ผ๋ก ๋ค์ ํ ๋ฒ ํ์ธํ๊ณ , ์ตํ ๋ด์ฉ์ ๋ฐ๋ก ๋ฐ๋ก ํ ์คํธํ ์ ์๊ฒ ์ฝ๋ฉํ ์คํธ์ ์ค์ต๊ณผ์ ๊ฐ ์ค๋น๋์ด ์์ด ์ข์์ต๋๋ค. ๋ํ ๊ณผ์ ๋์ด๋์ ์์ด ์ ์ ํ๋ ๊ฒ ๊ฐ์ต๋๋ค. ์ง์คํด์ ํ๋ค๋ฉด ์๊ฐ ๋ด์ ๋ฑ ํ ์ ์๊ฒ ๊ณํ๋ ์ ์ ํ ๋์ด๋์ ์์ ๊ณผ์ ์๋ค๊ณ ์๊ฐํฉ๋๋ค. ์์นจ๋ถํฐ ์์ํ์ฌ 6์๊น์ง ์ค๋์ ์ผ์ ์ ํ์ธํ๊ณ ๊ณํ์ ์ธ์ธ ์ ์์๋ ๊ฒ์ ๋งค์ฐ ํจ๊ณผ์ ์ด์์ต๋๋ค. ์ผ์ ์ ํ์ธํ๊ณ ๋ชฉํ๋ฅผ ์ค์ ํ์ฌ ์ผ์ ์ ์๊ธฐ์ํด์ผ๋ก์จ ์ค๋ ํด์ผ ํ ์ผ๋ค์ ๋ช ํํ๊ฒ ์ ๋ฆฌํ ์ ์์๊ณ , ์ด๋ฅผ ํตํด ํ๋ฃจ ๋์ ์๊ฐ์ ํจ์จ์ ์ผ๋ก ๊ด๋ฆฌํ ์ ์์์ต๋๋ค. ์น์ ๋ง๋ค ์๋ ๊ณผ์ ๋ ์น์ ์ด ๋๋ฌ์ ๋ ์ ํ์ต ํ์๋์ง ํ์ธํ๊ณ , ๋ ๊น๊ณ ํญ๋์ ์ดํด๋ฅผ ๋์ ์ฃผ์๋ ๊ฒ ๊ฐ์ต๋๋ค. ํ์ต์ ํด๊ฒฐํ๋ฉด์ ์ป์ ์ฌ๋ฏธ์ ์์ ๊ฐ์ ๋ฐํ์ผ๋ก ๋ค์ ๋ด์ฉ๋ค์ ๋ง๋ฌด๋ฆฌ ํ๋๋ฐ์๋ ๋์์ด ๋์์ต๋๋ค. ๋น์ผ์ ๋ธ๋ก๊ทธ๋ฅผ ์ ๋ฆฌํ๋ค ๋ณด๋ฉด ํ์ต๋ด์ฉ์ด ๋ณต์ต ๋๊ธฐ๋ ํ๊ณ , ์ผ์ฃผ์ผ์ ํ ๋ฒ์ฉ ํ๊ณ ๋ฅผ ์์ฑํ๋ค ๋ณด๋ฉด ๋ด๋ฉด์ ๋์ ๋ํํ๋ ๋๋์ด ๋ค์ด ์์๋ฅผ ์ฑ์ฐฐํ๋ ๋ฐ์ ํฐ ๋์์ด ๋์๋ ๊ฒ ๊ฐ์ต๋๋ค. ๋ ๋ง๋ค ํด์ผํ๋ ๊ฒ๋ค์ด ํ์คํ๊ฒ ์ ํด์ ธ ์์ด์ ํ์ต์ ๋ฐ๋ผ๊ฐ๊ธฐ ํธํ์ต๋๋ค. ๊ตฌ๊ธ ์บ๋ฆฐ๋๋ฅผ ์ด์ฉํด์ ์ผ์ ์ ์ง ๋ณธ์ ์ ์ฒ์์ธ๋ฐ, ๊ต์ฅํ ์ ์ฉํ ํด์ด๋ผ๋๊ฒ์ ๊นจ๋ฌ์์ต๋๋ค. ๋ํ ์๊ฐ์ ๋ง์ถฐ ์์ธํ๊ฒ ์ผ์ ์ด ์ง์ฌ ์์ด ์ฒด๊ณ์ ์ธ ํ๋ฃจ๋ฅผ ๋ณด๋ด๋๋ฐ์ ๋์์ ๋ง์ด ์ป์์ต๋๋ค. ์ ๋์ ์ธ ์ํฉ์ ๋ง์ถฐ์ ํ์ต ํ๊ฒฝ์ ๋ณ๊ฒฝํด์ฃผ์ ์ ๋๋ฌด ๊ฐ์ฌํ์ต๋๋ค. ์์ง๊ฐ ์ฝํ ํธ์ด์ฌ์ ๊ธ๋ฐฉ ๋์๋ฒ๋ฆฌ๋ ์ฑ๊ฒฉ์ธ๋ฐ ๊ฐ์ด ์ผ์ฐ์ผ์ฐ ํด์ฃผ์๊ณ ์์ํด์ฃผ์ ์ ๋๋ฌด ํ์ด ๋ฌ์ต๋๋ค! ๊ณ์ ๊ฐ์ ๋ง๋ค์ด์ฃผ์ธ์! ๊ฐ์ฌํฉ๋๋ค!
5.0
์ด์์
๋งค์ฐ ๋ง์กฑ์ค๋ฌ์ด ๊ฒฝํ์ด์์ต๋๋ค. ๊ฐ์ ์ปค๋ฆฌํ๋ผ์ ์ฒด๊ณ์ ์ผ๋ก ๊ตฌ์ฑ๋์ด ์์๊ณ , ๊ฐ์ฌ๋๋ค์ ์ ๋ฌธ์ ์ธ ์ง์๊ณผ ๊ฒฝํ์ ๊ฐ์ง๊ณ ๊ณ์ จ์ต๋๋ค. ๊ฐ์์ ๊ตฌ์ฑ์ ์ด๋ก ๊ฐ์์ ์ค์ต ๊ฐ์๋ก ๋๋์ด์ ธ ์์์ต๋๋ค. ์ด๋ก ๊ฐ์์์๋ Html, CSS, JavaScript์ ๊ธฐ๋ณธ ๊ฐ๋ ๊ณผ ๋ฌธ๋ฒ์ ๋ํด ์์ธํ ์ค๋ช ํด ์ฃผ์ จ๊ณ , ์ค์ต ๊ฐ์์์๋ ์ค์ ๋ก ์ฝ๋๋ฅผ ์์ฑํ๋ฉด์ ์์ฉ๋ ฅ์ ํฅ์์ํฌ ์ ์์์ต๋๋ค. ๋ํ ์ฝ๋ ๋ฌธ์ ๋ฅผ ํ๋ฉด์ ์ค์ค๋ก ์๊ฐํ๋ ํ์ ๊ธฐ๋ฅผ ์ ์๊ฒ ๋์์ต๋๋ค. ์น ๊ฐ๋ฐ์ ๋ํ ๊ธฐ์ด ๋ฐฐ์ธ ์ ์๋ ์ข์ ์ฝ์ค๋ผ๊ณ ์๊ฐํ๋ฉฐ ์ด ๋ถํธ์บ ํ๋ฅผ ์ถ์ฒ๋๋ฆฝ๋๋ค. ๊ฐ์ฌํฉ๋๋ค!
์น ๊ฐ๋ฐ์ ๊ธฐ์ด๊ฐ ๋๋ HTML, CSS, JavaScript ํ์ต
JavaScript ์ต์ ๋ฌธ๋ฒ ๋ฐ ํต์ฌ ๊ฐ๋ ํ์ต
๋ค์ํ ์ค์ต, ๊ณผ์ ๋ฅผ ํตํ ์ค์ ๊ฐ๊ฐ ํฅ์
DOM์ ์ด์ฉํ ๋ณธ์ธ๋ง์ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ์
์ฝ๋ฉํ ์คํธ๋ฅผ ํตํ ์๊ณ ๋ฆฌ์ฆ ๋ฅ๋ ฅ ํฅ์
๊ธฐ์ด๊ฐ ํํํ ๊ฐ๋ฐ์๋ก ์ฑ์ฅํ๊ณ ์ถ๋ค๋ฉด!
MP3 ํ๋ ์ด์ด๋ฅผ HTML/CSS๋ง์ผ๋ก ์ ์ํ๊ณ , ์๋ฐ์คํฌ๋ฆฝํธ(JavaScript)๋ฅผ ํ์ฉํด ์ด ์น์ ๋์ฑ ์์ฑ๋ ์๊ฒ ์ ์ํ๋ ์ค๋ฌด์ ํฉํ ํ๋ก์ ํธ๋ก ์น ๊ฐ๋ฐ์ ๊ธฐ์ด๋ฅผ ๋ค์ง๋๋ค. 5์ฃผ ๋์ ๊ฐ์ข ๊ฐ์์ ๊ณผ์ ๋ฅผ ํตํด ์๋ฐ์คํฌ๋ฆฝํธ ๊ธฐ๋ณธ๊ธฐ๋ฅผ ์์ฑํ๊ณ , ์น ํ์ด์ง๋ฅผ ์ ์ํ๋ ๊ธฐ๋ณธ ํ์ ์ฒด๋ ๋ฐ ํ๋ฆฝํฉ๋๋ค.
์ฝ๋ฉํ์ต ์ปค๋ฆฌํ๋ผ. ์ด๋ป๊ฒ, ๋ฌด์์ผ๋ก ๊ณต๋ถํด์ผ โ์์ฃผโํ ์ ์์๊น์?
์ฐ๋ฆฌ๋ ์ฌ๋ฌ๋ถ์ด ์ฝ๋ฉ์ ๋ฐฐ์ธ ๋ ์ง๋ฉดํ๋ ์ด๋ ค์์ ์ดํดํฉ๋๋ค.
๋๋ฌด ๋น ๋ฅธ ์ง๋, ๊ฐ์๊ธฐ ๊ธ๊ฒฉํ๊ฒ ์ด๋ ค์์ง๋ ๋ด์ฉ, ์ ๋ฆฌ๋์ง ์์ ์ฑ๋ก ๋์ด๊ฐ๋ฒ๋ฆฌ๋ ์ง๋.
์ด๋ ๊ฒ ์์ํ ์ด๋ ค์์ด ์์ฌ ํ ์๊ฐ ์์ ๋๊ณ ํฌ๊ธฐํ๊ฒ ๋์ด๋ฒ๋ฆฌ์ฃ .
์ ์์ค์ฝ๋ฉ ํ์คํ ์
๋ฌธ ๊ณผ์ ์ โ๊ธฐ์ด์์ฑโ ๊ทธ๋ฆฌ๊ณ โ์์ฃผโ์ ์ง์คํฉ๋๋ค.
์จ๋ผ์ธ ํ๊ฒฝ์์ ์ ๋๋ก โ์์ฃผโํด ๋ณด์ธ์.
๋น์ ๊ณต์๋, ๋
ธ๋ฒ ์ด์ค ์
๋ฌธ์๋, ์ฝ๋ฉ์ ์ ๋๋ก ๋ฐฐ์ฐ๊ณ ๊ณต๋ถํด๋ณด๊ณ ์ถ์ ์ฌ๋์ด๋ผ๋ฉด ๋๊ตฌ๋ ํ์ํฉ๋๋ค. ๐
5์ฃผ๊ฐ์ ์ผ์ ์งํ ํ ์ค์ ์๊ฐ์ ์์ธ ํผ๋๋ฐฑ (์ด์์๋)
์์นจ๋ถํฐ ์์ํ์ฌ 6์๊น์ง ์ค๋์ ์ผ์ ์ ํ์ธํ๊ณ ๊ณํ์ ์ธ์ธ ์ ์์๋ ๊ฒ์ ๋งค์ฐ ํจ๊ณผ์ ์ด์์ต๋๋ค. ์ผ์ ์ ํ์ธํ๊ณ ๋ชฉํ๋ฅผ ์ค์ ํ์ฌ ์ผ์ ์ ์๊ธฐ์ํด์ผ๋ก์จ ์ค๋ ํด์ผ ํ ์ผ๋ค์ ๋ช ํํ๊ฒ ์ ๋ฆฌํ ์ ์์๊ณ , ์ด๋ฅผ ํตํด ํ๋ฃจ ๋์ ์๊ฐ์ ํจ์จ์ ์ผ๋ก ๊ด๋ฆฌํ ์ ์์์ต๋๋ค.
๋ํ, ๋งค์ผ ๋ชฉํ๋ฅผ ์ค์ ํ๋ ์ต๊ด์ ์๊ธฐ๊ด๋ฆฌ์ ์ฑ์ทจ๊ฐ์ ์ฆ์ง์ํค๋ ๋ฐ ํฐ ๋์์ด ๋์์ต๋๋ค. ๋ชฉํ๋ฅผ ์ค์ ํ๊ณ ์ด๋ฅผ ๋ฌ์ฑํ๊ธฐ ์ํด ๋ ธ๋ ฅํ๋ ๊ณผ์ ์์ ํฌ๊ธฐํ์ง ์๊ณ ๊ณ์ํด์ ๋ ธ๋ ฅํ๊ฒ ๋์์ต๋๋ค. ์ผ์ผ ์ผ์ ์ ํ์ธํ๊ณ ๋ชฉํ๋ฅผ ์๊ธฐ๋ฉด์ ์์ ์ ํ์ฌ ์์น๋ฅผ ์์๊ฐ ์ ์์์ผ๋ฉฐ ์ด๋ฅผ ํตํด ์ด๋ค ๋ถ๋ถ์์ ๋ ๊ณต๋ถ๋ฅผ ํด์ผ ํ ์ง, ์ด๋ค ๋ถ๋ถ์ ๋ณด์ํด์ผ ํ๋์ง๋ฅผ ํ์ ํ ์ ์์์ต๋๋ค.
๋ํ, ๋ง๋ฌด๋ฆฌ ์ผ์ง๋ฅผ ์์ฑํ๋ ๊ฒ์ ๋์ ํ์ต ์งํ์ ํ์ ํ๊ณ ๋ชฉํ๋ฅผ ์ผ๋ง๋ ์ด๋ฃจ์๋๋ฅผ ๊ธฐ๋กํ๋ ์ข์ ๋ฐฉ๋ฒ์ด์์ต๋๋ค. ์ผ์ผ ์ผ์ง๋ฅผ ์์ฑํ๋ฉด์ ๋ด๊ฐ ์ผ๋ง๋ ๊ณผ์ ๋ฅผ ๋ฌ์ฑํ๋์ง, ๊ณผ์ ๋ฅผ ํ๋ฉด์ ์ด๋ ค์์ ๊ทน๋ณตํ๊ณ ๋ฐ์ ํ ์ ์ด ์๋์ง๋ฅผ ์ ์ ์์ต๋๋ค. ์ด๋ฅผ ํตํด ๋ค์ ๋ ๋์ฑ ๋ ธ๋ ฅํ๊ฒ ๋๊ธฐ๋ถ์ฌ๋ฅผ ์ป์ ์ ์์์ต๋๋ค. ํฌ๊ธฐํ์ง ์๊ณ ์ง์์ ์ผ๋ก ๋ ธ๋ ฅํ๋ฉฐ ์ฑ์ฅํด๋๊ฐ๋ ์์ ์ ํ์ธํ ์ ์์ต๋๋ค.
์ด๋ฌํ ์ผ์ ํ์ธ, ๋ชฉํ ์ค์ , ๋ง๋ฌด๋ฆฌ ์ผ์ง ์์ฑ์ ์ต๊ด์ ๋จ์ํ ํ๋ฃจ๋ฅผ ๊ด๋ฆฌํ๋ ๊ฒ์ ๋์ด์ ๋ ํฐ ์ฑ๊ณต์ ์ด๋ฃจ๋ ๋ฐ์ ๋์์ ์ค ๊ฒ์ ๋๋ค. ์ผ์์์ ์๊ฐ์ ํจ์จ์ ์ผ๋ก ํ์ฉํ๊ณ ๋ชฉํ๋ฅผ ๋ฌ์ฑํ๊ธฐ ์ํ ๊ณํ์ ์ธ์ฐ๋ ๊ฒ์ ์ฑ๊ณต์ ์ธ ์ถ์ ์ด๋์ด๋๊ฐ๋ ํต์ฌ ์์น์ ๋๋ค. ์ง์์ ์ผ๋ก ์ผ์ ์ ํ์ธํ๊ณ ๋ชฉํ๋ฅผ ์๊ธฐ์ํค๋ฉฐ, ๋ง๋ฌด๋ฆฌ ์ผ์ง๋ฅผ ์์ฑํ๋ ์ต๊ด์ ์ ์งํด๋ณด์ธ์. ์ด๋ฅผ ํตํด ๋์ฑ ํจ๊ณผ์ ์ธ ์๊ฐ ๊ด๋ฆฌ์ ์ฑ์ทจ๊ฐ์ ๊ฒฝํํ ์ ์์ ๊ฒ์ ๋๋ค.
TDD๋ Test-Driven Development์ ์ฝ์๋ก ๊ฐ๋ฐ ๋ฐฉ๋ฒ๋ก ์ค ํ๋์ ๋๋ค.
TDD์์๋ ๊ธฐ๋ฅ์ ๊ตฌํํ๋ ์ฝ๋์ ํด๋น ๊ธฐ๋ฅ์ ์ ํ์ฑ์ ๊ฒ์ฆํ๋ ํ ์คํธ ์ฝ๋๋ฅผ ๋ถ๋ฆฌํ์ฌ ์์ฑํฉ๋๋ค.
์ฝ๋ ์์ฑ ํ ๋ชจ๋ ์ฝ๋์ ๋ํด ํ ์คํธ๋ฅผ ์ํํ์ฌ ์ ํ์ด ์ค๋ฅ์์ด ์ ์ ์๋ํ๋์ง ํ์ธํ๋ ๊ฒ์ ๋๋ค.
์ด๋ฅผ ํตํด ํ ์คํธ๊ฐ ์คํจํ๋ฉด, ์ต์ํ์ ์ฝ๋ ์์ ์ผ๋ก ํ ์คํธ๋ฅผ ํต๊ณผํ ์ ์๋๋ก ํฉ๋๋ค.
๋ง์ง๋ง์ผ๋ก ์ฑ๊ณตํ ์ฝ๋๋ฅผ ๋ฆฌํฉํ ๋งํ๋ ๊ณผ์ ์ ์งํํฉ๋๋ค.
๊ธฐ์ด๋ถํฐ ์ถฉ์คํ๊ฒ, ์ ๋ฌธ๊ณผ์ ์๋ ์ ์ฑ์ ๊ธฐ์ธ์ด๋ ์ ์์ค์ฝ๋ฉ์ ๋ง๋๋ณด์ธ์.
๐ฐ |
๐ฒ |
๐ |
๐ค |
| ๋
ํ์ด ํ๋ค๊ณ ๋๋ ค์์ด ์์ด์ |
๋น์ ๊ณต์, ๋
ธ๋ฒ ์ด์ค ์ ๋ฌธ์์์ |
์ฒด๊ณ์ ์ธ ์ผ์ ์ด ํ์ํด์ | ์ง์์๋ต์ด ํ์ํด์ |
Q. ์๋ฌด๋ฐ ์ง์ ์์ด ์๊ฐํด๋ ๋ ๊น์?
๋ค, ๊ฐ๋ฅํฉ๋๋ค.
ํ๋ก๊ทธ๋๋ฐ ์ธ์ด๊ฐ ๋ฏ์ค๊ฑฐ๋ ๊ฐ๋ฐ์ ๋ํ ๋ฐฐ๊ฒฝ์ง์์ด ์์ด๋ ๋ชจ๋ฅด๋ ๋ถ๋ถ์ ์ค์ค๋ก ์ฐพ์๋ณด๊ณ ์ดํดํ๊ธฐ ์ํ ๋ ผ๋ฆฌ์ ์ฌ๊ณ ์ ์ปค๋ฎค๋์ผ์ด์ ๋ฅ๋ ฅ์ ํค์ฐ๊ณ ์ ํ๋ค๋ฉด ์ถฉ๋ถํ ๊ณผ์ ์ ์งํํ๊ณ ์๋ฃํ ์ ์์ต๋๋ค.
Q. ์๊ฒฉ ์๊ฑด์ด ์๋์?
์ ์ฒญ ์๊ฒฉ(๋์ด, ์ ๊ณต, ํ๋ ฅ ๋ฑ)์ ํน์ ํ ์๊ฑด์ ์์ต๋๋ค. ํจ๊ป ๋ชฐ์ ํ๋ฉฐ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๋ ค๋ ์ด์ ๊ณผ ์ง์์ ์ผ๋ก ์ฑ์ฅํ๋ IT ๊ฐ๋ฐ์๊ฐ ๋๊ธฐ ์ํด ์๊ธฐ๊ด๋ฆฌ์ ์๊ธฐ๊ณ๋ฐ์ ์ํ๋ ์์ธ๋ฅผ ๊ฐ์ถ์ ๋ถ๋ค์ด๋ผ๋ฉด ์ธ์ ๋ ํ์ํฉ๋๋ค.
Q. ์ง์ฅ์ธ์ด๊ฑฐ๋, ๋ํ ์ฌํ ์ค์ธ ์ํ๋ก ๋ณํํ ์ ์๋์?
์ ์์ค์ฝ๋ฉ ํ์คํ ๊ณผ์ ์ ์จ๋ผ์ธ ๊ณผ์ ์ผ๋ก ์ง์ฅ์ด๋ ํ๊ต์ ๋ค๋๋ฉฐ ์๊ฐํ์ค ์ ์์ต๋๋ค.
์ํํ ๊ต์ก ์ฐธ์ฌ๋ฅผ ์ํด์ ๊ฐ์ธ ๋ ธํธ๋ถ ๋๋ PC๊ฐ ํ์๋ก ์ค๋น๋์ด์ผ ํฉ๋๋ค.
ํ์ต ๋์์
๋๊ตฌ์ผ๊น์?
๋น์ ๊ณต์, ๋ ธ๋ฒ ์ด์ค ์ ๋ฌธ์์์
์ฒด๊ณ์ ์ธ ์ผ์ ์ด ํ์ํด์
์ฝ๋ฉํ ์คํธ๋ฅผ ํตํ ์๊ณ ๋ฆฌ์ฆ ๋ฅ๋ ฅ ํฅ์์ด ํ์ํด์
๋ค์ํ ์ค์ต, ๊ณผ์ ๋ฅผ ํตํ ์ค์ ๊ฐ๊ฐ ํฅ์์ ์ํด์
JavaScript ์ต์ ๋ฌธ๋ฒ ๋ฐ ํต์ฌ ๊ฐ๋ ํ์ต์ ํ๊ณ ์ถ์ด์
79
๋ช
์๊ฐ์
16
๊ฐ
์๊ฐํ
5.0
์
๊ฐ์ ํ์
1
๊ฐ
๊ฐ์
๊ฐํ ์ ๋์ ๋์๋ ๋๊ธฐ ๋ถ์ฌ๋ฅผ ํตํด ์ฑ์ฅ์ ์ถ๊ตฌํ๋ ์ ์์ค์ฝ๋ฉ์ ๋๋ค.
์ ์์ค์ฝ๋ฉ์ ํ์ ๊ฐ๋ฐ์ ํ์ผ๋ก ๊ตฌ์ฑ๋์ด ์์ผ๋ฉฐ ํจ๊ป ํ๋ซํผ์ ๊ฐ๋ฐํ๋ฉฐ ๊ฐ์๋ฅผ ์ ๊ณตํ๊ณ ์์ต๋๋ค.
์๊ฐ์๋ถ๋ค์ ๊ฟ์ ์์ํ๊ณ , ๋๋ฃ๋ค๊ณผ ์ํธ ํ๋ ฅํ๋ ๊ต์ก ํ๊ฒฝ ์์คํ ์ ์ ๊ณตํฉ๋๋ค.
์ ํด์ง ์ผ์ ๋์ ๋ชฐ์
ํ์ฌ Front-End์์ Back-End๊น์ง ์ค๋ฌด์ ๋ฐ๋ก ํฌ์
๋ ์ ์๋ ์ค๋ ฅ ์๋ Full Stack ๊ฐ๋ฐ์ ์์ฑ์ ๋ชฉํ๋ก ํ๊ณ ์์ต๋๋ค.
๋ฌธ์
๋ฉ์ผ : james.coding.school@gmail.com
์ ์ฒด
159๊ฐ โ (7์๊ฐ 35๋ถ)
ํด๋น ๊ฐ์์์ ์ ๊ณต:
3. ์น ์ฌ์ดํธ๋?
02:27
4. HTML์ด๋?
02:57
5. CSS๋?
02:08
6. JavaScript๋?
02:03
์ ์ฒด
16๊ฐ
5.0
16๊ฐ์ ์๊ฐํ
์๊ฐํ 1
โ
ํ๊ท ํ์ 5.0
5
HTML, CSS, Javascript ์ ๋ฐ์ ๋ํ ๊ธฐ์ด๋ถํฐ ๊ธฐ๋ณธ๊ธฐ๊น์ง ํ์ตํ ์ ์๋ ๊ณผ์ ์ด์์ต๋๋ค. ๊ฐ์ ์ธ์ ์ฝ๋ฉ ํ ์คํธ์ ์ค์ต ๋ฑ ๋ค์ํ ์ปจํ ์ธ ๊ฐ ํ์ฉ๋์ด ๊ฐ์๋ก ๋ฐฐ์ด ์ง์์ ๋ช ์ฐจ๋ก์ ๊ฑธ์ณ ์ตํ๊ณ ๋ณด๊ฐํ ์ ์์์ต๋๋ค. ์ด๋ฅผํ ๋ฉด ์์ฒด ํ๋ซํผ์ ์ฝ๋ฉ ํ ์คํธ์ ๊ฒฝ์ฐ reference code๊ฐ ์ ๊ณต๋์ด ๋ด ์ฝ๋์ ๋ํด ํผ๋๋ฐฑ ๋ฐ์ ์ ์์์ผ๋ฉฐ ์ค์ต ํ๋ก์ ํธ์ ๊ฒฝ์ฐ ์ด์ ๊น์ง ๋ฐฐ์ด ๋ด์ฉ์ ์ ์ฒด์ ์ผ๋ก ํ ๋ฒ ๋ ๋ณต์ต ๋ฐ ํ์ฉํ ์ ์์์ต๋๋ค. ๋ํ ํ์ต ๋ด์ฉ ๋ฟ๋ง ์๋๋ผ ํ์ต์ด ์ ์ด๋ฃจ์ด์ง๋์ง ์ด์์ง ์ฐจ์์์ ๊ณ์์ ์ผ๋ก ๊ด๋ฆฌ ํด์ฃผ๊ณ ์์ด ๊ณผ์ ์ ์ฑ์คํ ์ด์ํ๋๋ฐ ๋์์ด ๋์๋ ๊ฒ๋ ์ข์์ต๋๋ค. ๊ทธ ์ค์์๋ ๊ฐ์ฅ ๋ง์์ ๋ค์๋ ๋ถ๋ถ์ ํ์ต ์ค ์ด๋ ค์ด ๋ถ๋ถ์ด ์์ด ์ง๋ฌธ์ ์ฌ๋ฆด ๋๋ฉด ๊ต์ก ์์ง๋์ด ๋ถ๋ค์ด ๊ฑฐ์ ์ค์๊ฐ์ผ๋ก ๋ตํด์ฃผ์ ๋ค๋ ๊ฒ์ด์์ต๋๋ค. ๊ฑฐ์ ์จ๋ผ์ธ์ผ๋ก ํ์ตํ์ง๋ง ๊ด๋ฆฌ์ ํผ๋๋ฐฑ์ผ๋ก ์คํ๋ผ์ธ์์ ํ์ตํ๋ ๋๋์ ๋ฐ๊ณ ๊ณผ์ ์ ์ ์์ฃผํ ์ ์์์ต๋๋ค. ๋ณธ ๊ณผ์ ์ ํตํด ์์ง ํ๋ก ํธ์๋๋ฅผ ์ ํ์ง ๋ชปํ ์ฌ๋์ด๋ผ๋ ๋จ์๊ฐ ๋ด ๊ด๋ จ ์ธ์ด์ ๋ํ ๊ธฐ๋ณธ๊ธฐ๋ฅผ ์ถฉ๋ถํ ์ป์ด ๊ฐ์ค ์ ์๋ค๊ณ ์๊ฐํฉ๋๋ค.
์๊ฐํ 2
โ
ํ๊ท ํ์ 5.0
5
๋งค์ฐ ๋ง์กฑ์ค๋ฌ์ด ๊ฒฝํ์ด์์ต๋๋ค. ๊ฐ์ ์ปค๋ฆฌํ๋ผ์ ์ฒด๊ณ์ ์ผ๋ก ๊ตฌ์ฑ๋์ด ์์๊ณ , ๊ฐ์ฌ๋๋ค์ ์ ๋ฌธ์ ์ธ ์ง์๊ณผ ๊ฒฝํ์ ๊ฐ์ง๊ณ ๊ณ์ จ์ต๋๋ค. ๊ฐ์์ ๊ตฌ์ฑ์ ์ด๋ก ๊ฐ์์ ์ค์ต ๊ฐ์๋ก ๋๋์ด์ ธ ์์์ต๋๋ค. ์ด๋ก ๊ฐ์์์๋ Html, CSS, JavaScript์ ๊ธฐ๋ณธ ๊ฐ๋ ๊ณผ ๋ฌธ๋ฒ์ ๋ํด ์์ธํ ์ค๋ช ํด ์ฃผ์ จ๊ณ , ์ค์ต ๊ฐ์์์๋ ์ค์ ๋ก ์ฝ๋๋ฅผ ์์ฑํ๋ฉด์ ์์ฉ๋ ฅ์ ํฅ์์ํฌ ์ ์์์ต๋๋ค. ๋ํ ์ฝ๋ ๋ฌธ์ ๋ฅผ ํ๋ฉด์ ์ค์ค๋ก ์๊ฐํ๋ ํ์ ๊ธฐ๋ฅผ ์ ์๊ฒ ๋์์ต๋๋ค. ์น ๊ฐ๋ฐ์ ๋ํ ๊ธฐ์ด ๋ฐฐ์ธ ์ ์๋ ์ข์ ์ฝ์ค๋ผ๊ณ ์๊ฐํ๋ฉฐ ์ด ๋ถํธ์บ ํ๋ฅผ ์ถ์ฒ๋๋ฆฝ๋๋ค. ๊ฐ์ฌํฉ๋๋ค!
์๊ฐํ 1
โ
ํ๊ท ํ์ 5.0
5
์์์ฒ์๋ฃ๋ ํ๋ก ํธ์๋ ๊ฐ์๋ก js์ j์๋ ๋ชจ๋ฅด๋ ์ฌ๋์ด ๊ธฐ์ด๋ฅผ ํ์คํ๊ฒ ์์์๋ ๊ฐ์์ ๋๋ค. ์ฒด๊ณ์ ์ผ๋ก ์ ๋ฆฌ๋ ์ปค๋ฆฌํ๋ผ์ด ์กด์ฌํ์ฌ์ ์ค๊ฐ์ ๊ฐ์๋ฅผ ๋ฃ๋ค๊ฐ ๊ฐ์๊ธฐ ๋์ด๋๊ฐ ํ์์นํ๋ ๊ตฌ๊ฐ์ด ์กด์ฌํ์ง์์ต๋๋ค. ๋จ ๋ชจ๋ ๊ฒ์ a to z๊น์ง ์๋ ค์ฃผ๋ ๋ฐฉ์์ ์๋ ๊ธฐํ ํ์ํ๊ฒ์ ๋ณธ์ธ์ด ์ด๋์ ๋ ์ฐพ์๋ด์ผํ๋๋ ์ด๋ ์คํ๋ ค ๋ด๊ฐ ๋ฌด์์ ๋ชจ๋ฅด๊ณ ๊ฐ์ ๋ด์ฉ์์ ๋๋์๊ฐ ๊น๊ฒ ํ์ตํ ์์๋ ๊ฒฝํ์ ์ฃผ๋ ๊ณผ์ ์ด์์ต๋๋ค. ์ด ๊ฐ์๋ฅผ ๋ค์ผ๋ฉด์ js๊ฐ ์ ์ฐ์ด๋์ง js๊ฐ ์ง๋ํ๋ฑ์ ํ์คํ ์๊ฒ ๋์ด๊ฐ๋๋ค.
์๊ฐํ 1
โ
ํ๊ท ํ์ 5.0
5
์ ๋ง ์ถ์ฒํ๋ ๊ฐ์์ ๋๋ค. Html๋ถํฐ CSS, Javascript๊น์ง ์ฒด๊ณ์ ์ธ ๊ต์ก๊ณผ์ ์ ํตํด ๊ฐ๋ ์ ํ์คํ๊ฒ ์ดํดํ ์ ์๊ฒ ๊ฐ์๊ฐ ์งํ๋ฉ๋๋ค. ๋ชจ๋ฅด๋ ๋ถ๋ถ์ด ๋์์ ๋๋ ๋ฉํ ๋ถ๋ค์ด ๊ฐ์ด ๊ณ ๋ฏผํด ์ฃผ์๊ณ ๋ฐ๋ก ๋ต์ ์ฃผ๋ ๊ฒ์ด ์๋ ์ดํดํ ์ ์๋๋ก ์์์ ์ํฌํธํด ์ฃผ์ญ๋๋ค. ๊ฐ์์ ์์ค์ ๋งค์ฐ ๋์ต๋๋ค. ๊ธฐ์ด ๊ฐ์๋ฅผ ๋ช ๊ฐ ๋ฃ๋ค๊ฐ ๊ฐ์๊ธฐ ๋์ด๋๊ฐ ์ด๋ ค์์ง๋ ๋ถ๋ถ์ด ์์ด ์ฝ๊ฒ ํฌ๊ธฐํ์๋๋ฐ, ํ๋ฆฌ ์นผ๋ฆฌ์ง๋ ์ฒ์ฒํ ๋๋๋ฅผ ๋์ฌ๊ฐ๋ฉด์ ์ด๋ ค์ด ๋ถ๋ถ์ด ๋์ค๋๋ผ๋ ์ด๋ป๊ฒ ํ๋ฉด ํด๊ฒฐํ ์ ์๋์ง ๋ฐฉ๋ฒ์ ์๋ ค์ค๋๋ค. ๊ทธ์ ๊ฐ๋ ๋ง ๊ณต๋ถํ๋ ๊ฒ์ด ์๋ ํด์ฆ์ ์ฝ๋ฉ ํ ์คํธ๋ฅผ ํตํด ์ด๋ป๊ฒ ์ ์ฉํ๋์ง๊น์ง ๋ฐฐ์ธ ์ ์์ต๋๋ค. ๋ํ ๋ง์ง๋ง ํ๋ก์ ํธ๋ฅผ ํตํด ํ์ ์ ๋ํด์๋ ์๊ฒ ๋ฉ๋๋ค. ์ด ๊ฐ์๋ฅผ ๋ค์ผ๋ฉด์ ๋๋ฌด ๋ง์ด ์ฑ์ฅํ๊ณ ์ฝ๋ฉ์ ๋ํด์ ์ฌ๋ฏธ๋ฅผ ๋๋ผ๊ฒ ๋์์ต๋๋ค! ๊ฐ์ฌํฉ๋๋ค!
์๊ฐํ 1
โ
ํ๊ท ํ์ 5.0
5
ํ์ต ์ฝํ ์ธ ๊ฐ ๋ค์ํด์ ์ข์์ต๋๋ค. ๊ฐ์๋ก ๋ค์ ๋ด์ฉ์ ๊ฐ์๋ก์ผ๋ก ๋ค์ ํ ๋ฒ ํ์ธํ๊ณ , ์ตํ ๋ด์ฉ์ ๋ฐ๋ก ๋ฐ๋ก ํ ์คํธํ ์ ์๊ฒ ์ฝ๋ฉํ ์คํธ์ ์ค์ต๊ณผ์ ๊ฐ ์ค๋น๋์ด ์์ด ์ข์์ต๋๋ค. ๋ํ ๊ณผ์ ๋์ด๋์ ์์ด ์ ์ ํ๋ ๊ฒ ๊ฐ์ต๋๋ค. ์ง์คํด์ ํ๋ค๋ฉด ์๊ฐ ๋ด์ ๋ฑ ํ ์ ์๊ฒ ๊ณํ๋ ์ ์ ํ ๋์ด๋์ ์์ ๊ณผ์ ์๋ค๊ณ ์๊ฐํฉ๋๋ค. ์์นจ๋ถํฐ ์์ํ์ฌ 6์๊น์ง ์ค๋์ ์ผ์ ์ ํ์ธํ๊ณ ๊ณํ์ ์ธ์ธ ์ ์์๋ ๊ฒ์ ๋งค์ฐ ํจ๊ณผ์ ์ด์์ต๋๋ค. ์ผ์ ์ ํ์ธํ๊ณ ๋ชฉํ๋ฅผ ์ค์ ํ์ฌ ์ผ์ ์ ์๊ธฐ์ํด์ผ๋ก์จ ์ค๋ ํด์ผ ํ ์ผ๋ค์ ๋ช ํํ๊ฒ ์ ๋ฆฌํ ์ ์์๊ณ , ์ด๋ฅผ ํตํด ํ๋ฃจ ๋์ ์๊ฐ์ ํจ์จ์ ์ผ๋ก ๊ด๋ฆฌํ ์ ์์์ต๋๋ค. ์น์ ๋ง๋ค ์๋ ๊ณผ์ ๋ ์น์ ์ด ๋๋ฌ์ ๋ ์ ํ์ต ํ์๋์ง ํ์ธํ๊ณ , ๋ ๊น๊ณ ํญ๋์ ์ดํด๋ฅผ ๋์ ์ฃผ์๋ ๊ฒ ๊ฐ์ต๋๋ค. ํ์ต์ ํด๊ฒฐํ๋ฉด์ ์ป์ ์ฌ๋ฏธ์ ์์ ๊ฐ์ ๋ฐํ์ผ๋ก ๋ค์ ๋ด์ฉ๋ค์ ๋ง๋ฌด๋ฆฌ ํ๋๋ฐ์๋ ๋์์ด ๋์์ต๋๋ค. ๋น์ผ์ ๋ธ๋ก๊ทธ๋ฅผ ์ ๋ฆฌํ๋ค ๋ณด๋ฉด ํ์ต๋ด์ฉ์ด ๋ณต์ต ๋๊ธฐ๋ ํ๊ณ , ์ผ์ฃผ์ผ์ ํ ๋ฒ์ฉ ํ๊ณ ๋ฅผ ์์ฑํ๋ค ๋ณด๋ฉด ๋ด๋ฉด์ ๋์ ๋ํํ๋ ๋๋์ด ๋ค์ด ์์๋ฅผ ์ฑ์ฐฐํ๋ ๋ฐ์ ํฐ ๋์์ด ๋์๋ ๊ฒ ๊ฐ์ต๋๋ค. ๋ ๋ง๋ค ํด์ผํ๋ ๊ฒ๋ค์ด ํ์คํ๊ฒ ์ ํด์ ธ ์์ด์ ํ์ต์ ๋ฐ๋ผ๊ฐ๊ธฐ ํธํ์ต๋๋ค. ๊ตฌ๊ธ ์บ๋ฆฐ๋๋ฅผ ์ด์ฉํด์ ์ผ์ ์ ์ง ๋ณธ์ ์ ์ฒ์์ธ๋ฐ, ๊ต์ฅํ ์ ์ฉํ ํด์ด๋ผ๋๊ฒ์ ๊นจ๋ฌ์์ต๋๋ค. ๋ํ ์๊ฐ์ ๋ง์ถฐ ์์ธํ๊ฒ ์ผ์ ์ด ์ง์ฌ ์์ด ์ฒด๊ณ์ ์ธ ํ๋ฃจ๋ฅผ ๋ณด๋ด๋๋ฐ์ ๋์์ ๋ง์ด ์ป์์ต๋๋ค. ์ ๋์ ์ธ ์ํฉ์ ๋ง์ถฐ์ ํ์ต ํ๊ฒฝ์ ๋ณ๊ฒฝํด์ฃผ์ ์ ๋๋ฌด ๊ฐ์ฌํ์ต๋๋ค. ์์ง๊ฐ ์ฝํ ํธ์ด์ฌ์ ๊ธ๋ฐฉ ๋์๋ฒ๋ฆฌ๋ ์ฑ๊ฒฉ์ธ๋ฐ ๊ฐ์ด ์ผ์ฐ์ผ์ฐ ํด์ฃผ์๊ณ ์์ํด์ฃผ์ ์ ๋๋ฌด ํ์ด ๋ฌ์ต๋๋ค! ๊ณ์ ๊ฐ์ ๋ง๋ค์ด์ฃผ์ธ์! ๊ฐ์ฌํฉ๋๋ค!
๊ฐ์ ๋ถ์ผ์ ๋ค๋ฅธ ๊ฐ์๋ฅผ ๋ง๋๋ณด์ธ์!