์ด๋ฐ ๊ฒ๋ค์ ๋ฐฐ์์! ๐
- HTML๊ณผ CSS๋ฅผ์ฉ์ด๋ณด๋ฅผ ์ํ ๊ธฐ์ด๋ถํฐ ํ์
๊ฐ๋ฐ์๋ฅผ ์ํ ๊ณ ๊ธ ํ์ฉ๋ฒ๊ณผ ์ค์ ํ, ์ดํดํ๊ธฐ ์ด๋ ค์ ๋ ์ด๋ก ๋ค๊น์ง ์ฝ๊ฒ ์์๋ด
๋๋ค.
- ๋จ์ง ์๊ฐ์ ์ผ๋ก๋ง ํ์ด์ง๋ฅผ ๊ตฌํํด ๋ด๋ ๊ฒ์ ๋์ด์์, ๋ณด๋ค ๋ง์ ์ฌ๋๋ค์ ๋ฐฐ๋ คํ๊ณ ํ ๊ฐ๋ฐ์์๋ ํ์
ํ๊ธฐ ์ข์ '์ฐฉํ' ์น์ฌ์ดํธ๋ฅผ ๋ง๋๋ ๋ฒ์ ๋ฐฐ์๋๋ค.
'์ ๋๋ก ํ๋' ๊ฐ์๋ฅผ ๋ง๋ ์ด์ โ๏ธ
์ฝ๋ฉ์ ์ฒ์ ์์ํ์๋ ๋ถ๋ค์ด ์ฒซ ์ฝ๋ฉ ๊ฒฝํ๋ถํฐ ์์ํ ์ ์๋ ์๋ฆฌ์ฆ๋ฅผ ๋ง๋ค๊ณ ์ถ์์ต๋๋ค.
๊ทธ ์ฒซ๊ฑธ์์ผ๋ก, ์ปด๊ณต ์ง์์ด ์์ด๋ ์๋์ ์ผ๋ก ๋ฐฐ์๋๊ฐ๊ธฐ ์ฌ์ด HTML & CSS๋ฅผ ์ฒซ ์ฃผ์ ๋ก ์ ํํ์ต๋๋ค.
ํํธ ์ง์
์ฅ๋ฒฝ์ด ๋ฎ์ HTML & CSS์ง๋ง, ์ด๋ฅผ ๊น์ด ์๊ฒ ๊ณต๋ถํ์ฌ '์ ๋๋ก' ํ์ฉํ๋ ๊ฐ๋ฐ์๋ค์ ํํ์ง ์์ฃ . ๊ทธ๋์ ์ด๋ ค์ด ๊ฐ๋
๋ค๊ณผ ์ธ์ธํ ์์ฑ๋ค๊น์ง ํ๊ณ ๋ค์ด๊ฐ์ ํ์
๊ฐ๋ฐ์ ๋ฐ ํผ๋ธ๋ฆฌ์
์๊ฒ๋ ํฐ ๋์์ด ๋ ์ ์๋ ๊ฐ์ข๋ก ๋ง๋ค๊ณ ์ ํ์ต๋๋ค.
์ ๋ง ๋ฉ์ง๊ณ ์ ์ตํ ๊ฐ์๋ฅผ ๋ง๋ค์ด๋ณด์๋ ๋ชฉํ๋ก, ์ค๋ซ๋์ ์กฐ์ฌํ๊ณ ์ค๋นํ ๋์ ์ด ๊ฐ์๋ฅผ ์ ์ํ๊ฒ ๋์์ต๋๋ค.
๋๊ฐ ์ด ๊ฐ์๋ฅผ
๋ค์ผ๋ฉด ์ข์๊น์? ๐จโ๐ป
ํ๋ก๊ทธ๋๋ฐ์ด ์ฒ์์ธ ๋ถ
ํผ๋ธ๋ฆฌ์ฑ์ ํ๊ณ ์ถ์ ์น ๋์์ด๋
HTML/CSS์ ์ ํ๊ณ ์ถ์ ๊ฐ๋ฐ์
- ๐ผ ์ฝ๋ฉ์ ๋ฐฐ์ฐ๊ธฐ ์์ํ๋ ์ฌ๋
- ๐จ ํผ๋ธ๋ฆฌ์ฑ์ ์ง์ ํด๋ด๊ณ ์ถ์ ์น ๋์์ด๋
- ๐ HTML, CSS๋ฅผ ๋ณด๋ค ์ ๋ค๋ฃจ๊ณ ์ถ์ ๊ฐ๋ฐ์
- โ๏ธ HTML๊ณผ CSS์ ๊น์ ์ด๋ก ๊น์ง ๊ณต๋ถํด ๋ณด๊ณ ์ถ์ ๊ฐ๋ฐ์
- ๐ ํ์ค์ ๋ถํฉํ๊ณ ์ ๊ทผ์ฑ ๋๊ฒ ์น ๊ฐ๋ฐ์ ํ๊ณ ์ถ์ ๊ฐ๋ฐ์
์ฑ
์ผ๋ก๋
์ถ์๋์์ต๋๋ค! ๐
๊ฐ์์ ๋ด์ฉ์ ์์์๋ ํ์ธํ์ค ์ ์๋๋ก ๊พน๊พน ๋๋ฌ๋ด์์ต๋๋ค.
(โน๏ธ ์ด ์ฑ
์ ์๋ฐ์คํฌ๋ฆฝํธ๋ ๊ธฐ์ด ๋ถ๋ถ๋ง, ๊ทธ๋ฆฌ๊ณ ๊ฐ๋ณ๊ฒ๋ง ๋ค๋ฃน๋๋ค.)
๐ ์ฑ
๊ตฌ๋งคํ๋ฌ ๊ฐ๊ธฐ
์์ฝ ๊ฐ์๋ง์
ํน๋ณํ ์ โจ
๋น ๋ฅด๊ณ ์ฌ์ด
์์ ๊ฐ์ ๐
๊ตฐ๋๋๊ธฐ ์์ด ์์์์ํ ์งํ์ผ๋ก ์ฌ๋ฌ๋ถ์ ์์คํ ์๊ฐ์ ์ ์ฝํฉ๋๋ค. (์๊ฐ์์ ๋ฐ๋ผ ๋ง์ด ๋น ๋ฅด๊ฒ ๋๊ปด์ง ์ ์๋ ์ ์ํด ๋ถํ๋๋ฆฝ๋๋ค. ๊ผญ ๋ฌด๋ฃํํธ ๊ฐ๋ค์ ๋ค์ด๋ณด์๊ณ ์๊ฐํด์ฃผ์ธ์!)
ํฌ๋จธ์น์ค๋ช
๋ฌ์
๋ํ
์ผํ ๊ฐ์ ๐๏ธ
๊ฐ ํ๊ทธ์ ์์ฑ์ ๊ธฐ๋ฅ๋ค ๋ฟ ์๋๋ผ, ์ด๋ค์ ๋ค์ํ ํ์ฉ๋์ ์น ํ์ค์ ๋ง๋ ์ฌ์ฉ๋ฒ, ์ด๋ก ์ ์๋ฆฌ๊น์ง ์์ธํ ์ค๋ช
ํ์ฌ ์ต๋ํ ๋ง์ ๊ฒ์ ๋ฐฐ์๊ฐ์ค ์ ์๋๋ก ์ค๋นํ์ต๋๋ค.
์นํ์ด์ง๋ฅผ ํตํ
ํธ๋ฆฌํ ์ค์ต ๐ฅ๏ธ
๊ฐ ๊ฐ๋ง๋ค ์์์ ์ฃผ์ ํฌ์ธํธ์ ๋ณต๋ถ ๊ฐ๋ฅํ ์ค์ต ๋ช
๋ น์ด์ ์ฝ๋๊ฐ ์นํ์ด์ง์ ์ ๋ฆฌ๋์ด ์์ด์, ์ด๋ฅผ ๋ฐ๋ผ ํ๊ณ ์์ฉํ๋ฉฐ ์์ํ ์ค์ต์ ์งํํ ์ ์์ต๋๋ค.
๊ธฐ์ด ๋ด์ฉ
๋ฌด๋ฃ ๊ณต๊ฐ ๐
ํ์ ๋ถ๋ค๋ ๋ถ๋ด ์์ด ๊ณต๋ถํ์ค ์ ์๋๋ก, ์ฒซ 5์๊ฐ ๋ถ๋์ ๋ฏธ๋ฆฌ ๋ณด๊ธฐ๋ฅผ ํตํด ๋ฌด๋ฃ๋ก ๊ณต๊ฐํฉ๋๋ค.
์์ฝ๋ ๋๊ตฌ์ธ๊ฐ์? ๐
๊ฐ์๋ฅผ ์ํด ํน๋ณ์ ์ํ
โญ๏ธ ํ๋ ์ด๊ทธ๋ผ์ด๋ โญ๏ธ

- ๊ฐ์์ฉ ์นํ์ด์ง์๋ CSS ํ์ต๊ณผ ๋ณต์ต์ ์์ํ ํ๊ธฐ ์ํด ๋ง๋ ํ๋ ์ด๊ทธ๋ผ์ด๋๊ฐ ์ฃผ์ ๋ณ๋ก ์๋์ ๊ฐ์ด ๋ง๋ จ๋์ด ์์ต๋๋ค.

- ๊ฐ ์์ฑ์ ๊ฐ๋ค์ ์กฐ์ ํด ๋ณด๋ฉด์ ์ด๋ค์ด ์น ์์ ์์๋ค์ ์ด๋ป๊ฒ ๋ฐ์๋๋์ง ์ง์ ํ์ธํ ์ ์์ด์.

- ์ด๋ค ํ์์ ๊ฐ๋ค์ ์ฌ์ฉํ ์ ์๋์ง๋ฅผ ํ์ธํด๊ฐ๋ฉฐ ํด๋น CSS ์์ฑ์ ํ์ฉํ๋ ๋ค์ํ ์๋ฅผ ์์๊ฐ ์ ์์ต๋๋ค.
์ด ๊ฐ์๋ฅผ ๋ค์ผ๋ฉด
๋ฌด์์ด ๋ฌ๋ผ์ง๊น์? ๐ช
- ์
๋ฌธ์๋ ๋น์ ๊ณต์๋ ์ฝ๋ฉ์ ๋ํ ๋๋ ค์์ด ์ฌ๋ผ์ง๊ฒ ๋ฉ๋๋ค.
- ์ด๋ค ์น์ฌ์ดํธ๋ ํผ๋ธ๋ฆฌ์ฑ ํด๋ผ ์ ์๋ ์์ ๊ฐ์ ์ป๊ฒ ๋ฉ๋๋ค.
- ์ด๋ ดํ์ด๋ง ์๊ณ ์๋ ๊ฐ๋
๋ค, ์ ๋ชจ๋ฅด๊ณ ์ฌ์ฉํ๋ ๊ธฐ๋ฅ๋ค์ ๋ช
ํํ ์ดํดํ๊ฒ ๋ฉ๋๋ค.
- ์น์ฌ์ดํธ๋ฅผ '์ ๋๋ก', '์ฐฉํ๊ฒ', '์ฌ๋ ค ๊น๊ฒ' ๋ง๋๋ ๋ฒ์ ๋ฐฐ์ฐ๊ฒ ๋ฉ๋๋ค.
์ด๋ค ๋ด์ฉ์
๋ฐฐ์ฐ๊ฒ ๋๋์? ๐
โ
์น์
1: HTML ๊ธฐ์ด HTML ํ๊ทธ๋ค๊ณผ ๊ฐ๊ฐ์ ์ ์ ํ ํ์ฉ๋ฒ
- ํ
์คํธ ์ฝํ
์ธ , ๋ชฉ๋ก, ์ด๋ฏธ์ง, ํ, ๋งํฌ, ์
๋ ฅ ๋ฑ ๊ฐ์ข
์น ๊ตฌ์ฑ์์๋ค
- ์น ํ์ค๊ณผ ๊ถ์ฅ์ฌํญ์ ๋ง๊ฒ ์ฝ๋ฉํ๊ธฐ
- Emmet์ ์ด์ฉํ ๋น ๋ฅธ ์ฝ๋ฉ
โ
์น์
2: CSS ๊ธฐ์ด
- CSS์ ๋ค์ํ ์ ์ฉ ๋ฐฉ๋ฒ๊ณผ ๊ธฐ๋ณธ ์ ํ์๋ค
- ํ
์คํธ ์์, ๋ชฉ๋ก, ์, ๋ฐฐ๊ฒฝ ๋ฑ ๊ฐ์ข
์์๋ค์ ์คํ์ผ๋ง
- ์ธ๋ผ์ธ/๋ธ๋ก, ๋ฐ์ค ๋ชจ๋ธ, ํฌ์ง์
๋ฑ CSS์ ํต์ฌ ๊ฐ๋
๋ค
- ํ๋ ์ค ๋ ์ด์์์ ํ์ฉํ ์นํ์ด์ง ๊ตฌ์กฐ
โ
์น์
3: HTML ์ฌํ
- ํค๋ ์์ ๋ฉํ์ ๋ณด, ๋ทฐํฌํธ, ์คํ๊ทธ๋ํ ๋ฑ์ ํ์ด์ง ์ค์
- ์๋ฉํฑ ํ๊ทธ์ BEM์ ํตํด ํ์ด์ง๋ฅผ ์ฒด๊ณ์ ์ผ๋ก ๊ตฌ์ฑํ๊ธฐ
- ๋ค์ํ ์ฌ์ฉ์๋ฅผ ๋ฐฐ๋ คํ๋ ์ ๊ทผ์ฑ ๊ฐ์ถ๊ธฐ
- SVG, ์์ ๋ฑ ๊ธฐํ ๋ฏธ๋์ด ํ์ฉ๋ฒ
โ
์น์
4: CSS ์ฌํ
- ์ํฌํธ์ ๋ณ์, ๋ฆฌ์ธํ
, ๋ฒค๋ ํ๋ฆฌํฝ์ค ๋ฑ์ ์ค๋ฌด ๊ฐ๋
- ํ๋กํ
๋ฐ ๊ทธ๋ฆฌ๋๋ฅผ ํ์ฉํ ๋ ์ด์์
- ํธ๋์ง์
, ์ ๋๋ฉ์ด์
, ํํฐ ๋ฐ ๊ธฐํ ๋ค์ํ CSS ๊ธฐ๋ฅ๋ค
- ๋ฐ์ํ์ผ๋ก ์น์ฌ์ดํธ ๋ง๋ค๊ธฐ
- ์น ํฐํธ, ์์ด์ฝ, ํ๋ ์์ํฌ ๋ฑ ์ธ๋ถ ์์ ํ์ฉ๋ฒ
โ
์น์
5: ํ์ด๋ ํ๋ก์ ํธ
- ์์ ๊ฐ์ ์นํ์ด์ง๋ฅผ ๋ฐ์ํ์ผ๋ก, ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ฌ์ฉํ์ง ์๊ณ HTML๊ณผ CSS๋ง์ผ๋ก ๋ง๋๋ ์ค์ต์ ์งํํฉ๋๋ค.
์์ฃผ๋ฌป๋ ์ง๋ฌธ์
ํ์ธํ์ธ์ ๐ฌ
Q. ํ๋ก๊ทธ๋๋ฐ์ ์ฒ์ ์ ํ๋๋ฐ ์์
์ ๋ค์ ์ ์์๊น์?
A. HTML๊ณผ CSS๋ ์
๋ฌธ์๋ค์ด ์์ํ๊ธฐ ๊ฐ์ฅ ์ ํฉํ ์ฃผ์ ์
๋๋ค. ์ฝ๋ฉ์ด ์ฒ์์ธ ์ฌ๋๋ค๋ ๋ฐ๋ผ์ฌ ์ ์๋๋ก, ์ฒซ ํ๊ฒฝ ์ธํ
๋ถํฐ ์ฝ๋ฉ ํด ์ฌ์ฉ๊น์ง ์์ธํ ์ค๋ช
ํ๊ณ ์ค์ต๋ ๊ฐ๋ฅํ ์ฌ์ด ์ฉ์ด๋ฅผ ์ฌ์ฉํ์ฌ ์งํํฉ๋๋ค.
Q. ์ด๋ฏธ ์น ๊ฐ๋ฐ์ ์ด๋ ์ ๋ ํ๋๋ฐ ์ผ๋ง๋ ๋์์ด ๋ ๊น์?
A. ์น ๊ฐ๋ฐ์๋ค์ด ํํ ์ถฉ๋ถ์ด ์๊ณ ์ฌ์ฉํ๋ค๊ณ ์ฌ๊ธฐ๋ ๊ธฐ๋ณธ์ ์ธ HTML ํ๊ทธ๋ CSS ์์ฑ๋ค๋, ๊น์ด ๊ณต๋ถํด ๋ณด๋ฉด ๊ทธ๋์ ๋ชจ๋ฅด๋ ๊ฒ์ด ๋ง์์์ ๊นจ๋ซ๊ฒ ๋๊ณค ํฉ๋๋ค. ๊ทธ๋์ ์ ๋นํ๋ง ์๊ณ ํ์ฉํด์๋ ์์์ ๊ธฐ๋ฅ๋ค์ ๋ณด๋ค ์ ๋๋ก ์ธ ์ ์๊ฒ ๋๊ณ , ์ธ๊ด๋ฟ ์๋๋ผ ๋ด๋ถ์ ๊ตฌ์กฐ์์ผ๋ก๋ ์๋ฆ๋ค์ด ์ฌ์ดํธ๋ฅผ ๋ง๋ค๊ธฐ ์ํ ์ ์ฉํ ์ง์๋ค์ ๋ฐฐ์ฐ์ค ์ ์๊ฒ ๋ ๊ฑฐ์์.
Q. ๊ฐ์์๋๊ฐ ๋นจ๋ผ์ ์ด๋ ต์ง ์์๊น์?
A. ์์์ ์งํ์ ๋น ๋ฅด์ง๋ง ๊ฐ ๊ฐ๋ง๋ค ๊ฐ์ ํ์ด์ง๊ฐ ๋งํฌ๋์ด ์์ด์ ์์์ ๋ด์ฉ์ ํธํ๊ฒ ๋ณต์ตํ๊ณ ์ค์ตํ ์ ์๋๋ก ํด๋์์ต๋๋ค. ํ์ด์ง ๊ณณ๊ณณ์ ์์ ๋ค๊ณผ ํ๋ ์ด๊ทธ๋ผ์ด๋๋ฅผ ํ์ฉํด์, ์ฌ๋ฌ๋ถ์ ์๊ฐํจ์จ์ ์ต๋ํ๋๋ก ํ์ฉํ๋ ํ์ต์ ์งํํ์ค ์ ์์ ๊ฑฐ์์!