CSS, ์ด์ ๋ ์ค์ ์ด๋ค!
๋ณต์กํ Flex & Grid, ํ๋ฐฉ์ ๋๋ด๋ณด์ธ์.
๊ฐ์ ์ฃผ์ ๐
ํต์ฌ ๊ธฐ๋ฅ์ ๊ธฐ๋ณธ๊ธฐ ๋ค์ง๊ธฐ!

- CSS์ ๋ ์ด์์ ์ ์ฉ ๊ธฐ๋ฅ, Flex์ Grid์ ํต์ฌ ์ด๋ก ์ ์๊ธฐ์ค๋ง ๋ชจ์๋ชจ์ ๋น ๋ฅด๊ฒ!
- ์ค์ต ์์ ๋ฅผ ๋ฐ๋ผ ๋ง๋ค๋ฉฐ ์ค์ ๋ก ๋ ์ด์์์ ์์ฑํ ๋ Flex์ Grid๋ฅผ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ๊น์ง!
์ด ๊ฐ์, ์ ๋ค์ด์ผ ํ ๊น์? ๐
์ด๋ก ์ ์๋๋ฐ ์๊ฐํ ๋๋ก ๋ง๋ค์ง ๋ชปํ๊ฒ ์ด์ ๐ฅ
Flex์ Grid ๊ธฐ๋ฅ์ ์ธ์์ผ ํ ์์ฑ์ ๊ฐ์๋ ๋ง๊ณ , ์ฌ์ง์ด ์๊ธด๊ฒ๋ ๋ค ๋น์ทํด์. ๊ทธ๋ ๋ค ๋ณด๋๊น ๋ง์ ๋ฃ๊ฑฐ๋ ๋ณด๋ฉด ์ด ์์ฑ๋ค์ด ๋ฌด์จ ๊ธฐ๋ฅ์ ํ๋์ง๋ ์๊ฒ ๋๋ฐ, ์ ์ ๋ด๊ฐ ์๊ฐํ ๋ ์ด์์์ Flex์ Grid๋ฅผ ์ฌ์ฉํด์ ์์ฑํ๋ ๋ฐฉ๋ฒ์ ๋ชจ๋ฅด๊ฒ ๋ค๋ ๋ถ๋ค์ด ๋ง์ต๋๋ค.
๊ธฐ์ด์ ์ค์ ํ๋ก์ ํธ ์ ์ ๊ทธ ์ ๋งคํ ์ค๊ฐ ์ด๋๊ฐ! ๊ทธ๊ณณ์์ ํค๋งค๊ณ ๊ณ์ ๋ถ๋ค. ์ด ๊ฐ์๋ ์ด๋ฐ ๋ถ๋ค๊ป ๋ฑ ์ ํฉํ ๊ฐ์๋ผ๊ณ ์๊ฐํด์. ์ค์ต ์์ ๋ฅผ ๋ฐ๋ผํ๋ค๋ณด๋ฉด ๊ธ์ ๊ฐ์ ์ก์ผ์ค ์ ์์๊ฑฐ์์.
๋ค? ์ ๋ ์น ๊ฐ๋ฐ์๊ฐ ๋๊ณ ์ถ์๋ฐ์?
์ทจ์
๋๋ ์ด์ง์ ์ค๋นํ๊ณ ์๊ฑฐ๋, ์ด์ ๋ง ํ๋ก๊ทธ๋๋ฐ์ ์
๋ฌธํ ์น๊ตฌ๋ค์ ์๋ดํ๋ค ๋ณด๋ฉด '๋์์ธ'์ ๊ฐ๊ณผํ๊ณ ์๋ ์น๊ตฌ๋ค์ด ๊ฝค ๋ง์ต๋๋ค. ๊ฐ๋ฐ์๋ HTML, CSS ๋ชฐ๋ผ๋ ๋์ง ์๋๋- ๋ ์ง๋ฌธ๋ ๋ง์ด ๋ฐ๋๋ฐ์.
์ ๋ ๊ฐ๋ฐ์๋ฅผ ๋๋ถ์ ๋น์ ํ๊ณค ํฉ๋๋ค. ๊ฐ๋ฐ์ด ์ฌ๊ณผ ๋์ฌ๋ผ๋ฉด, ๋ด๊ฐ ๊ฐ๋ฐํ ์๋น์ค๋ ์๋น์์๊ฒ ํ๋งคํ ์ฌ๊ณผ๊ฐ ๋๊ฒ ์ฃ ? ๋ ์ด์์์ ์์ฑํ๋ ๊ฒ์ ์ฌ๊ณผ๋ฅผ ์ฌ๊ณผ ์์์ ํฌ์ฅํ๋ ๊ณผ์ ๊ณผ๋ ๊ฐ์์. ๊ฐ๋ฐ์๋ ์ต์ํ ๋ด ์ํ์ ์๋ํ ๋๋ก ํฌ์ฅํ ์ ์์ด์ผ ํฉ๋๋ค!
๊ฐ์ ํน์ง โจ
- A๋ถํฐ Z๊น์ง! Flex์ Grid์ ๊ธฐ๋ฅ์ ํต์ฌ๋ง ๋น ๋ฅด๊ฒ ์ ๋ฆฌํฉ๋๋ค.
- ์ค์ต ์์ ๋ฅผ ํตํด ํต์ฌ ๊ธฐ๋ฅ์ ๊ธฐ๋ณธ๊ธฐ๋ฅผ ๋ค์ง๋๋ค.
์ด ๊ฐ์๋ฅผ ๋ฃ๊ณ ๋๋ฉด ๐
์ด๊ฑธ... ๋ค ์ธ์์ผ ํ๋์? ๐ฑ
์ ๊ฐ Flex์ Grid๋ฅผ ๊ฐ๋ฅด์น๋ฉด์ ๊ฐ์ฅ ๋ง์ด ๋ค์ ์ง๋ฌธ์ด ๋ฐ๋ก ์๋ง์ Flex์ Grid์ ๊ธฐ๋ฅ๋ค์ ๋ค ์ธ์์ผ ํ๋๋ ๊ฒ์ด์์ด์. ์ด ๊ฐ์๋ฅผ ๋ฃ๊ณ ๋๋ฉด, ์ด์ Flex์ Grid ๋ ์ด์์์ผ๋ก ๋ด๊ฐ ์๊ฐํ๋ ๊ฒ์ ๋ง๋ค๊ธฐ ์ํด์ ๋ชจ๋ ๊ธฐ๋ฅ์ ์ธ์ฐ๊ฑฐ๋ ์จ์ผ ํ๋ ๊ฒ ์๋๋ผ๋ ๊ฒ์ ํ์คํ ์๊ฒ ๋์ค ๊ฑฐ์์!
ํต์ฌ ๊ธฐ๋ฅ๋ง ์ ํ์
ํ๊ณ ์์ผ๋ฉด ๋ง์ ์ฝ๋๋ฅผ ์ฐ์ง ์๊ณ ๋, ์ฝ๊ณ ๊ฐ๋จํ๊ฒ ๋ด๊ฐ ์ํ๋ ๋ ์ด์์์ ์์ฑํ ์ ์์ต๋๋ค!
์์ ์ง๋ฌธ Q&A ๐ฌ
Q. ๋น์ ๊ณต์๋ ๋ค์ ์ ์๋ ๊ฐ์์ธ๊ฐ์?
A. ๋ค! HTML๊ณผ CSS๋ ๋น์ ๊ณต์, ์คํ์, ๊ณ ๋ฑํ์ ์น๊ตฌ๋ค๋ ์ฝ๊ฒ ๋ฐฐ์ธ ์ ์์ด์. ๋จ, HTML๊ณผ CSS ๊ธฐ์ด ๊ฐ์๋ฅผ ๋จผ์ ๋ฃ๊ณ ์ค์
์ผ ํฉ๋๋ค. ๊ธฐ์ด ๊ฐ์๋ ์ ํ๋ธ <๊ฐ๋ฐ์ ์ด๋ํด> ์ฑ๋์์ ๋ฌด๋ฃ๋ก ์ ๊ณตํ๊ณ ์์ด์!
Q. ํต์ฌ ๊ธฐ๋ฅ๋ง ์ง์ค์ ์ผ๋ก ์ค์ตํ๋ ์ด์ ๊ฐ ๋ญ๊ฐ์?
A. ์๋ง์ ํ์๋ค์ ๊ฐ๋ฅด์ณ๋ณธ ๊ฒฐ๊ณผ (?) 10๊ฐ์ง ๊ธฐ๋ฅ์ ๊ฐ๋ฅด์น๊ธฐ ์ํด์ ๊ฐ๊ฐ ํ ๊ฐ์ง์ฉ ์์ ๋ฅผ ๋ณด์ฌ์ฃผ๋ ๊ฒ๋ณด๋ค, ์ ๋ง ๊ทธ ๊ธฐ๋ฅ์ ๋ค๋ฃจ๊ธฐ ์ํด ๊ผญ ์์์ผ ํ๋ ํต์ฌ ๊ธฐ๋ฅ 3๊ฐ์ง ์ดํ์ ์ง์คํด์ ๊ฐ๊ฐ 3~4๊ฐ์ ์์ ๋ฅผ ๋ฐ๋ณต์ ์ผ๋ก ํ์ตํ๊ฒ ํ๋ ๊ฒ์ด ํจ์ฌ! ์ ๋ง ํจ์ฌ ๋ ํจ๊ณผ๊ฐ ์ข์์ด์. ์ด ๊ฐ์์์ ๋ชฉํํ๋ ๋ฐ๋ ๊ทธ์ ๊ฐ๊ธฐ ๋๋ฌธ์, ์์
์ ๋ค์ ์ดํ์ ๋น์ฅ ์๊ฐํ๋ ๊ฒ์ ํ๋ฉด์ ์ฎ๊ธฐ๊ธฐ ์ํ ํต์ฌ ๊ธฐ๋ฅ์ ์ง์ค์ ์ผ๋ก ์ค์ตํ๊ฒ๋ ์์
์ ๊ตฌ์ฑํ์ต๋๋ค.
Q. ์์
๋ด์ฉ์ ์ด๋ ์์ค๊น์ง ๋ค๋ฃจ๋์?
A. ๋์ด๋๋ฅผ ์
๋ฌธ, ๊ธฐ์ด, ์ค๊ธ, ๊ณ ๊ธ์ผ๋ก ๋๋๋ค๋ฉด ๊ธฐ์ด์ ํด๋นํ๋ ๋์ด๋์
๋๋ค.
์ง์๊ณต์ ์ ์๊ฐ โ๏ธ
์ด๋ํด

ํ์คํ ๊ฐ๋ฐ์์ด์ ํ๋ก๊ทธ๋๋ฐ ๊ฐ์ฌ๋ก ํ๋ํ๊ณ ์์ต๋๋ค.
- ใHTML5 ๋
ํ๋ฐฑ์ใ ์ ์
- ใCSS3 ๋
ํ๋ฐฑ์ใ ์ ์
- ใ์๋ฐ์คํฌ๋ฆฝํธ ๋
ํ๋ฐฑ์ใ ์ ์
์ค์ต ์์ ์ด~์ง ๋ฏธ๋ฆฌ๋ณด๊ธฐ ๐





์ ์ ์ง๊ฐ!
๋์๋ฅผ ํจ๊ป ํ์ธํด๋ณด์ธ์.