๋น์ ์ด ์น ํผ๋ธ๋ฆฌ์
, ํ๋ก ํธ์๋ ๊ฐ๋ฐ์, ์ฝ๋ฉํ๋ ๋์์ด๋๋ผ๋ฉด?
์ด์ Flex์ Grid๋ฅผ ๋ฐฐ์์ผ ํ ๋์
๋๋ค! ๐โโ๏ธ
์ Flex์ Grid๋ฅผ
๋ฐฐ์์ผ ํ๋์? ๐ค
์ฌ์ ํ ๋ง์ ํ๊ฒฝ์์ Flex์ Grid ๋์ Float ๋ฑ์ผ๋ก ํ๋ฉด์ ๊ตฌ์ฑํ๊ณ ์์ง๋ง,
์ด๋ ๊ฒ ์ง์ฌ์ง ์ฝ๋๋ ๋ง์ ๋ฌธ์ ๋ฅผ ์ผ๊ธฐํฉ๋๋ค.
๐ Flex์ Grid๋ ์์ผ๋ก css์ ํ์ค์ด์ ๊ธฐ๋ฐ์ด ๋ ๊ธฐ์ ์
๋๋ค.
์๋ง์ ์๋น์ค๋ค์ด Grid๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ๋์์ธ ๋๊ณ ์๊ณ , ๊ทธ๊ฒ์ ๊ทธ๋๋ก ์ ์ฉ์ํค๊ธฐ ์ํด์๋ ํ์ฐ์ ์ด๋๊น์.
๐ ๊ฐ๋จํ๊ณ ์ฝ์ต๋๋ค.
์ด์ ์ ๊ธฐ์ ๋ค๋ก ํํํ๊ธฐ ์ํด์๋ ์จ๊ฐ ๊ผผ์๋ฅผ ์จ์ผํ๋ค๋ฉด, Flex์ Grid๋ก๋ ์์ฃผ ๊ฐ๋จํ๊ณ ์ฝ๊ฒ ๋ง์ ๊ฒ๋ค์ด ํด๊ฒฐ๋ฉ๋๋ค.
๐ ์ค๋ฌด์์ ๋ฐ๋ก ํ์ฉ ๊ฐ๋ฅํ ๊ธฐ์ ์
๋๋ค.
Flex์ Grid๋ ์ธํฐ๋ท ์ต์คํ๋ก๋ฌ์์ ์๋๋๊น ์ค๋ฌด์์ ๋ชป ์ฐ๋ ๊ธฐ์ ์ด ์๋๋๋ค.
์ต์ ๋ฒ์ ์ ์ธํฐ๋ท ์ต์คํ๋ก๋ฌ๋ฅผ ์ง์ํ๋ ํ๋ก์ ํธ๋ผ๋ฉด ์ฌ์ฉํ ์ ์์ต๋๋ค.
๊ฐ์์์ ๋ฐฐ์ฐ๋ ๋ด์ฉ ๐
์ดํดํ๊ธฐ ์ฝ๊ฒ ์ ๋ฆฌํ ํต์ฌ ๊ฐ๋
์ ๋ฆฌ
์๋ก์ด ๊ฐ๋
์ด๋ผ ์ตํ์ผ ํ ๊ฒ๋ค์ด ๊ฝค๋ ๋ง์ต๋๋ค. ์ฒ์ ํ๋ ๋ถ๋ค์ ์ ๋ฆฌ๋ ๋ฌธ์๋ฅผ ์ฝ์ด๋ณด์๋ ํท๊ฐ๋ฆฌ๊ณ ์ด๋ ค์ด ๋ถ๋ถ๋ค์ด ์์ ๊ฑฐ์์. ์ฌ๋ฌ๋ถ๋ค์ด ์์ผ๋ก ํ CSS ๋ ์ด์์ ์ฝ๋ฉ์ ๊ธฐ๋ฐ๊ธฐ์ ์ธ๋งํผ, ํ์คํ ์ดํดํ ์ ์๋๋ก ๊ฐ๋
์ค๋ช
์๋ ์๊ฐ์ ๋ง์ด ํ ์ ํ์ต๋๋ค.
๊ฐ๋
์ ๋ฐํ์ผ๋ก ๊ฐ๋จํ UI ๋ง๋ค๊ธฐ
๊ธฐ๋ณธ ํต์ฌ ๊ฐ๋
์ ์ตํ ํ, ํ์์ ์ด๊ณ ์์ฃผ ์ฌ์ฉํ๋ ํจํด์ UI๋ค๊ณผ ๋ฐ์ํ ํ์ด์ง๋ฅผ ์ง์ ๋ง๋ค์ด๋ณด๋ฉฐ
๊ธฐ๋ณธ๊ธฐ๋ฅผ ํํํ๊ฒ ๋ค๋ฌ๊ณ ์์ฐ์ค๋ฝ๊ฒ ์ต์ํด์ง ์ ์๋๋ก ๊ฐ์๋ฅผ ๊ตฌ์ฑํ์ต๋๋ค.
Flex, Grid๋ก ๊ฐ๊ฐ ๋ฐ์ํ ํ์ด์ง ๋ง๋ค๊ธฐ ์ค์ตํ๊ธฐ

์ต๊ทผ ๋ง๋ค์ด์ง๋ ์๋น์ค์ 99%๋ ๋ฐ์ํ ํ์ด์ง์
๋๋ค. Flex์ Grid๋ฅผ ์ด์ฉํ์ฌ ํจ์ฌ ์ฝ๊ณ ๊ฐํธํ๊ฒ ๊ฐ๋ ฅํ ๋ฐ์ํ ํ์ด์ง๋ฅผ ๋ง๋ค์ด๋ณด์ธ์. ๋์์ธํ๋๋ก, ์์ํ๋๋ก 3D ๊ฒ์ํ์ ๋ง๋ค์ด๋ณด๋ฉฐ ๋ฐฐ์ด ๋ด์ฉ๋ค๋ก ์ฐ๋ฆฌ๊ฐ ์ด๋ค ์์๋ ฅ์ ํ์คํ ํ ์ง ๊ฐ์ ์ก์๋ณด๋๋ก ํ์ฃ !
์ธํฐ๋ท ์ต์คํ๋ก๋ฌ์์ Grid ์ฌ์ฉํ๊ธฐ
Flex์ Grid๋ "์ธํฐ๋ท ์ต์คํ๋ก๋ฌ์์ ์๋๋๊น ์ค๋ฌด์์ ๋ชป ์ฐ๋ ๊ธฐ์ "์ด ์๋์์. ์์ฑ์ ๋น๊ตํด๋ณด๊ณ Grid๋ฅผ ์ด๋ป๊ฒ ์ฌ์ฉํ๋ ๋ฐฐ์๋ด
๋๋ค.
์ฐ๊ด ๋ก๋๋งต ๐