CSS Grid ํธ๋ ํฌ๊ธฐ ์ ์ฝ ์กฐ๊ฑด ํด๊ฒฐ์ฌ, ์๊ณ ๋ฆฌ์ฆ, ๋ค์ํ ์ฅ์น ๋ฐ ํ๋ฉด ํฌ๊ธฐ์ ๊ธ๋ก๋ฒ ์ฌ์ฉ์๋ฅผ ์ํ ์น ๋ ์ด์์ ์ต์ ํ ๋ฐฉ๋ฒ์ ๋ํ ์ฌ์ธต์ ์ธ ํ๊ตฌ.
CSS Grid ํธ๋ ํฌ๊ธฐ ์ ์ฝ ์กฐ๊ฑด ํด๊ฒฐ์ฌ: ๋ ์ด์์ ์ต์ ํ ์ฌ์ธต ๋ถ์
CSS Grid ๋ ์ด์์์ ๊ฐ๋ฐ์๊ฐ ๋ณต์กํ๊ณ ๋ฐ์ํ ์น ๋์์ธ์ ์ฝ๊ฒ ๋ง๋ค ์ ์๋๋ก ํ๋ ๊ฐ๋ ฅํ ๋ ์ด์์ ์์คํ ์ ๋๋ค. CSS Grid์ ํต์ฌ์๋ ํธ๋ ํฌ๊ธฐ ์ ์ฝ ์กฐ๊ฑด ํด๊ฒฐ์ฌ๊ฐ ์์ผ๋ฉฐ, ์ด๋ ์ผ๋ จ์ ์ ์ฝ ์กฐ๊ฑด์ ๋ฐ๋ผ ๊ทธ๋ฆฌ๋ ํธ๋(ํ ๋ฐ ์ด)์ ์ต์ ํฌ๊ธฐ๋ฅผ ๊ฒฐ์ ํ๋ ์ ๊ตํ ์๊ณ ๋ฆฌ์ฆ์ ๋๋ค. ์ด ์๊ณ ๋ฆฌ์ฆ์ ์ดํดํ๋ ๊ฒ์ ํนํ ๋ค์ํ ํ๋ฉด ํฌ๊ธฐ ๋ฐ ์ฅ์น ๊ธฐ๋ฅ์ ๊ฐ์ถ ๊ธ๋ก๋ฒ ๋์์ ๋์์ผ๋ก ํ ๋ ์์ธก ๊ฐ๋ฅํ๊ณ ํจ์จ์ ์ธ ๋ ์ด์์์ ๋ฌ์ฑํ๋ ๋ฐ ์ค์ํฉ๋๋ค.
ํธ๋ ํฌ๊ธฐ ์ ์ฝ ์กฐ๊ฑด ํด๊ฒฐ์ฌ๋ ๋ฌด์์ ๋๊น?
CSS Grid ํธ๋ ํฌ๊ธฐ ์ ์ฝ ์กฐ๊ฑด ํด๊ฒฐ์ฌ๋ CSS Grid ๋ ์ด์์ ๋ชจ๋์ ํต์ฌ ๊ตฌ์ฑ ์์์
๋๋ค. ์ฃผ์ ๊ธฐ๋ฅ์ fr(๋ถ์ ๋จ์), auto, minmax() ๋๋ ๋ฐฑ๋ถ์จ๊ณผ ๊ฐ์ ์ ์ฐํ ๋จ์๋ฅผ ์ฌ์ฉํ์ฌ ํฌ๊ธฐ๊ฐ ์ ์๋ ๊ทธ๋ฆฌ๋ ํธ๋(ํ ๋ฐ ์ด)์ ํฌ๊ธฐ๋ฅผ ํ์ธํ๋ ๊ฒ์
๋๋ค. ํด๊ฒฐ์ฌ๋ ๋ค์์ ํฌํจํ ๋ค์ํ ์ ์ฝ ์กฐ๊ฑด์ ๊ณ ๋ คํฉ๋๋ค.
- ๋ช
์์ ํธ๋ ํฌ๊ธฐ:
px,em,rem๊ณผ ๊ฐ์ ๊ณ ์ ๋จ์๋ฅผ ์ฌ์ฉํ์ฌ ์ ์๋ ํฌ๊ธฐ. - ์ฝํ ์ธ ํฌ๊ธฐ: ํธ๋ ๋ด์ ๋ฐฐ์น๋ ๊ทธ๋ฆฌ๋ ํญ๋ชฉ์ ๋ด์ฌ์ ํฌ๊ธฐ.
- ์ฌ์ฉ ๊ฐ๋ฅํ ๊ณต๊ฐ: ๊ณ ์ ํฌ๊ธฐ ํธ๋ ๋ฐ ๊ทธ๋ฆฌ๋ ๊ฐ๊ฒฉ์ ๊ณ ๋ คํ ํ ๊ทธ๋ฆฌ๋ ์ปจํ ์ด๋์ ๋จ์ ์๋ ๊ณต๊ฐ.
- ๋ถ์ ๋จ์(fr): ํธ๋์ ํ ๋น๋ ์ฌ์ฉ ๊ฐ๋ฅํ ๊ณต๊ฐ์ ๋น์จ.
minmax()ํจ์: ํธ๋์ ์ต์ ๋ฐ ์ต๋ ํฌ๊ธฐ๋ฅผ ์ ์ํฉ๋๋ค.autoํค์๋: ํธ๋ ํฌ๊ธฐ๋ฅผ ์ฝํ ์ธ ๋๋ ๋ค๋ฅธ ํธ๋์ ๋ฐ๋ผ ๊ฒฐ์ ํ ์ ์์ต๋๋ค.
๊ทธ๋ฐ ๋ค์ ํด๊ฒฐ์ฌ๋ ์ด๋ฌํ ์ ์ฝ ์กฐ๊ฑด์ ๋ฐ๋ณตํ์ฌ ๋ชจ๋ ๊ท์น์ด ์ถฉ์กฑ๋๋๋ก ๊ฐ ํธ๋์ ์ต์ข ํฌ๊ธฐ๋ฅผ ๊ฒฐ์ ํฉ๋๋ค. ์ด ํ๋ก์ธ์ค๋ ๋ค์ํ ํ๋ฉด ํฌ๊ธฐ ๋ฐ ์ฝํ ์ธ ๋ณํ์ ์ ์ ํ๊ฒ ์ ์ํ๋ ๋ ์ด์์์ ๋ง๋๋ ๋ฐ ์ค์ํฉ๋๋ค. ๋ํ ํ๋กํธ ๋๋ Flexbox์ ๊ฐ์ ์ด์ ๋ ์ด์์ ๋ฐฉ๋ฒ๋ณด๋ค CSS Grid๋ฅผ ๋ ๊ฐ๋ ฅํ๊ฒ ๋ง๋๋ ์์์ด๊ธฐ๋ ํฉ๋๋ค(Flexbox๋ ์ฌ์ ํ ๊ทธ ์๋ฆฌ๋ฅผ ์งํค๊ณ ์์ง๋ง).
์๊ณ ๋ฆฌ์ฆ ์์ธ ์ ๋ณด
CSS Grid ํธ๋ ํฌ๊ธฐ ์ ์ฝ ์กฐ๊ฑด ํด๊ฒฐ์ฌ๋ ์ผ๋ฐ์ ์ผ๋ก ๋ค์ ๋จ๊ณ๋ฅผ ํฌํจํ๋ ๋ค๋จ๊ณ ์๊ณ ๋ฆฌ์ฆ์ ๋ฐ๋ฆ ๋๋ค.1. ์ด๊ธฐ ์ ์ฝ ์กฐ๊ฑด ์์ง
ํด๊ฒฐ์ฌ๋ ๊ทธ๋ฆฌ๋ ํธ๋์ ์ ์ฉ๋๋ ๋ชจ๋ ์ ์ฝ ์กฐ๊ฑด์ ์์งํ๋ ๊ฒ์ผ๋ก ์์ํฉ๋๋ค. ์ฌ๊ธฐ์๋ ๋ค์์ด ํฌํจ๋ฉ๋๋ค.
- ๋ช
์์ ํฌ๊ธฐ: ๊ณ ์ ๊ธธ์ด(์:
100px,5em)๋ก ์ ์๋ ํธ๋. ์ด๋ ํด๊ฒฐํ๊ธฐ ๊ฐ์ฅ ์ฝ์ต๋๋ค. - ๋ด์ฌ์ ์ต์ ๋ฐ ์ต๋ ํฌ๊ธฐ: ๊ฐ ์
๋ด์ ์ฝํ
์ธ ์ ์ง์ ๋
min-content๋ฐmax-contentํค์๋ ๋๋minmax()ํจ์๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ํฉ๋๋ค. - ์ ์ฐํ ํฌ๊ธฐ: ๋๋จธ์ง ๊ณต๊ฐ์ ์ผ๋ถ๋ฅผ ๋ํ๋ด๋
fr๋จ์๋ฅผ ์ฌ์ฉํ์ฌ ์ ์๋ ํธ๋. autoํค์๋: ์ฝํ ์ธ ๋๋ ๋ค๋ฅธ ํธ๋์ ๊ธฐ๋ฐ์ผ๋ก ์๋์ผ๋ก ํฌ๊ธฐ๊ฐ ์กฐ์ ๋๋ ํธ๋.
์๋ฅผ ๋ค์ด ๋ค์ ๊ทธ๋ฆฌ๋ ์ ์๋ฅผ ๊ณ ๋ คํ์ญ์์ค.
.grid-container {
display: grid;
grid-template-columns: 100px 1fr auto 2fr;
grid-template-rows: auto minmax(100px, 200px);
}
์ด ์์์ ํด๊ฒฐ์ฌ๋ ๋ค์๊ณผ ๊ฐ์ ์ด๊ธฐ ์ ์ฝ ์กฐ๊ฑด์ ์์งํฉ๋๋ค.
- ์ด 1:
100px์ ๊ณ ์ ํฌ๊ธฐ. - ์ด 2:
1fr์ ์ ์ฐํ ํฌ๊ธฐ. - ์ด 3: ์ฝํ
์ธ ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก
autoํฌ๊ธฐ ์กฐ์ . - ์ด 4:
2fr์ ์ ์ฐํ ํฌ๊ธฐ. - ํ 1: ์ฝํ
์ธ ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก
autoํฌ๊ธฐ ์กฐ์ . - ํ 2: ์ฝํ
์ธ ๋ฐ ์ฌ์ฉ ๊ฐ๋ฅํ ๊ณต๊ฐ์ ๋ฐ๋ผ
100px์200px์ฌ์ด.
2. ๊ณ ์ ํฌ๊ธฐ ํธ๋ ํด๊ฒฐ
ํด๊ฒฐ์ฌ๋ ๋จผ์ ๊ณ ์ ํฌ๊ธฐ์ ํธ๋์ ํด๊ฒฐํฉ๋๋ค. ์ด๋ฌํ ํธ๋์ ์ง์ ๋ ๊ธธ์ด๋ฅผ ์ฆ์ ํ ๋น๋ฐ์ ๋๋จธ์ง ํธ๋์ ์ฌ์ฉํ ์ ์๋ ๊ณต๊ฐ์ ์ค์
๋๋ค. ์ฐ๋ฆฌ ์์์ ์ฒซ ๋ฒ์งธ ์ด(100px)์ ์ด ๋จ๊ณ์์ ํด๊ฒฐ๋ฉ๋๋ค.
์ด ๋จ๊ณ๋ ๋๋จธ์ง ์ ์ฝ ์กฐ๊ฑด ํด๊ฒฐ ํ๋ก์ธ์ค์ ๋ณต์ก์ฑ์ ์ค์ด๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค. ๊ณ ์ ํฌ๊ธฐ๋ ์ฒ์๋ถํฐ ์๋ ค์ ธ ์์ผ๋ฏ๋ก ๋ ์ด์ ๊ณ ๋ คํ ํ์๊ฐ ์์ต๋๋ค.
3. ์ฌ์ฉ ๊ฐ๋ฅํ ๊ณต๊ฐ ๊ณ์ฐ
๊ณ ์ ํฌ๊ธฐ ํธ๋์ ํด๊ฒฐํ ํ ํด๊ฒฐ์ฌ๋ ๊ทธ๋ฆฌ๋ ์ปจํ ์ด๋์ ๋จ์ ์๋ ์ฌ์ฉ ๊ฐ๋ฅํ ๊ณต๊ฐ์ ๊ณ์ฐํฉ๋๋ค. ์ด๋ ๊ณ ์ ํฌ๊ธฐ ํธ๋ ๊ธธ์ด์ ๊ทธ๋ฆฌ๋ ๊ฐ๊ฒฉ์ ํฉ๊ณ๋ฅผ ๊ทธ๋ฆฌ๋ ์ปจํ ์ด๋์ ์ด ํฌ๊ธฐ์์ ๋นผ์ ์ํ๋ฉ๋๋ค.
์ฌ์ฉ ๊ฐ๋ฅํ ๊ณต๊ฐ์ ๊ณ์ฐํ๋ ค๋ฉด ๊ทธ๋ฆฌ๋ ํธ๋ ๊ฐ์ ๊ฐ๊ฒฉ์ ์ ์ํ๋ ์ง์ ๋ grid-gap, row-gap ๋๋ column-gap ์์ฑ๋ ๊ณ ๋ คํด์ผ ํฉ๋๋ค.
4. ์ ์ฐํ ํธ๋์ ๊ณต๊ฐ ๋ถ๋ฐฐ(fr ๋จ์)
๊ทธ๋ฐ ๋ค์ ์ฌ์ฉ ๊ฐ๋ฅํ ๊ณต๊ฐ์ ์ ์ฐํ ํธ๋(fr ๋จ์๋ก ์ ์๋ ํธ๋) ๊ฐ์ ๋ถ๋ฐฐ๋ฉ๋๋ค. ๊ณต๊ฐ์ fr ๊ฐ์ ๋น์จ์ ๋ฐ๋ผ ๋น๋ก์ ์ผ๋ก ๋ถ๋ฐฐ๋ฉ๋๋ค. ์ฐ๋ฆฌ ์์์ ์ด 2์ 4๋ ๊ฐ๊ฐ 1fr๊ณผ 2fr์ ๊ฐ์ต๋๋ค. ์ด๋ ์ด 4๊ฐ ์ด 2๋ณด๋ค ๋ ๋ฐฐ ๋ ๋ง์ ๊ณต๊ฐ์ ํ๋ณดํ๋ค๋ ์๋ฏธ์
๋๋ค.
์ด๊ฒ์ด CSS Grid๊ฐ ๋น์ ๋ฐํ๋ ๊ณณ์
๋๋ค. fr ๋จ์๋ฅผ ์ฌ์ฉํ๋ฉด ๋ค์ํ ํ๋ฉด ํฌ๊ธฐ์ ์๋์ผ๋ก ์ ์ํ๋ ๋ ์ด์์์ ๋ง๋ค ์ ์์ผ๋ฏ๋ก ์ฝํ
์ธ ๊ฐ ํญ์ ์ฌ๋ฐ๋ฅด๊ฒ ํ์๋ฉ๋๋ค.
๊ทธ๋ฌ๋ ๋ถ๋ฐฐ ํ๋ก์ธ์ค๊ฐ ํญ์ ๊ฐ๋จํ ๊ฒ์ ์๋๋๋ค. ํด๊ฒฐ์ฌ๋ minmax() ํจ์์์ ์ ์ํ ๋๋ก ํธ๋์ ์ต์ ๋ฐ ์ต๋ ํฌ๊ธฐ๋ ๊ณ ๋ คํด์ผ ํฉ๋๋ค.
5. minmax() ์ ์ฝ ์กฐ๊ฑด ์ฒ๋ฆฌ
minmax() ํจ์๋ ํธ๋์ ํ์ฉ๋๋ ํฌ๊ธฐ ๋ฒ์๋ฅผ ์ ์ํฉ๋๋ค. ํด๊ฒฐ์ฌ๋ ํธ๋์ ์ต์ข
ํฌ๊ธฐ๊ฐ ์ด ๋ฒ์ ๋ด์ ์๋์ง ํ์ธํด์ผ ํฉ๋๋ค. ์ฌ์ฉ ๊ฐ๋ฅํ ๊ณต๊ฐ์ด ๋ชจ๋ minmax() ์ ์ฝ ์กฐ๊ฑด์ ์ถฉ์กฑํ๊ธฐ์ ์ถฉ๋ถํ์ง ์์ ๊ฒฝ์ฐ ํด๊ฒฐ์ฌ๋ ๋ค๋ฅธ ํธ๋์ ํฌ๊ธฐ๋ฅผ ์กฐ์ ํ์ฌ ์ด๋ฅผ ์์ฉํด์ผ ํ ์ ์์ต๋๋ค.
๋ค์ ์๋ฅผ ๊ณ ๋ คํ์ญ์์ค.
.grid-container {
display: grid;
grid-template-columns: minmax(100px, 200px) 1fr;
}
์ฒซ ๋ฒ์งธ ์ด์ ์ฌ์ฉํ ์ ์๋ ๊ณต๊ฐ์ด 100px๋ณด๋ค ์์ผ๋ฉด ํด๊ฒฐ์ฌ๋ 100px๋ฅผ ํ ๋นํฉ๋๋ค. ์ฌ์ฉ ๊ฐ๋ฅํ ๊ณต๊ฐ์ด 200px๋ณด๋ค ํฌ๋ฉด ํด๊ฒฐ์ฌ๋ 200px๋ฅผ ํ ๋นํฉ๋๋ค. ๊ทธ๋ ์ง ์์ผ๋ฉด ํด๊ฒฐ์ฌ๋ ์ฌ์ฉ ๊ฐ๋ฅํ ๊ณต๊ฐ์ ์ฒซ ๋ฒ์งธ ์ด์ ํ ๋นํฉ๋๋ค.
6. auto ํฌ๊ธฐ ์กฐ์ ํธ๋ ํด๊ฒฐ
auto ํค์๋๋ก ์ ์๋ ํธ๋์ ์ฝํ
์ธ ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ํฌ๊ธฐ๊ฐ ์กฐ์ ๋ฉ๋๋ค. ํด๊ฒฐ์ฌ๋ ํธ๋ ๋ด ์ฝํ
์ธ ์ ๋ด์ฌ์ ์ต์ ๋ฐ ์ต๋ ํฌ๊ธฐ๋ฅผ ๊ฒฐ์ ํ๊ณ ๊ทธ์ ๋ฐ๋ผ ๊ณต๊ฐ์ ํ ๋นํฉ๋๋ค. ์ด ๋จ๊ณ์๋ ์ฝํ
์ธ ์ ํฌ๊ธฐ๋ฅผ ์ธก์ ํ์ฌ ์น์๋ฅผ ๊ฒฐ์ ํ๋ ์์
์ด ํฌํจ๋๋ ๊ฒฝ์ฐ๊ฐ ๋ง์ต๋๋ค.
์๋ฅผ ๋ค์ด ํธ๋์ ์ด๋ฏธ์ง๊ฐ ํฌํจ๋์ด ์์ผ๋ฉด auto ํฌ๊ธฐ๋ ์ด๋ฏธ์ง์ ์น์(๋๋ ์ง์ ๋ ๋๋น ๋ฐ ๋์ด๊ฐ ์๋ ๊ฒฝ์ฐ)์ ๋ฐ๋ผ ๊ฒฐ์ ๋ฉ๋๋ค.
7. ๋ฐ๋ณต ๋ฐ ์ถฉ๋ ํด๊ฒฐ
ํด๊ฒฐ์ฌ๋ ๋ชจ๋ ์ ์ฝ ์กฐ๊ฑด์ ํด๊ฒฐํ๊ณ ์ต์ข ํธ๋ ํฌ๊ธฐ๊ฐ ์ผ๊ด์ฑ์ ์ ์งํ๋๋ก ์ด๋ฌํ ๋จ๊ณ๋ฅผ ์ฌ๋ฌ ๋ฒ ๋ฐ๋ณตํด์ผ ํ ์ ์์ต๋๋ค. ๊ฒฝ์ฐ์ ๋ฐ๋ผ ์ถฉ๋ํ๋ ์ ์ฝ ์กฐ๊ฑด์ด ๋ฐ์ํ์ฌ ํด๊ฒฐ์ฌ๊ฐ ํน์ ์ ์ฝ ์กฐ๊ฑด์ ๋ค๋ฅธ ์ ์ฝ ์กฐ๊ฑด๋ณด๋ค ์ฐ์ ์ํด์ผ ํ ์ ์์ต๋๋ค.
์ด ๋ฐ๋ณต์ ์ธ ํ๋ก์ธ์ค๋ฅผ ํตํด CSS Grid๋ ๋์ ์์ค์ ์ ์ฐ์ฑ๊ณผ ์ ํ๋๋ก ๋ณต์กํ ๋ ์ด์์ ์๋๋ฆฌ์ค๋ฅผ ์ฒ๋ฆฌํ ์ ์์ต๋๋ค. ๋ํ ๊ณ ๊ธ CSS Grid ์ฌ์ฉ์์๊ฒ ์ ์ฝ ์กฐ๊ฑด ํด๊ฒฐ์ฌ๋ฅผ ์ดํดํ๋ ๊ฒ์ด ๋งค์ฐ ์ค์ํ ์ด์ ์ด๊ธฐ๋ ํฉ๋๋ค.
์ค์ ์์ ๋ฐ ์๋๋ฆฌ์ค
ํธ๋ ํฌ๊ธฐ ์ ์ฝ ์กฐ๊ฑด ํด๊ฒฐ์ฌ๊ฐ ๋ค์ํ ์๋๋ฆฌ์ค์์ ์ด๋ป๊ฒ ์๋ํ๋์ง ์ค๋ช ํ๊ธฐ ์ํด ๋ช ๊ฐ์ง ์ค์ ์์ ๋ฅผ ์ดํด๋ณด๊ฒ ์ต๋๋ค.
์์ 1: ๊ฐ๋จํ ๋ฐ์ํ ๊ทธ๋ฆฌ๋
์ฒซ ๋ฒ์งธ ์ด์ด ๊ณ ์ ๋๋น๋ฅผ ๊ฐ๊ณ ๋ ๋ฒ์งธ ์ด์ด ๋๋จธ์ง ๊ณต๊ฐ์ ์ฐจ์งํ๋ ๋ ๊ฐ์ ์ด์ด ์๋ ๊ฐ๋จํ ๊ทธ๋ฆฌ๋๋ฅผ ๊ณ ๋ คํ์ญ์์ค.
.grid-container {
display: grid;
grid-template-columns: 200px 1fr;
}
์ด ๊ฒฝ์ฐ ํด๊ฒฐ์ฌ๋ ๋จผ์ ์ฒซ ๋ฒ์งธ ์ด์ 200px๋ฅผ ํ ๋นํฉ๋๋ค. ๊ทธ๋ฐ ๋ค์ ๋๋จธ์ง ์ฌ์ฉ ๊ฐ๋ฅํ ๊ณต๊ฐ์ ๊ณ์ฐํ์ฌ 1fr์ ์ ์ฐํ ํฌ๊ธฐ๋ฅผ ๊ฐ๋ ๋ ๋ฒ์งธ ์ด์ ํ ๋นํฉ๋๋ค.
์์ 2: minmax() ๋ฐ fr ๋จ์๊ฐ ์๋ ๊ทธ๋ฆฌ๋
์ฒซ ๋ฒ์งธ ์ด์ด ์ต์ ๋ฐ ์ต๋ ํฌ๊ธฐ๋ฅผ ๊ฐ๊ณ , ๋ ๋ฒ์งธ ์ด์ด ์ ์ฐํ ํฌ๊ธฐ๋ฅผ ๊ฐ๊ณ , ์ธ ๋ฒ์งธ ์ด์ด auto ํฌ๊ธฐ ์กฐ์ ๋๋ ์ธ ๊ฐ์ ์ด์ด ์๋ ๊ทธ๋ฆฌ๋๋ฅผ ๊ณ ๋ คํ์ญ์์ค.
.grid-container {
display: grid;
grid-template-columns: minmax(150px, 250px) 1fr auto;
}
ํด๊ฒฐ์ฌ๋ ๋จผ์ minmax() ๋ฒ์ ๋ด์์ ์ฒซ ๋ฒ์งธ ์ด์ ๊ณต๊ฐ์ ํ ๋นํ๋ ค๊ณ ์๋ํฉ๋๋ค. ๊ทธ๋ฐ ๋ค์ ๋๋จธ์ง ๊ณต๊ฐ์ ๋ ๋ฒ์งธ ๋ฐ ์ธ ๋ฒ์งธ ์ด ์ฌ์ด์ ๋ถ๋ฐฐ๋๋ฉฐ, ๋ ๋ฒ์งธ ์ด์ ๊ณต๊ฐ์ ์ผ๋ถ๋ฅผ ์ฐจ์งํ๊ณ ์ธ ๋ฒ์งธ ์ด์ ์ฝํ
์ธ ํฌ๊ธฐ์ ๋ง๊ฒ ์กฐ์ ๋ฉ๋๋ค.
์์ 3: ์ฝํ ์ธ ์ค๋ฒํ๋ก ์ฒ๋ฆฌ
๊ทธ๋ฆฌ๋ ํญ๋ชฉ ๋ด์ ์ฝํ
์ธ ๊ฐ ํด๋น ํธ๋์ ํ ๋น๋ ๊ณต๊ฐ์ ์ด๊ณผํ๋ฉด ์ด๋ป๊ฒ ๋ฉ๋๊น? ๊ธฐ๋ณธ์ ์ผ๋ก ์ฝํ
์ธ ๋ ํธ๋์ ์ค๋ฒํ๋กํฉ๋๋ค. ๊ทธ๋ฌ๋ overflow ์์ฑ์ ์ฌ์ฉํ์ฌ ์ค๋ฒํ๋ก ์ฒ๋ฆฌ ๋ฐฉ์์ ์ ์ดํ ์ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด overflow: hidden์ ์ค์ ํ์ฌ ์ฝํ
์ธ ๋ฅผ ํด๋ฆฌํํ๊ฑฐ๋ overflow: scroll์ ์ค์ ํ์ฌ ์คํฌ๋กค ๋ง๋๋ฅผ ์ถ๊ฐํ ์ ์์ต๋๋ค.
๊ทธ๋ฆฌ๋ ๋ ์ด์์์ ๋์์ธํ ๋ ํนํ ๋์ ์ฝํ
์ธ ๋๋ ์ ์ ์๋ ํฌ๊ธฐ์ ์ฝํ
์ธ ๋ฅผ ์ฒ๋ฆฌํ ๋ ์ฝํ
์ธ ์ค๋ฒํ๋ก๋ฅผ ๊ณ ๋ คํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. ์ ์ ํ overflow ์์ฑ์ ์ ํํ๋ฉด ์ฝํ
์ธ ๊ฐ ๊ฒฝ๊ณ๋ฅผ ์ด๊ณผํ๋๋ผ๋ ๋ ์ด์์์ด ์๊ฐ์ ์ผ๋ก ๋งค๋ ฅ์ ์ด๊ณ ๊ธฐ๋ฅ์ ์ผ๋ก ์ ์ง๋๋๋ก ํ ์ ์์ต๋๋ค.
๊ธ๋ก๋ฒ ๊ณ ๋ ค ์ฌํญ: ๋ค์ํ ์ฐ๊ธฐ ๋ชจ๋ ์ฒ๋ฆฌ
๊ธ๋ก๋ฒ ๋์์ ์ํด ๋์์ธํ ๋๋ ๋ค์ํ ์ฐ๊ธฐ ๋ชจ๋(์: ์ผ์ชฝ์์ ์ค๋ฅธ์ชฝ, ์ค๋ฅธ์ชฝ์์ ์ผ์ชฝ)๋ฅผ ๊ณ ๋ คํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. CSS Grid๋ ์๋์ผ๋ก ์ฐ๊ธฐ ๋ชจ๋์ ์ ์ํ์ฌ ์ธ์ด์ ๊ด๊ณ์์ด ๋ ์ด์์์ด ์ฌ๋ฐ๋ฅด๊ฒ ํ์๋๋๋ก ํฉ๋๋ค. ์๋ฅผ ๋ค์ด ์ค๋ฅธ์ชฝ์์ ์ผ์ชฝ ์ธ์ด์์๋ ๊ทธ๋ฆฌ๋ ์ด์ด ์ญ์์ผ๋ก ํ์๋ฉ๋๋ค.
์ต์ ํ ๊ธฐ์
CSS Grid ํธ๋ ํฌ๊ธฐ ์ ์ฝ ์กฐ๊ฑด ํด๊ฒฐ์ฌ๋ ํจ์จ์ ์ผ๋ก ์ค๊ณ๋์์ง๋ง ๊ทธ๋ฆฌ๋ ๋ ์ด์์์ ์ฑ๋ฅ์ ํฅ์์ํค๊ธฐ ์ํด ์ฌ์ฉํ ์ ์๋ ๋ช ๊ฐ์ง ์ต์ ํ ๊ธฐ์ ์ด ์์ต๋๋ค.
1. ์ง๋์น๊ฒ ๋ณต์กํ ๊ทธ๋ฆฌ๋ ํผํ๊ธฐ
๊ทธ๋ฆฌ๋ ๋ ์ด์์์ด ๋ณต์กํ ์๋ก ํด๊ฒฐ์ฌ๊ฐ ์ํํด์ผ ํ ์์ ์ด ๋ง์์ง๋๋ค. ํ์ํ ๊ฒฝ์ฐ์๋ง ์ค์ฒฉ๋ ๊ทธ๋ฆฌ๋๋ฅผ ์ฌ์ฉํ์ฌ ๊ทธ๋ฆฌ๋๋ฅผ ์ต๋ํ ๋จ์ํ๊ฒ ์ ์งํ์ญ์์ค. ์ง๋์น๊ฒ ๋ณต์กํ ๊ทธ๋ฆฌ๋๋ ํนํ ๊ตฌํ ์ฅ์น ๋๋ ๋ธ๋ผ์ฐ์ ์์ ์ฑ๋ฅ ๋ฌธ์ ๋ฅผ ์ผ์ผํฌ ์ ์์ต๋๋ค.2. ๊ฐ๋ฅํ ๊ฒฝ์ฐ ๊ณ ์ ํฌ๊ธฐ ํธ๋ ์ฌ์ฉ
๊ณ ์ ํฌ๊ธฐ ํธ๋์ ํด๊ฒฐ์ฌ๊ฐ ํด๊ฒฐํ๊ธฐ ๊ฐ์ฅ ์ฝ์ต๋๋ค. ํธ๋์ ์ ํํ ํฌ๊ธฐ๋ฅผ ์๊ณ ์๋ ๊ฒฝ์ฐ fr ๋๋ auto์ ๊ฐ์ ์ ์ฐํ ๋จ์ ๋์ px ๋๋ em๊ณผ ๊ฐ์ ๊ณ ์ ๋จ์๋ฅผ ์ฌ์ฉํ์ญ์์ค.
3. auto ํฌ๊ธฐ ์กฐ์ ํธ๋ ์ฌ์ฉ ์ต์ํ
auto ํฌ๊ธฐ ์กฐ์ ํธ๋์ ์ฌ์ฉํ๋ ค๋ฉด ํด๊ฒฐ์ฌ๊ฐ ํธ๋ ๋ด์ ์ฝํ
์ธ ํฌ๊ธฐ๋ฅผ ์ธก์ ํด์ผ ํ๋ฏ๋ก ์ฑ๋ฅ ์ง์ฝ์ ์ธ ์์
์ด ๋ ์ ์์ต๋๋ค. ํนํ ๋ณต์กํ ๊ทธ๋ฆฌ๋์์๋ auto ํฌ๊ธฐ ์กฐ์ ํธ๋์ ์ฌ์ฉ์ ์ต์ํํ์ญ์์ค.
4. content-visibility: auto ์ฌ์ฉ
CSS ์์ฑ `content-visibility: auto`๋ ํนํ ๋ณต์กํ ๋ ์ด์์์์ ๋ ๋๋ง ์ฑ๋ฅ์ ํฌ๊ฒ ํฅ์์ํฌ ์ ์์ต๋๋ค. ์ด๋ฅผ ํตํด ๋ธ๋ผ์ฐ์ ๋ ํ์ํ ๋๊น์ง ํ๋ฉด ๋ฐ์ ์๋ ์ฝํ ์ธ ์ ๋ ๋๋ง์ ๊ฑด๋๋ธ ์ ์์ผ๋ฏ๋ก ์ด๊ธฐ ๋ก๋ ๋ฐ ๋ ๋๋ง ์๊ฐ์ ์ค์ผ ์ ์์ต๋๋ค. ํธ๋ ํฌ๊ธฐ ์กฐ์ ์๊ณ ๋ฆฌ์ฆ๊ณผ ์ง์ ์ ์ธ ๊ด๋ จ์ ์์ง๋ง CSS Grid์ ํจ๊ป ์๋์ง ํจ๊ณผ๋ฅผ ๋ฐํํ์ฌ ์ ์ฒด ์ฑ๋ฅ์ ํฅ์์ํต๋๋ค.
์๋ฅผ ๋ค๋ฉด ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
.grid-item {
content-visibility: auto;
}
์ด๋ ๊ฒ ํ๋ฉด ๋ธ๋ผ์ฐ์ ์ `.grid-item`์ ์ฝํ ์ธ ๊ฐ ๋ณด๊ธฐ๋ก ์คํฌ๋กค๋ ๋๊น์ง ๋ ๋๋ง์ ๊ฑด๋๋ฐ๋๋ก ์ง์ํฉ๋๋ค.
5. ๋ธ๋ผ์ฐ์ ๊ฐ๋ฐ์ ๋๊ตฌ ํ์ฉ
์ต์ ๋ธ๋ผ์ฐ์ ๊ฐ๋ฐ์ ๋๊ตฌ๋ CSS Grid ํธ๋ ํฌ๊ธฐ ์ ์ฝ ์กฐ๊ฑด ํด๊ฒฐ์ฌ๊ฐ ์๋ํ๋ ๋ฐฉ์์ ๋ํ ์ ์ฉํ ํต์ฐฐ๋ ฅ์ ์ ๊ณตํฉ๋๋ค. ์ด๋ฌํ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ๊ทธ๋ฆฌ๋ ํธ๋์ ์ต์ข ํฌ๊ธฐ๋ฅผ ๊ฒ์ฌํ๊ณ ์ฑ๋ฅ ๋ณ๋ชฉ ํ์์ ์๋ณํ๊ณ ๋ ์ด์์ ๋ฌธ์ ๋ฅผ ๋๋ฒ๊น ํ ์ ์์ต๋๋ค.
ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ ํธํ์ฑ
CSS Grid ๋ ์ด์์์ Chrome, Firefox, Safari ๋ฐ Edge๋ฅผ ํฌํจํ ๋ชจ๋ ์ฃผ์ ๋ธ๋ผ์ฐ์ ์์ ์ง์๋๋ฏ๋ก ๋ฐ์ด๋ ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ ํธํ์ฑ์ ์ ๊ณตํฉ๋๋ค. ๊ทธ๋ฌ๋ ๊ทธ๋ฆฌ๋ ๋ ์ด์์์ด ์ฌ๋ฐ๋ฅด๊ฒ ํ์๋๋์ง ํ์ธํ๊ธฐ ์ํด ๋ค์ํ ๋ธ๋ผ์ฐ์ ์์ ํ ์คํธํ๋ ๊ฒ์ด ์ข์ต๋๋ค. BrowserStack ๋๋ CrossBrowserTesting๊ณผ ๊ฐ์ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ์ค์ ์ฅ์น ๋ฐ ๋ธ๋ผ์ฐ์ ์์ ํ ์คํธํ์ญ์์ค.
CSS Grid๋ ์ ์ง์๋์ง๋ง ๋ช ๊ฐ์ง ๊ตฌํ ๋ธ๋ผ์ฐ์ (์: Internet Explorer 11)์์๋ ์ ๋์ฌ๊ฐ ํ์ํ๊ฑฐ๋ ์ง์์ด ์ ํ๋ ์ ์์ต๋๋ค. Autoprefixer์ ๊ฐ์ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ CSS ์ฝ๋์ ๊ณต๊ธ์ ์ฒด ์ ๋์ฌ๋ฅผ ์๋์ผ๋ก ์ถ๊ฐํ๋ ๊ฒ์ด ์ข์ต๋๋ค.
์ ๊ทผ์ฑ ๊ณ ๋ ค ์ฌํญ
๊ทธ๋ฆฌ๋ ๋ ์ด์์์ ๋์์ธํ ๋๋ ์ ๊ทผ์ฑ์ ๊ณ ๋ คํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. ํค๋ณด๋ ์ปจํธ๋กค์ ์ฌ์ฉํ์ฌ ๋ ์ด์์์ ํ์ํ ์ ์๋์ง ํ์ธํ๊ณ ์ฝํ ์ธ ๊ฐ ๋ ผ๋ฆฌ์ ์ธ ์์๋ก ๊ตฌ์ฑ๋์ด ์๋์ง ํ์ธํ์ญ์์ค. ์๋ฏธ ์ฒด๊ณ HTML ์์๋ฅผ ์ฌ์ฉํ์ฌ ์ฝํ ์ธ ์ ๊ตฌ์กฐ์ ์๋ฏธ๋ฅผ ์ ๊ณตํ์ญ์์ค.
๋ํ ์ฅ์ ๊ฐ ์๋ ์ฌ์ฉ์์ ์๊ตฌ ์ฌํญ์ ๊ณ ๋ คํ์ญ์์ค. ์ด๋ฏธ์ง์ ๋ํ ๋์ฒด ํ ์คํธ๋ฅผ ์ ๊ณตํ๊ณ ์ถฉ๋ถํ ์์ ๋๋น๋ฅผ ์ฌ์ฉํ๊ณ ๋ ์ด์์์ด ๋ฐ์์ ์ด๊ณ ๋ค์ํ ํ๋ฉด ํฌ๊ธฐ ๋ฐ ์ฅ์น์ ์ ์ํ ์ ์๋์ง ํ์ธํ์ญ์์ค. WAVE(์น ์ ๊ทผ์ฑ ํ๊ฐ ๋๊ตฌ)์ ๊ฐ์ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ๋ฉด ์ ๊ทผ์ฑ ๋ฌธ์ ๋ฅผ ์๋ณํ๊ณ ํด๊ฒฐํ๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค.
๊ธ๋ก๋ฒ ๋์์ ์ํ ๋ชจ๋ฒ ์ฌ๋ก
๊ธ๋ก๋ฒ ๋์์ ์ํด ๋์์ธํ ๋๋ ๋ค์ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ์ผ๋์ ๋์ญ์์ค.
- ์๋ ๋จ์ ์ฌ์ฉ:
px์ ๊ฐ์ ๊ณ ์ ๋จ์ ๋์em,rem๋ฐ ๋ฐฑ๋ถ์จ๊ณผ ๊ฐ์ ์๋ ๋จ์๋ฅผ ์ฌ์ฉํ์ญ์์ค. ์ด๋ ๊ฒ ํ๋ฉด ๋ ์ด์์์ ํฌ๊ธฐ๋ฅผ ์กฐ์ ํ๊ณ ๋ค์ํ ํ๋ฉด ํฌ๊ธฐ ๋ฐ ํด์๋์ ๋ง๊ฒ ์กฐ์ ํ ์ ์์ต๋๋ค. - ๋ค์ํ ์ฐ๊ธฐ ๋ชจ๋ ๊ณ ๋ ค: ๋ค์ํ ์ฐ๊ธฐ ๋ชจ๋(์: ์ผ์ชฝ์์ ์ค๋ฅธ์ชฝ, ์ค๋ฅธ์ชฝ์์ ์ผ์ชฝ)๋ฅผ ์ธ์ํ๊ณ ๋ ์ด์์์ด ๋ชจ๋ ์ฐ๊ธฐ ๋ชจ๋์์ ์ฌ๋ฐ๋ฅด๊ฒ ํ์๋๋์ง ํ์ธํ์ญ์์ค. CSS Grid๋ ์ด๋ฅผ ๋๋ถ๋ถ ์๋์ผ๋ก ์ฒ๋ฆฌํฉ๋๋ค.
- ์ฝํ ์ธ ํ์งํ: ์ฝํ ์ธ ๋ฅผ ๋ค์ํ ์ธ์ด๋ก ๋ฒ์ญํ๊ณ ๋ค์ํ ๋ฌธํ์ ๋งฅ๋ฝ์ ๋ง๊ฒ ์กฐ์ ํ์ญ์์ค.
- ๋ค์ํ ์ฅ์น ๋ฐ ๋ธ๋ผ์ฐ์ ์์ ๋ ์ด์์ ํ ์คํธ: ๋ ์ด์์์ด ์ฌ๋ฐ๋ฅด๊ฒ ํ์๋๊ณ ์ ๋๋ก ์๋ํ๋์ง ํ์ธํ๊ธฐ ์ํด ๋ค์ํ ์ฅ์น ๋ฐ ๋ธ๋ผ์ฐ์ ์์ ๋ ์ด์์์ ํ ์คํธํ์ญ์์ค.
- ๋ค์ํ ์๊ฐ๋ ๋ฐ ํตํ ๊ณ ๋ ค: ๋ ์ง, ์๊ฐ ๋ฐ ํตํ๋ฅผ ํ์ํ ๋๋ ์ ์ ํ ํ์ ์ง์ ๋ฐ ํ์งํ๋ฅผ ์ฌ์ฉํ์ญ์์ค.
- ๋ค์ํ ์ ๋ ฅ ๋ฐฉ๋ฒ ๋์์ธ: ํค๋ณด๋, ๋ง์ฐ์ค, ํฐ์น ๋๋ ์์ฑ๊ณผ ๊ฐ์ ๋ค์ํ ์ ๋ ฅ ๋ฐฉ๋ฒ์ ์ฌ์ฉํ๋ ์ฌ์ฉ์๋ฅผ ๊ณ ๋ คํ์ญ์์ค.
๊ฒฐ๋ก
CSS Grid ํธ๋ ํฌ๊ธฐ ์ ์ฝ ์กฐ๊ฑด ํด๊ฒฐ์ฌ๋ ๊ฐ๋ฐ์๊ฐ ๋ณต์กํ๊ณ ๋ฐ์ํ ์น ๋ ์ด์์์ ์ฝ๊ฒ ๋ง๋ค ์ ์๋๋ก ํ๋ ๊ฐ๋ ฅํ ์๊ณ ๋ฆฌ์ฆ์ ๋๋ค. ํด๊ฒฐ์ฌ์ ์๋ ๋ฐฉ์์ ์ดํดํ๋ฉด ์ฑ๋ฅ, ์ ๊ทผ์ฑ ๋ฐ ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ ํธํ์ฑ์ ์ํด ๊ทธ๋ฆฌ๋ ๋ ์ด์์์ ์ต์ ํํ ์ ์์ต๋๋ค. ๊ธ๋ก๋ฒ ๋์์ ์ํด ๋์์ธํ ๋๋ ๋ ์ด์์์ด ์ฌ๋ฐ๋ฅด๊ฒ ํ์๋๊ณ ๋ชจ๋ ์ฌ์ฉ์๊ฐ ์ก์ธ์คํ ์ ์๋๋ก ๋ค์ํ ์ฐ๊ธฐ ๋ชจ๋, ํ์งํ ๋ฐ ๊ธฐํ ๋ฌธํ์ ์์๋ฅผ ๊ณ ๋ คํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. ๋ฐ์ํ ๋์์ธ ์์น๊ณผ ๊ฒฐํฉ๋ CSS Grid๋ ์ ์ฐํ๊ณ ์ ๊ทผ ๊ฐ๋ฅํ ์น ๊ฒฝํ์ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค.
CSS Grid์ ํ์ ๋ฐ์๋ค์ด๋ฉด ๋ค์ํ ๊ธ๋ก๋ฒ ๋์์ ์ํ ๋ฉ์ง๊ณ ์ฌ์ฉ์ ์นํ์ ์ธ ์น ๋์์ธ์ ๋ง๋๋ ์๋ก์ด ๊ฐ๋ฅ์ฑ์ ์ด ์ ์์ต๋๋ค.