๋ด์ฌ์ ๋ฐ ์ธ์ฌ์ ํค์๋๋ก CSS ๊ทธ๋ฆฌ๋ ํธ๋ ํฌ๊ธฐ ์กฐ์ ์ ํ์ ๋ฐํํด ๋ณด์ธ์. ๋ค์ํ ์ฝํ ์ธ ์ ํ๋ฉด ํฌ๊ธฐ์ ๋ง๋ ์ ์ฐํ๊ณ ๋ฐ์ํ์ธ ๋ ์ด์์์ ๋ง๋๋ ๋ฐฉ๋ฒ์ ๋ฐฐ์๋ณด์ธ์.
CSS ๊ทธ๋ฆฌ๋ ํธ๋ ํฌ๊ธฐ ์กฐ์ : ๋ด์ฌ์ ๋ฐ ์ธ์ฌ์ ์ ์ด ๋ง์คํฐํ๊ธฐ
CSS ๊ทธ๋ฆฌ๋ ๋ ์ด์์์ ๋ณต์กํ๊ณ ๋ฐ์ํ์ธ ์น ๋ ์ด์์์ ๋ง๋๋ ๊ฐ๋ ฅํ ๋๊ตฌ์ ๋๋ค. ๊ทธ ํต์ฌ ๊ฐ์ ์ค ํ๋๋ ์ ์ฐํ ํธ๋ ํฌ๊ธฐ ์กฐ์ ๊ธฐ๋ฅ์ ์์ผ๋ฉฐ, ์ด๋ฅผ ํตํด ํ๊ณผ ์ด์ ํฌ๊ธฐ๋ฅผ ์ ๋ฐํ๊ฒ ์ ์ดํ ์ ์์ต๋๋ค. ๋ค์ํ ํธ๋ ํฌ๊ธฐ ์กฐ์ ํค์๋์ ํจ์๋ฅผ ์ดํดํ๋ ๊ฒ์ ์ ์์ฑ ์๊ณ ์ ์ง๋ณด์ ๊ฐ๋ฅํ ๋ ์ด์์์ ๊ตฌ์ถํ๋ ๋ฐ ๋งค์ฐ ์ค์ํฉ๋๋ค. ์ด ๊ธ์์๋ CSS ๊ทธ๋ฆฌ๋์ ๋ด์ฌ์ (intrinsic) ๋ฐ ์ธ์ฌ์ (extrinsic) ํฌ๊ธฐ ์กฐ์ ์ ๊ณ ๊ธ ๊ฐ๋ ์ ๊น์ด ํ๊ณ ๋ค์ด, ๋ค์ํ ์ฝํ ์ธ ์ ํ๋ฉด ํฌ๊ธฐ์ ์ฐ์ํ๊ฒ ์ ์ํ๋ ๋ ์ด์์์ ๋ง๋๋ ๋ฐฉ๋ฒ์ ํ๊ตฌํฉ๋๋ค.
๊ทธ๋ฆฌ๋ ํธ๋๊ณผ ํฌ๊ธฐ ์กฐ์ ์ดํดํ๊ธฐ
๋ด์ฌ์ ๋ฐ ์ธ์ฌ์ ํฌ๊ธฐ ์กฐ์ ์ ๊ตฌ์ฒด์ ์ธ ๋ด์ฉ์ ์ดํด๋ณด๊ธฐ ์ ์, CSS ๊ทธ๋ฆฌ๋ ํธ๋์ ๊ธฐ๋ณธ ๊ฐ๋ ์ ๋ค์ ํ๋ฒ ์ง์ด๋ณด๊ฒ ์ต๋๋ค.
๊ทธ๋ฆฌ๋ ํธ๋์ด๋?
๊ทธ๋ฆฌ๋ ํธ๋์ ๊ทธ๋ฆฌ๋ ๋ ์ด์์์ ํ๊ณผ ์ด์ ๋๋ค. ๊ทธ๋ฆฌ๋ ํญ๋ชฉ์ด ๋ฐฐ์น๋๋ ๊ตฌ์กฐ๋ฅผ ์ ์ํฉ๋๋ค. ์ด ํธ๋์ ํฌ๊ธฐ๋ ์ ์ฒด ๋ ์ด์์๊ณผ ๊ทธ๋ฆฌ๋ ๋ด ์ฝํ ์ธ ๋ฐฐํฌ ๋ฐฉ์์ ์ง์ ์ ์ธ ์ํฅ์ ๋ฏธ์นฉ๋๋ค.
ํธ๋ ํฌ๊ธฐ ์ง์ ํ๊ธฐ
grid-template-rows์ grid-template-columns ์์ฑ์ ์ฌ์ฉํ์ฌ ํธ๋ ํฌ๊ธฐ๋ฅผ ์ ์ํ ์ ์์ต๋๋ค. ์ด ์์ฑ๋ค์ ๊ณต๋ฐฑ์ผ๋ก ๊ตฌ๋ถ๋ ๊ฐ ๋ชฉ๋ก์ ๋ฐ์ผ๋ฉฐ, ๊ฐ ๊ฐ์ ํด๋น ํธ๋์ ํฌ๊ธฐ๋ฅผ ๋ํ๋
๋๋ค. ์๋ฅผ ๋ค์ด:
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto auto;
}
์ด ์ฝ๋๋ ์ธ ๊ฐ์ ์ด๊ณผ ๋ ๊ฐ์ ํ์ด ์๋ ๊ทธ๋ฆฌ๋๋ฅผ ์์ฑํฉ๋๋ค. ์ฒซ ๋ฒ์งธ์ ์ธ ๋ฒ์งธ ์ด์ ๊ฐ๊ฐ ์ฌ์ฉ ๊ฐ๋ฅํ ๊ณต๊ฐ์ 1 ๋น์จ(fr)์ ์ฐจ์งํ๊ณ , ๋ ๋ฒ์งธ ์ด์ 2 ๋น์จ์ ์ฐจ์งํฉ๋๋ค. ํ์ ์ฝํ
์ธ ์ ๋ฐ๋ผ ์๋์ผ๋ก ํฌ๊ธฐ๊ฐ ์กฐ์ ๋ฉ๋๋ค.
๋ด์ฌ์ ํฌ๊ธฐ ์กฐ์ vs. ์ธ์ฌ์ ํฌ๊ธฐ ์กฐ์
๊ณ ๊ธ ๊ทธ๋ฆฌ๋ ํธ๋ ํฌ๊ธฐ ์กฐ์ ์ ํต์ฌ์ ๋ด์ฌ์ ํฌ๊ธฐ ์กฐ์ ๊ณผ ์ธ์ฌ์ ํฌ๊ธฐ ์กฐ์ ์ ์ฐจ์ด์ ์ ์ดํดํ๋ ๋ฐ ์์ต๋๋ค. ์ด ๊ฐ๋ ๋ค์ ํธ๋์ ํฌ๊ธฐ๊ฐ ์ฝํ ์ธ ์ ์ฌ์ฉ ๊ฐ๋ฅํ ๊ณต๊ฐ์ ๋ฐ๋ผ ์ด๋ป๊ฒ ๊ฒฐ์ ๋๋์ง๋ฅผ ์ ํฉ๋๋ค.
๋ด์ฌ์ ํฌ๊ธฐ ์กฐ์ : ์ฝํ ์ธ ๊ธฐ๋ฐ
๋ด์ฌ์ ํฌ๊ธฐ ์กฐ์ ์ ๊ทธ๋ฆฌ๋ ํธ๋์ ํฌ๊ธฐ๊ฐ ํด๋น ํธ๋์ ๋ฐฐ์น๋ ๊ทธ๋ฆฌ๋ ํญ๋ชฉ ๋ด์ ์ฝํ ์ธ ์ ์ํด ๊ฒฐ์ ๋จ์ ์๋ฏธํฉ๋๋ค. ํธ๋์ ํน์ ํ๋ ๋ด์์ ์ฝํ ์ธ ๋ฅผ ์์ฉํ๊ธฐ ์ํด ํ์ฅ๋๊ฑฐ๋ ์ถ์๋ฉ๋๋ค. ๋ด์ฌ์ ํฌ๊ธฐ ์กฐ์ ํค์๋๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
auto: ๊ธฐ๋ณธ๊ฐ์ ๋๋ค. ํธ๋ ํฌ๊ธฐ๋ ํด๋น ํธ๋์ ์๋ ๊ทธ๋ฆฌ๋ ํญ๋ชฉ๋ค์ ๊ฐ์ฅ ํฐ ์ต์ ํฌ๊ธฐ ๊ธฐ์ฌ๋์ ์ํด ๊ฒฐ์ ๋ฉ๋๋ค. ๋๋ถ๋ถ์ ๊ฒฝ์ฐ, ์ด๋ ํธ๋์ด ๋ชจ๋ ์ฝํ ์ธ ๋ฅผ ๋์น์ง ์๊ณ เธเธญเธเธตํ๊ฒ ๋ง๋ค ๋งํผ ์ปค์ง๋ค๋ ๊ฒ์ ์๋ฏธํ์ง๋ง, ๊ทธ๋ฆฌ๋ ํญ๋ชฉ์ ์ค์ ๋min-width/min-height๊ฐ์ ์ํฅ์ ๋ฐ์ ์ ์์ต๋๋ค.min-content: ํธ๋์ ์ฝํ ์ธ ๊ฐ ๋์น์ง ์๊ณ ํ์ํ ์ต์ํ์ ๊ณต๊ฐ์ ๋ง์ถฐ ํฌ๊ธฐ๊ฐ ์กฐ์ ๋ฉ๋๋ค. ์๋ฅผ ๋ค์ด, ํ ์คํธ๋ ๋จ์ด๋ฅผ ์ด์ํ๊ฒ ์๋ฅด๋๋ผ๋ ๊ฐ๋ฅํ ๊ฐ์ฅ ์์ ์ง์ ์์ ์ค ๋ฐ๊ฟ๋ฉ๋๋ค.max-content: ํธ๋์ ์ฝํ ์ธ ๊ฐ ๋์น์ง ์๊ณ ํ์ํ ์ต๋ํ์ ๊ณต๊ฐ์ ๋ง์ถฐ ํฌ๊ธฐ๊ฐ ์กฐ์ ๋ฉ๋๋ค. ํ ์คํธ์ ๊ฒฝ์ฐ, ์ด๋ ๊ฐ๋ฅํ ํ ์ค ๋ฐ๊ฟ์ ํผํ๋ ค๊ณ ํ๋ฏ๋ก ๋งค์ฐ ๋๊ฑฐ๋ ๋์ ํธ๋์ด ๋ ์ ์์ต๋๋ค.fit-content(length): ํธ๋์max-content์ ์ง์ ๋length์ค ๋ ์์ ๊ฐ์ผ๋ก ํฌ๊ธฐ๊ฐ ์กฐ์ ๋ฉ๋๋ค. ์ด๋ฅผ ํตํด ํธ๋์ ์ต๋ ํฌ๊ธฐ๋ฅผ ์ค์ ํ๋ฉด์๋ ์ฝํ ์ธ ์ ๋ฐ๋ผ ์ถ์๋ ์ ์๋๋ก ํ ์ ์์ต๋๋ค.
์์ : `min-content`์ `max-content`๋ฅผ ์ฌ์ฉํ ๋ด์ฌ์ ํฌ๊ธฐ ์กฐ์
๋ ๊ฐ์ ์ด์ด ์๋ ์๋๋ฆฌ์ค๋ฅผ ์๊ฐํด ๋ด
์๋ค. ์ฒซ ๋ฒ์งธ ์ด์ min-content๋ก, ๋ ๋ฒ์งธ ์ด์ max-content๋ก ํฌ๊ธฐ๊ฐ ์กฐ์ ๋ฉ๋๋ค. ์ฒซ ๋ฒ์งธ ์ด์ ์ฝํ
์ธ ๊ฐ ๊ธด ๋จ์ด๋ผ๋ฉด, ์ต์ ์ฝํ
์ธ ํฌ๊ธฐ์ ๋ง์ถ๊ธฐ ์ํด ๊ฐ๋ฅํ ๋ชจ๋ ์ง์ ์์ ์๋ฆด ๊ฒ์
๋๋ค. ๊ทธ๋ฌ๋ ๋ ๋ฒ์งธ ์ด์ ์ค ๋ฐ๊ฟ ์์ด ์ฝํ
์ธ ๋ฅผ ์์ฉํ๊ธฐ ์ํด ํ์ฅ๋ ๊ฒ์
๋๋ค.
.grid-container {
display: grid;
grid-template-columns: min-content max-content;
grid-gap: 10px;
}
.item1 {
grid-column: 1;
}
.item2 {
grid-column: 2;
}
<div class="grid-container">
<div class="item1">Supercalifragilisticexpialidocious</div>
<div class="item2">Short text</div>
</div>
์ด ์์ ์์ "Supercalifragilisticexpialidocious"๋ผ๋ ๋จ์ด๋ ์ฒซ ๋ฒ์งธ ์ด์์ ์ฌ๋ฌ ์ค๋ก ๋๋๋ ๋ฐ๋ฉด, "Short text"๋ ๋ ๋ฒ์งธ ์ด์์ ํ ์ค์ ์ ์ง๋ฉ๋๋ค. ์ด๊ฒ์ ๋ด์ฌ์ ํฌ๊ธฐ ์กฐ์ ์ด ์ฝํ ์ธ ์ ๊ณ ์ ํ ํฌ๊ธฐ ์๊ตฌ์ฌํญ์ ์ด๋ป๊ฒ ์ ์ํ๋์ง๋ฅผ ๋ณด์ฌ์ค๋๋ค.
์์ : `fit-content()`๋ฅผ ์ฌ์ฉํ ๋ด์ฌ์ ํฌ๊ธฐ ์กฐ์
`fit-content()` ํจ์๋ ํธ๋์ด ์ฝํ ์ธ ํฌ๊ธฐ์ ๋ง์ถฐ์ง๋ฉด์๋ ์ต๋ ํฌ๊ธฐ ์ ํ์ ๋๊ณ ์ถ์ ๋ ์ ์ฉํฉ๋๋ค. ์ด๋ฅผ ์ฌ์ฉํ์ฌ ์ด์ด๋ ํ์ด ๋๋ฌด ์ปค์ง๋ ๊ฒ์ ๋ฐฉ์งํ๋ฉด์๋ ์ฝํ ์ธ ๊ฐ ์์ผ๋ฉด ์ถ์๋๋๋ก ํ ์ ์์ต๋๋ค.
.grid-container {
display: grid;
grid-template-columns: fit-content(200px) 1fr;
grid-gap: 10px;
}
์ด ์์ ์์ ์ฒซ ๋ฒ์งธ ์ด์ ์ฝํ ์ธ ์ ๋ง๊ฒ ํ์ฅ๋์ง๋ง ๋๋น๊ฐ 200px๋ฅผ ์ด๊ณผํ์ง ์์ต๋๋ค. ๋ ๋ฒ์งธ ์ด์ ๋จ์ ๊ณต๊ฐ์ ์ฐจ์งํฉ๋๋ค. ์ด๋ ์ด์ ์ ์ฐํ๊ฒ ๋ง๋ค๋ฉด์๋ ๋๋ฌด ๋ง์ ๊ณต๊ฐ์ ์ฐจ์งํ์ง ์๋๋ก ํ๊ณ ์ถ์ ๋ ์ ์ฉํฉ๋๋ค.
์ธ์ฌ์ ํฌ๊ธฐ ์กฐ์ : ๊ณต๊ฐ ๊ธฐ๋ฐ
๋ฐ๋ฉด์ ์ธ์ฌ์ ํฌ๊ธฐ ์กฐ์ ์ ๊ทธ๋ฆฌ๋ ํธ๋์ ํฌ๊ธฐ๊ฐ ๊ทธ๋ฆฌ๋ ์ปจํ ์ด๋์ ์ฌ์ฉ ๊ฐ๋ฅํ ๊ณต๊ฐ์ด๋ ๊ณ ์ ๋ ํฌ๊ธฐ ๊ฐ๊ณผ ๊ฐ์ ์ฝํ ์ธ ์ธ๋ถ์ ์์ธ์ ์ํด ๊ฒฐ์ ๋จ์ ์๋ฏธํฉ๋๋ค. ์ธ์ฌ์ ํฌ๊ธฐ ์กฐ์ ํค์๋๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
length: ๊ณ ์ ๋ ๊ธธ์ด ๊ฐ (์:100px,2em,50vh). ํธ๋์ ์ฝํ ์ธ ์ ์๊ด์์ด ์ ํํ ์ด ํฌ๊ธฐ๊ฐ ๋ฉ๋๋ค.percentage: ๊ทธ๋ฆฌ๋ ์ปจํ ์ด๋ ํฌ๊ธฐ์ ๋ฐฑ๋ถ์จ (์:50%). ํธ๋์ ์ฌ์ฉ ๊ฐ๋ฅํ ๊ณต๊ฐ์ ์ด ๋ฐฑ๋ถ์จ๋งํผ ์ฐจ์งํฉ๋๋ค.fr(๋ถ์ ๋จ์): ๋ค๋ฅธ ๋ชจ๋ ํธ๋์ ํฌ๊ธฐ๊ฐ ์กฐ์ ๋ ํ ๊ทธ๋ฆฌ๋ ์ปจํ ์ด๋์์ ์ฌ์ฉ ๊ฐ๋ฅํ ๊ณต๊ฐ์ ์ผ๋ถ๋ฅผ ๋ํ๋ ๋๋ค. ์ด๊ฒ์ ํธ๋ ๊ฐ์ ๊ณต๊ฐ์ ๋ถ๋ฐฐํ๋ ๊ฐ์ฅ ์ ์ฐํ ๋ฐฉ๋ฒ์ ๋๋ค.
์์ : `fr` ๋จ์๋ฅผ ์ฌ์ฉํ ์ธ์ฌ์ ํฌ๊ธฐ ์กฐ์
fr ๋จ์๋ ๋ค์ํ ํ๋ฉด ํฌ๊ธฐ์ ์ ์ํ๋ ๋ฐ์ํ ๋ ์ด์์์ ๋ง๋๋ ๋ฐ ๋งค์ฐ ์ค์ํฉ๋๋ค. ํธ๋์ ๋ถ์ ๋จ์๋ฅผ ํ ๋นํจ์ผ๋ก์จ ์ฌ์ฉ ๊ฐ๋ฅํ ๊ณต๊ฐ์ ๋น๋ก์ ์ผ๋ก ๊ณต์ ํ๋๋ก ๋ณด์ฅํ ์ ์์ต๋๋ค.
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr;
grid-gap: 10px;
}
์ด ์์ ์์ ๊ทธ๋ฆฌ๋ ์ปจํ ์ด๋์๋ ๋ ๊ฐ์ ์ด์ด ์์ต๋๋ค. ์ฒซ ๋ฒ์งธ ์ด์ ์ฌ์ฉ ๊ฐ๋ฅํ ๊ณต๊ฐ์ 1 ๋น์จ์ ์ฐจ์งํ๊ณ , ๋ ๋ฒ์งธ ์ด์ 2 ๋น์จ์ ์ฐจ์งํฉ๋๋ค. ๊ทธ๋ฆฌ๋ ์ปจํ ์ด๋์ ๋๋น๊ฐ 600px๋ผ๋ฉด, ์ฒซ ๋ฒ์งธ ์ด์ 200px ๋๋น๊ฐ ๋๊ณ ๋ ๋ฒ์งธ ์ด์ 400px ๋๋น๊ฐ ๋ฉ๋๋ค(๊ทธ๋ฆฌ๋ ๊ฐ๊ฒฉ ์ ์ธ). ์ด๋ฅผ ํตํด ํ๋ฉด ํฌ๊ธฐ์ ๊ด๊ณ์์ด ์ด์ด ํญ์ ๋น๋ก ๊ด๊ณ๋ฅผ ์ ์งํ๋๋ก ๋ณด์ฅํฉ๋๋ค.
์์ : ๋ฐฑ๋ถ์จ๊ณผ ๊ณ ์ ๊ธธ์ด๋ฅผ ์ฌ์ฉํ ์ธ์ฌ์ ํฌ๊ธฐ ์กฐ์
.grid-container {
display: grid;
grid-template-columns: 200px 50% 1fr;
grid-gap: 10px;
}
์ด ์์ ์์ ์ฒซ ๋ฒ์งธ ์ด์ `200px`์ ๊ณ ์ ๋๋น๋ก ์ค์ ๋ฉ๋๋ค. ๋ ๋ฒ์งธ ์ด์ ๊ทธ๋ฆฌ๋ ์ปจํ ์ด๋ ๋๋น์ 50%๋ฅผ ์ฐจ์งํฉ๋๋ค. ๋ง์ง๋ง์ผ๋ก, ์ธ ๋ฒ์งธ ์ด์ `1fr` ๋จ์๋ฅผ ์ฌ์ฉํ๋ฏ๋ก ์ฒ์ ๋ ์ด์ ํฌ๊ธฐ๊ฐ ์กฐ์ ๋ ํ ๋จ์ ๊ณต๊ฐ์ ๋ชจ๋ ์ฐจ์งํ๊ฒ ๋ฉ๋๋ค.
๋ด์ฌ์ ๋ฐ ์ธ์ฌ์ ํฌ๊ธฐ ์กฐ์ ๊ฒฐํฉํ๊ธฐ: `minmax()`
minmax() ํจ์๋ฅผ ์ฌ์ฉํ๋ฉด ๋ด์ฌ์ ๋ฐ ์ธ์ฌ์ ํฌ๊ธฐ ์กฐ์ ์ ๊ฒฐํฉํ์ฌ ํธ๋ ํฌ๊ธฐ๋ฅผ ๋์ฑ ์ ๋ฐํ๊ฒ ์ ์ดํ ์ ์์ต๋๋ค. ์ด ํจ์๋ ์ต์๊ฐ๊ณผ ์ต๋๊ฐ์ ๋ชจ๋ ์ง์ ํ์ฌ ํธ๋์ ํ์ฉ๋๋ ํฌ๊ธฐ ๋ฒ์๋ฅผ ์ ์ํฉ๋๋ค.
minmax(min, max)
min: ํธ๋์ ์ต์ ํฌ๊ธฐ์ ๋๋ค. ์ด๋ ๋ด์ฌ์ ํค์๋(auto,min-content,max-content) ๋๋ ์ธ์ฌ์ ๊ฐ(length,percentage,fr)์ ํฌํจํ ๋ชจ๋ ์ ํจํ ํธ๋ ํฌ๊ธฐ ์กฐ์ ๊ฐ์ด ๋ ์ ์์ต๋๋ค.max: ํธ๋์ ์ต๋ ํฌ๊ธฐ์ ๋๋ค. ์ด ๋ํ ๋ชจ๋ ์ ํจํ ํธ๋ ํฌ๊ธฐ ์กฐ์ ๊ฐ์ด ๋ ์ ์์ต๋๋ค. `max`๊ฐ `min`๋ณด๋ค ์์ผ๋ฉด `max`๋ ๋ฌด์๋๊ณ `min`์ด ์ฌ์ฉ๋ฉ๋๋ค.
์์ : `minmax()`๋ฅผ ์ฌ์ฉํ์ฌ ๋ฐ์ํ ์ด ๋ง๋ค๊ธฐ
minmax()์ ์ผ๋ฐ์ ์ธ ์ฌ์ฉ ์ฌ๋ก๋ ์ต์ ๋๋น๋ฅผ ๊ฐ์ง๋ฉด์๋ ์ฌ์ฉ ๊ฐ๋ฅํ ๊ณต๊ฐ์ ์ฑ์ฐ๊ธฐ ์ํด ํ์ฅ๋ ์ ์๋ ๋ฐ์ํ ์ด์ ๋ง๋๋ ๊ฒ์
๋๋ค.
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 10px;
}
์ฌ๊ธฐ์ repeat(auto-fit, minmax(200px, 1fr))๋ ์ต์ 200px ๋๋น๋ฅผ ๊ฐ์ง๋ฉด์ ๋จ์ ๊ณต๊ฐ์ ์ฑ์ฐ๊ธฐ ์ํด ํ์ฅ๋ ์ ์๋ ์ด์ ๊ฐ๋ฅํ ํ ๋ง์ด ์์ฑํฉ๋๋ค. auto-fit ํค์๋๋ ๋น ์ด์ด ์ถ์๋๋๋ก ํ์ฌ ์ ์ฐํ๊ณ ๋ฐ์ํ์ธ ๋ ์ด์์์ ๋ง๋ญ๋๋ค.
์์ : `minmax()`์ ๋ด์ฌ์ ํฌ๊ธฐ ์กฐ์ ๊ฒฐํฉํ๊ธฐ
.grid-container {
display: grid;
grid-template-columns: minmax(min-content, 300px) 1fr;
grid-gap: 10px;
}
์ด ์์ ์์ ์ฒซ ๋ฒ์งธ ์ด์ ์ต์ ์ฝํ ์ธ ํฌ๊ธฐ๋งํผ์ ๋๋น๋ฅผ ๊ฐ์ง์ง๋ง `300px`๋ฅผ ์ด๊ณผํ์ง ์์ต๋๋ค. ๋ ๋ฒ์งธ ์ด์ ๋จ์ ๊ณต๊ฐ์ ์ฐจ์งํฉ๋๋ค.
์ค์ฉ์ ์ธ ์ ์ฉ ์ฌ๋ก ๋ฐ ๋ชจ๋ฒ ์ฌ๋ก
๋ด์ฌ์ ๋ฐ ์ธ์ฌ์ ํฌ๊ธฐ ์กฐ์ ์ ์ดํดํ๋ ๊ฒ์ ๊ฒฌ๊ณ ํ๊ณ ์ ์์ฑ ์๋ ๋ ์ด์์์ ๋ง๋๋ ๋ฐ ๋งค์ฐ ์ค์ํฉ๋๋ค. ๋ค์์ ์ผ๋์ ๋์ด์ผ ํ ๋ช ๊ฐ์ง ์ค์ฉ์ ์ธ ์ ์ฉ ์ฌ๋ก์ ๋ชจ๋ฒ ์ฌ๋ก์ ๋๋ค:
- ๋ฐ์ํ ๋ด๋น๊ฒ์ด์
:
minmax()๋ฅผ ์ฌ์ฉํ์ฌ ์ต์ ๋๋น๋ฅผ ๊ฐ์ง๋ฉด์๋ ๋ด๋น๊ฒ์ด์ ๋ฐ์ ์ฌ์ฉ ๊ฐ๋ฅํ ๊ณต๊ฐ์ ์ฑ์ฐ๊ธฐ ์ํด ํ์ฅ๋ ์ ์๋ ๋ด๋น๊ฒ์ด์ ํญ๋ชฉ์ ๋ง๋ญ๋๋ค. - ์ ์ฐํ ์นด๋ ๋ ์ด์์:
repeat(auto-fit, minmax())๋ฅผ ์ฌ์ฉํ์ฌ ๋ค์ํ ํ๋ฉด ํฌ๊ธฐ์ ์๋์ผ๋ก ์กฐ์ ๋๋ ์นด๋ ๋ ์ด์์์ ๋ง๋ค์ด ์์ ํ๋ฉด์์ ์นด๋๊ฐ ์ฐ์ํ๊ฒ ์ค ๋ฐ๊ฟ๋๋๋ก ํฉ๋๋ค. - ์ฝํ
์ธ ์ธ์ ์ฌ์ด๋๋ฐ:
min-content๋๋max-content๋ฅผ ์ฌ์ฉํ์ฌ ์ฝํ ์ธ ์ ๋ฐ๋ผ ์ฌ์ด๋๋ฐ ํฌ๊ธฐ๋ฅผ ์กฐ์ ํ์ฌ ํ์์ ๋ฐ๋ผ ํ์ฅ๋๊ฑฐ๋ ์ถ์๋๋๋ก ํฉ๋๋ค. - ๊ณ ์ ๋๋น ํผํ๊ธฐ: ๋ค์ํ ํ๋ฉด ํฌ๊ธฐ์ ์ฌ์ฉ์ ์ ํธ๋์ ์ ์ํ๋ ๋ ์ด์์์ ๋ง๋ค๊ธฐ ์ํด ๊ณ ์ ๋๋น(
px) ์ฌ์ฉ์ ์ต์ํํ๊ณ ์๋ ๋จ์(%,fr,em)๋ฅผ ์ ํธํฉ๋๋ค. - ์ฒ ์ ํ ํ ์คํธ: ํญ์ ๋ค์ํ ๊ธฐ๊ธฐ์ ํ๋ฉด ํฌ๊ธฐ์์ ๊ทธ๋ฆฌ๋ ๋ ์ด์์์ ํ ์คํธํ์ฌ ์ฌ๋ฐ๋ฅด๊ฒ ๋ ๋๋ง๋๊ณ ์ผ๊ด๋ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ๋์ง ํ์ธํฉ๋๋ค.
๊ณ ๊ธ ๊ทธ๋ฆฌ๋ ํฌ๊ธฐ ์กฐ์ ๊ธฐ์
๊ธฐ๋ณธ์ ์ธ ํค์๋์ ํจ์ ์ธ์๋ CSS ๊ทธ๋ฆฌ๋๋ ํธ๋ ํฌ๊ธฐ๋ฅผ ๋ฏธ์ธ ์กฐ์ ํ๊ธฐ ์ํ ๋ ๊ณ ๊ธ ๊ธฐ์ ์ ์ ๊ณตํฉ๋๋ค.
`repeat()` ํจ์
repeat() ํจ์๋ ๋์ผํ ํฌ๊ธฐ์ ์ฌ๋ฌ ํธ๋ ์์ฑ์ ๋จ์ํํฉ๋๋ค. ๋ฐ๋ณต ํ์์ ํธ๋ ํฌ๊ธฐ, ๋ ๊ฐ์ ์ธ์๋ฅผ ๋ฐ์ต๋๋ค.
repeat(number, track-size)
์๋ฅผ ๋ค์ด:
grid-template-columns: repeat(3, 1fr);
์ด๊ฒ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
grid-template-columns: 1fr 1fr 1fr;
repeat() ํจ์๋ auto-fit ๋ฐ auto-fill ํค์๋์ ํจ๊ป ์ฌ์ฉํ์ฌ ์ฌ์ฉ ๊ฐ๋ฅํ ๊ณต๊ฐ์ ์๋์ผ๋ก ์กฐ์ ๋๋ ๋ฐ์ํ ๊ทธ๋ฆฌ๋ ๋ ์ด์์์ ๋ง๋ค ์๋ ์์ต๋๋ค.
`auto-fit` ๋ฐ `auto-fill` ํค์๋
์ด ํค์๋๋ค์ repeat() ํจ์์ ํจ๊ป ์ฌ์ฉ๋์ด ๊ทธ๋ฆฌ๋์ ํญ๋ชฉ ์์ ์ฌ์ฉ ๊ฐ๋ฅํ ๊ณต๊ฐ์ ์ ์ํ๋ ๋ฐ์ํ ๊ทธ๋ฆฌ๋๋ฅผ ๋ง๋ญ๋๋ค. ๋ ์ฌ์ด์ ์ฃผ์ ์ฐจ์ด์ ์ ๋น ํธ๋์ ์ฒ๋ฆฌํ๋ ๋ฐฉ์์ ์์ต๋๋ค.
auto-fit: ๋ชจ๋ ํธ๋์ด ๋น์ด ์์ผ๋ฉด ํธ๋์ 0 ๋๋น๋ก ์ถ์๋ฉ๋๋ค.auto-fill: ๋ชจ๋ ํธ๋์ด ๋น์ด ์์ด๋ ํธ๋์ ํฌ๊ธฐ๋ฅผ ์ ์งํฉ๋๋ค.
์์ : `auto-fit`์ ์ฌ์ฉํ์ฌ ๋ฐ์ํ ์ด ๋ง๋ค๊ธฐ
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 10px;
}
์ด ์์ ์์ ๊ทธ๋ฆฌ๋๋ ์ต์ 200px ๋๋น๋ฅผ ๊ฐ์ง๋ฉด์ ๋จ์ ๊ณต๊ฐ์ ์ฑ์ฐ๊ธฐ ์ํด ํ์ฅ๋ ์ ์๋ ์ด์ ๊ฐ๋ฅํ ํ ๋ง์ด ์์ฑํฉ๋๋ค. ๋ชจ๋ ์ด์ ์ฑ์ธ ๋งํผ ํญ๋ชฉ์ด ์ถฉ๋ถํ์ง ์์ผ๋ฉด ๋น ์ด์ 0 ๋๋น๋ก ์ถ์๋ฉ๋๋ค.
๊ตญ์ ํ(i18n) ๋ฐ ํ์งํ(l10n) ๊ณ ๋ ค ์ฌํญ
์ ์ธ๊ณ ์ฌ์ฉ์๋ฅผ ์ํ ๋ ์ด์์์ ๋์์ธํ ๋, ๋ค์ํ ์ธ์ด์ ์ฐ๊ธฐ ๋ฐฉํฅ์ ์ํฅ์ ๊ณ ๋ คํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. ํ ์คํธ ๊ธธ์ด๋ ์ธ์ด๋ง๋ค ํฌ๊ฒ ๋ค๋ฅผ ์ ์์ผ๋ฉฐ, ํธ๋ ํฌ๊ธฐ๊ฐ ์ ์ ํ๊ฒ ๊ตฌ์ฑ๋์ง ์์ผ๋ฉด ๋ ์ด์์์ ์ํฅ์ ๋ฏธ์น ์ ์์ต๋๋ค. ๊ตญ์ ํ๋ ๋ ์ด์์์ ๋์์ธํ๊ธฐ ์ํ ๋ช ๊ฐ์ง ํ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- ์๋ ๋จ์ ์ฌ์ฉ: ํฝ์
๊ณผ ๊ฐ์ ๊ณ ์ ๋จ์ ๋์
em,rem, ๋ฐฑ๋ถ์จ๊ณผ ๊ฐ์ ์๋ ๋จ์๋ฅผ ์ ํธํ์ฌ ์ฌ์ฉ์์ ๊ธ๊ผด ํฌ๊ธฐ ์ค์ ์ ๋ฐ๋ผ ํ ์คํธ๊ฐ ํ์ฅ๋ ์ ์๋๋ก ํฉ๋๋ค. - ๋ด์ฌ์ ํฌ๊ธฐ ์กฐ์ :
min-content,max-content,fit-content()์ ๊ฐ์ ๋ด์ฌ์ ํฌ๊ธฐ ์กฐ์ ํค์๋๋ฅผ ํ์ฉํ์ฌ ์ธ์ด์ ๊ด๊ณ์์ด ํธ๋์ด ์ฝํ ์ธ ์ ํฌ๊ธฐ์ ์ ์ํ๋๋ก ํฉ๋๋ค. - ๋
ผ๋ฆฌ์ ์์ฑ ์ฌ์ฉ:
left,right์ ๊ฐ์ ๋ฌผ๋ฆฌ์ ์์ฑ ๋์inline-start,inline-end์ ๊ฐ์ ๋ ผ๋ฆฌ์ ์์ฑ์ ์ฌ์ฉํ์ฌ ์ผ์ชฝ์์ ์ค๋ฅธ์ชฝ(LTR) ๋ฐ ์ค๋ฅธ์ชฝ์์ ์ผ์ชฝ(RTL) ์ธ์ด๋ฅผ ๋ชจ๋ ์ง์ํฉ๋๋ค. - ํ ์คํธ: ๋ค์ํ ์ธ์ด์ ์ฐ๊ธฐ ๋ฐฉํฅ์ผ๋ก ๋ ์ด์์์ ํ ์คํธํ์ฌ ์ ์ฌ์ ์ธ ๋ฌธ์ ๋ฅผ ์๋ณํ๊ณ ํด๊ฒฐํฉ๋๋ค. ๋ค๋ฅธ ์ธ์ด์์ ๋ฐ๊ฒฌ๋ ์ ์๋ ๋ ๊ธด ๋ฌธ์์ด์ ์๋ฎฌ๋ ์ด์ ํฉ๋๋ค.
๊ฒฐ๋ก
CSS ๊ทธ๋ฆฌ๋ ํธ๋ ํฌ๊ธฐ ์กฐ์ ์ ๋ฐ์ํ์ด๊ณ ์ ์์ฑ ์๋ ์น ๋ ์ด์์์ ๋ง๋๋ ๊ฐ๋ ฅํ๊ณ ๋ค์ฌ๋ค๋ฅํ ๋๊ตฌ์
๋๋ค. ๋ด์ฌ์ ๋ฐ ์ธ์ฌ์ ํฌ๊ธฐ ์กฐ์ ์ ๊ฐ๋
์ ๋ง์คํฐํ๊ณ , minmax() ํจ์๋ฅผ ์ดํดํ๊ณ , repeat() ํจ์๋ฅผ ํ์ฉํจ์ผ๋ก์จ ๋ค์ํ ์ฝํ
์ธ ์ ํ๋ฉด ํฌ๊ธฐ์ ์ฐ์ํ๊ฒ ์ ์ํ๋ ๋ ์ด์์์ ๊ตฌ์ถํ ์ ์์ต๋๋ค. ์ ์ธ๊ณ ์ฌ์ฉ์๋ฅผ ์ํด ๋์์ธํ ๋๋ ๊ตญ์ ํ์ ํ์งํ์ ์ํฅ์ ๊ณ ๋ คํ๋ ๊ฒ์ ์์ง ๋ง์ธ์.
๋ค์ํ ํธ๋ ํฌ๊ธฐ ์กฐ์ ๊ธฐ์ ์ ์คํํ๊ณ CSS ๊ทธ๋ฆฌ๋์ ๋ฌดํํ ๊ฐ๋ฅ์ฑ์ ํ์ํด ๋ณด์ธ์. ์ฐ์ต๊ณผ ์ด๋ฌํ ๊ฐ๋ ์ ๋ํ ํ์คํ ์ดํด๋ฅผ ํตํด ๋ชจ๋ ํ๋ก์ ํธ์ ๋ํด ์ ๊ตํ๊ณ ์ฌ์ฉ์ ์นํ์ ์ธ ์น ๋ ์ด์์์ ๋ง๋ค ์ ์๋ ์ถฉ๋ถํ ์ค๋น๋ฅผ ๊ฐ์ถ๊ฒ ๋ ๊ฒ์ ๋๋ค.