๋ฐ์ํ ์น์ ๋ง๋ค๊ณ ์ถ์ผ์ ๋น์ ,
flex & grid๋ ์ ๋๋ก ๋ฐฐ์ฐ๊ณ ์์ํ ๊น์? ๐
ํ์ ์คํฌ์ ๋ด๋ฐฑํ๊ฒ ์ ๋ฆฌํ
CSS ๋ ์ด์์ ๊ฐ์ ๐
์น ํ์ด์ง์ ์์๋ค์ ๊น๋ํ๊ฒ ์ ๋ฆฌํด ์ฌ์ฉ์์๊ฒ ์๊ฐ์ ์ธ ๋ง์กฑ๊ฐ์ ์ ๊ณตํ๊ณ , ๊ธฐ๊ธฐ๋ ํ๋ฉด์ ํฌ๊ธฐ์ ๋ฐ๋ผ ํ์ด์ง์ ๋ ์ด์์์ ๋ณ๊ฒฝํ ์ ์๋ ์ต์ CSS ๋ ์ด์์ ๊ธฐ์ ์ ์ ๋ฆฌํ์ต๋๋ค.
HTML / CSS์ ๋ํ ๊ฒฝํ์ ๊ฐ์ง๊ณ ์๋ ๋ถ๋ค์ด๋ผ๋ฉด ๋๊ตฌ๋ ๋ถ๋ด์์ด ๊ณต๋ถํ์ค ์ ์๋๋ก ํ๊ธฐ ์ํด, ๊ผญ ํ์ํ ์ฃผ์ ๊ฐ๋
์์ฃผ๋ก ๋ด์ฉ์ ๊ตฌ์ฑํ์ต๋๋ค. ์ค๋ ์๊ฐ์ ํฌ์ํ์ง ์๊ณ ๋ ๋ฐ์ํ ์น์ ๋ง๋ค ๋ ํ์ํ ๊ธฐ๋ณธ๊ธฐ๋ฅผ ๊ฐ์ถ์ค ์ ์๋๋ก ๋๋๋ฐ ์ด์ ์ ๋ ๊ฐ์์
๋๋ค.
์ด ๊ฐ์๋ฅผ ๋ค์ ํ ์ฌ๋ฌ๋ถ์,
- ๐๐ป CSS ๋ ์ด์์์ ๊ฐ๋
์ ์ดํดํ ์ ์์ด์.
- ๐๐ป ๋ ์ด์์ ๊ธฐ์ ์ ํ์ฉํด ์ ๊ทผ์ฑ๊ณผ ๊ฐ๋
์ฑ์ด ๋ฐ์ด๋ ์น ํ์ด์ง๋ฅผ ๋ง๋ค ์ ์์ด์.
- ๐๐ป ๋ฐ์ํ ์น์ ๋ง๋ค๊ธฐ ์ํด ํ์ํ ๋ ์ด์์ ์คํฌ๋ค์ ์ตํ ์ ์์ด์.
์ด ๊ฐ์์์ ๋ฐฐ์ฐ๋ ๊ฒ๋ค ๐ช
์ต์ CSS ๋ ์ด์์ ๊ธฐ์ ์ ๊ฐ๋
๋ฐ ์ฌ์ฉ๋ฒ
์ต์ CSS ๋ ์ด์์ ๊ธฐ์ ์ ๋ํ ์ฃผ์์ธ flex์ grid์ ๋ํด ์ดํดํ ์ ์์ต๋๋ค.
๋ ์ด์์ ์์ ๋ค๋ฃจ๋ ๋ฐฉ๋ฒ
์์๋ฅผ ๋ฐฐ์น ๋ฐ ์ ๋ ฌํ๋ ๋ฐฉ๋ฒ์ ๋น๋กฏํ์ฌ ๋ค์ํ ๋ ์ด์์ ์คํฌ์ ๋ํด ์์๋ด
๋๋ค.
์๊ฐ ์ , ์๋ด ์ฌํญ์ ํ์ธํ์ธ์ ๐
ํ๋, HTML๊ณผ CSS๋ฅผ ์๊ณ ์์ด์ผ ํด์!
๋ณธ ๊ฐ์๋ ์ ๋
ธ์ฝ๋ฉ์ ๊ธฐ์กด ๋ฌด๋ฃ ๊ฐ์์ ์๊ฐ์ ๋ถ๋ค์๊ฒ ๋ณด์ถฉ ์์
์ ์ ๊ณตํ๊ณ ์ ๋ง๋ ๊ฐ์์
๋๋ค.
์ธํ๋ฐ ๋๋ ์ ๋
ธ์ฝ๋ฉ ์ ํ๋ธ ์ฑ๋์์ ํด๋น ๊ฐ์๋ค์ ์ฐธ๊ณ ํ์
๋ ์ข๊ณ ,
๊ธฐ์กด HTML, CSS ํ์ต ๊ฒฝํ์ด ์์ผ์๋ค๋ฉด ๋ฐ๋ก ๊ฐ์๋ฅผ ์๊ฐํ์
๋ ์ข์ต๋๋ค!
๋, ๋ค์๊ณผ ๊ฐ์ ์ค๋น๋ฌผ์ ์ฑ๊ฒจ์ฃผ์ธ์!
- ๐ป ์ปดํจํฐ
- ๐ป ์ฝ๋ ์๋ํฐ (์์
์์๋ Visual Studio Code๋ฅผ ์ฌ์ฉํฉ๋๋ค.)
- ๐ป ์ํ ๋ฅ๋ ฅ (์๋๊ฐ ๋๋ ค๋ ๊ด์ฐฎ์ต๋๋ค.)
์
, ์๊ฐ ์ ๋ฏธ๋ฆฌ ์๋ ค๋๋ ค์!
๋๋ถ๋ถ์ ์์์๋ ์ฝ๋๋ฅผ ์์ฑํ๋ ์ฅ๋ฉด์ด ๋ฑ์ฅํ๋๋ฐ, ์์์ด ์ง๋ฃจํด์ง ์ ์์ด ๋ฐฐ์ ์ฒ๋ฆฌ๋ฅผ ํ์ต๋๋ค. ๋ฐ๋ผ์ ์ฝ๋ฉ ์ค์ต์ ๋ฐ๋ผํ์๋ ๊ฒฝ์ฐ ์ผ์์ ์ง ๊ธฐ๋ฅ์ ํ์ฉํ๋ฉฐ ์ค์ต์ ์งํํด์ฃผ์ธ์.