## 1. ์ ๋ชฉ
## 2. ์๋ํ๋ ์ค ๊ธ (HTML)
“`html
๐ Do it! ์๋ฐ์คํฌ๋ฆฝํธ ์ ๋ฌธ: ์ด๋ณด๋ ์ฝ๊ฒ ๋ฐฐ์ฐ๋ ์น ํ๋ก๊ทธ๋๋ฐ ์ฒซ๊ฑธ์
A. ์๋ฐ์คํฌ๋ฆฝํธ, ์ ๋ฐฐ์์ผ ํ ๊น์?
์๋ฐ์คํฌ๋ฆฝํธ๋ ์น ํ์ด์ง์ ์๋๊ฐ์ ๋ถ์ด๋ฃ๋ ๋ง๋ฒ๊ณผ ๊ฐ์ ์ธ์ด์ ๋๋ค. ๋จ์ํ ์ ์ ์ธ ์นํ์ด์ง๋ฅผ ๋์ด, ์ฌ์ฉ์์ ์ํธ์์ฉํ๋ ์ญ๋์ ์ธ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ฐ๋ฐํ๋ ๋ฐ ํ์์ ์ธ ๊ธฐ์ ์ ๋๋ค. Do it! ์๋ฐ์คํฌ๋ฆฝํธ ์ ๋ฌธ์๋ฅผ ํตํด ์ฌ๋ฌ๋ถ์ ์น ๊ฐ๋ฐ์ ์ธ๊ณ๋ฅผ ํํํ๊ณ , ๋ค์ํ ์น ์๋น์ค๋ฅผ ๋ง๋ค ์ ์๋ ๋ฅ๋ ฅ์ ํค์ฐ๊ฒ ๋ ๊ฒ์ ๋๋ค. ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ๋ฐฐ์ฐ๋ฉด ๋ค์๊ณผ ๊ฐ์ ์ด์ ์ ์ป์ ์ ์์ต๋๋ค:
- ์น ๊ฐ๋ฐ์ ํต์ฌ ๊ธฐ์ ์ต๋
- ๋ค์ํ ์น ์ ํ๋ฆฌ์ผ์ด์ ๊ฐ๋ฐ ๊ฐ๋ฅ
- ๋์ ์ทจ์ ๊ฒฝ์๋ ฅ ํ๋ณด
- ๋์์์ด ๋ฐ์ ํ๋ ๊ธฐ์ ํธ๋ ๋๋ฅผ ๋ฐ๋ผ๊ฐ ์ ์๋ ๋ฅ๋ ฅ ํฅ์
B. ์ค๋น๋ฌผ: ๊ฐ๋ฐ ํ๊ฒฝ ์ค์ ํ๊ธฐ
์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋ฉ์ ์์ํ๊ธฐ ์ ์ ํ์ํ ์ค๋น๋ฌผ๊ณผ ๊ฐ๋ฐ ํ๊ฒฝ ์ค์ ๋ฐฉ๋ฒ์ ์์๋ด ์๋ค. ๋ณต์กํ์ง ์์ผ๋ ๊ฑฑ์ ํ์ง ๋ง์ธ์! ๋ณธ ๊ฐ์ด๋์์๋ ๊ฐ์ฅ ๊ฐํธํ ๋ฐฉ๋ฒ์ผ๋ก ์ค์ ํ๋ ๊ณผ์ ์ ๋จ๊ณ๋ณ๋ก ์ค๋ช ํฉ๋๋ค.
- ํ ์คํธ ์๋ํฐ ์ค์น (Visual Studio Code ์ถ์ฒ)
- ์น ๋ธ๋ผ์ฐ์ ์ค๋น (Chrome, Firefox ๋ฑ)
- HTML, CSS ๊ธฐ๋ณธ ์ง์ (์ ํ ํ์ต ๊ถ์ฅ)
๊ฐ ๋จ๊ณ์ ๋ํ ์์ธํ ์ค๋ช ๊ณผ ์ค์น ๋ฐฉ๋ฒ์ ๋ค์ ๋งํฌ์์ ํ์ธํ ์ ์์ต๋๋ค. (๋งํฌ ์ถ๊ฐ)
C. ๊ธฐ๋ณธ ๋ฌธ๋ฒ ๋ง์คํฐํ๊ธฐ
์๋ฐ์คํฌ๋ฆฝํธ์ ๊ธฐ๋ณธ ๋ฌธ๋ฒ์ ์ตํ๋ ๊ฒ์ ์น ๊ฐ๋ฐ์ ๊ธฐ์ด๋ฅผ ๋ค์ง๋ ์ฒซ๊ฑธ์์ ๋๋ค. ๋ณ์ ์ ์ธ, ์๋ฃํ, ์ฐ์ฐ์, ์กฐ๊ฑด๋ฌธ, ๋ฐ๋ณต๋ฌธ ๋ฑ ์ค์ํ ๊ฐ๋ ๋ค์ ์ฐจ๊ทผ์ฐจ๊ทผ ํ์ตํด๋ด ์๋ค. ๋ณธ ๊ฐ์ด๋์์๋ ์ฌ์ด ์์ ์ ํจ๊ป ๊ฐ ๊ฐ๋ ์ ์ค๋ช ํ์ฌ ์ดํด๋๋ฅผ ๋์ฌ๋๋ฆฝ๋๋ค.
- ๋ณ์์ ์๋ฃํ
- ์ฐ์ฐ์
- ์กฐ๊ฑด๋ฌธ (if, else if, else)
- ๋ฐ๋ณต๋ฌธ (for, while)
- ํจ์
๊ฐ ํญ๋ชฉ์ ๋ํ ์์ธํ ์ค๋ช ๊ณผ ์์ ์ฝ๋๋ ๋ณธ๋ฌธ์์ ํ์ธํ ์ ์์ต๋๋ค.
D. ์ค์ ์์ : ๊ฐ๋จํ ์นํ์ด์ง ๋ง๋ค๊ธฐ
์ด์ ๋ฐฐ์ด ์ง์์ ํ์ฉํ์ฌ ๊ฐ๋จํ ์นํ์ด์ง๋ฅผ ๋ง๋ค์ด ๋ด ์๋ค. ๋ณธ ๊ฐ์ด๋์์๋ ๋ฒํผ ํด๋ฆญ ์ ์์์ด ๋ณํ๋ ์นํ์ด์ง๋ฅผ ๋ง๋๋ ์์ ๋ฅผ ํตํด ์๋ฐ์คํฌ๋ฆฝํธ์ ์ค์ ํ์ฉ ๋ฐฉ๋ฒ์ ๋ณด์ฌ๋๋ฆฝ๋๋ค. ๋จ๊ณ๋ณ๋ก ๋ฐ๋ผ ํ๋ฉด ๋๊ตฌ๋ ์ฝ๊ฒ ์์ฑํ ์ ์์ต๋๋ค.
(์์ ์ฝ๋ ์ฝ์ )
E. ๋ ๋ฐฐ์ฐ๊ณ ์ถ๋ค๋ฉด?
Do it! ์๋ฐ์คํฌ๋ฆฝํธ ์ ๋ฌธ์ ํตํด ๊ธฐ๋ณธ๊ธฐ๋ฅผ ๋ค์ก๋ค๋ฉด, ์ด์ ๋์ฑ ์ฌํ๋ ๋ด์ฉ์ ํ์ตํ์ฌ ์๋ฐ์คํฌ๋ฆฝํธ ์ ๋ฌธ๊ฐ๋ก ํ ๊ฑธ์ ๋ ๋์๊ฐ ์ฐจ๋ก์ ๋๋ค. ๋ค์๊ณผ ๊ฐ์ ํ์ต ๊ฒฝ๋ก๋ฅผ ์ถ์ฒํฉ๋๋ค.
- DOM ์กฐ์
- ๊ฐ์ฒด์งํฅ ํ๋ก๊ทธ๋๋ฐ
- ๋น๋๊ธฐ ํ๋ก๊ทธ๋๋ฐ
- ํ๋ ์์ํฌ/๋ผ์ด๋ธ๋ฌ๋ฆฌ ํ์ต (React, Vue, Angular ๋ฑ)
๊ด๋ จ ๋์ ๋ฐ ์จ๋ผ์ธ ๊ฐ์ ์ถ์ฒ ๋งํฌ๋ฅผ ์ ๊ณตํฉ๋๋ค. (๋งํฌ ์ถ๊ฐ)
“`
..