CSS ์ปจํ ์ด๋ ์ฟผ๋ฆฌ๋ก ๋ฐ์ํ ๋์์ธ์ ํ์ ๋ฐํํ์ธ์! ๋ทฐํฌํธ๊ฐ ์๋ ์ปจํ ์ด๋ ํฌ๊ธฐ์ ๋ฐ์ํ๋ ์ง์ ํ ์ ์ํ ์ปดํฌ๋ํธ ์ ์๋ฒ์ ๋ฐฐ์๋ณด์ธ์.
CSS ์ปจํ ์ด๋ ์ฟผ๋ฆฌ ๋ง์คํฐํ๊ธฐ: ์ปจํ ์ด๋ ์ฐจ์ ์ฟผ๋ฆฌ
๋์์์ด ์งํํ๋ ์น ๊ฐ๋ฐ ํ๊ฒฝ์์ ์ง์ ์ผ๋ก ๋ฐ์์ ์ด๊ณ ์ ์์ฑ์ด ๋ฐ์ด๋ ๋์์ธ์ ๋ง๋๋ ๊ฒ์ ๋งค์ฐ ์ค์ํฉ๋๋ค. ๊ธฐ์กด์ ๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ ๋ฐ์ํ ๋ ์ด์์์ ์ด์ ์ญํ ์ ํด์์ง๋ง, ๋ณธ์ง์ ์ผ๋ก ๋ธ๋ผ์ฐ์ ์ฐฝ์ธ ๋ทฐํฌํธ(viewport)์ ๋ฌถ์ฌ ์์ต๋๋ค. ์ด๋ ์์๋ค์ด ๋ถ๋ชจ ์ปจํ ์ด๋์ ์ด๋ป๊ฒ ๋ง์ถฐ์ง๋์ง์ ์๊ด์์ด ํ๋ฉด ํฌ๊ธฐ์ ๋ฐ๋ผ ๋ณ๊ฒฝ๋๋ค๋ ๊ฒ์ ์๋ฏธํฉ๋๋ค. ๋ฐ๋ก ์ด ์ง์ ์์ CSS ์ปจํ ์ด๋ ์ฟผ๋ฆฌ๊ฐ ๋ฑ์ฅํฉ๋๋ค. ์ด๋ ๊ฐ๋ฐ์๊ฐ ๋ถ๋ชจ ์ปจํ ์ด๋์ ํฌ๊ธฐ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ์์์ ์คํ์ผ์ ์ง์ ํ ์ ์๊ฒ ํด์ฃผ๋ ํ์ ์ ์ธ ์ ๊ทผ ๋ฐฉ์์ ๋๋ค. ์ด๋ฅผ ํตํด ํจ์ฌ ๋ ์ธ๋ฐํ ์ ์ด๊ฐ ๊ฐ๋ฅํ๋ฉฐ, ๋ชจ๋์์ด๊ณ ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ๋ฉฐ ์ง์ ์ผ๋ก ์ ์์ฑ์ด ๋ฐ์ด๋ ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ค ์ ์๋ ํฅ๋ฏธ๋ก์ด ๊ฐ๋ฅ์ฑ์ด ์ด๋ฆฝ๋๋ค. ์ด ๊ฐ์ด๋๋ ์ปจํ ์ด๋ ์ฟผ๋ฆฌ์ ์ธ๊ณ, ํนํ ์ปจํ ์ด๋ ์ฐจ์ ์ฟผ๋ฆฌ(Container Dimension Query)์ ๋ํด ๊น์ด ํ๊ณ ๋ค์ด ์ ์ธ๊ณ ์ฌ์ฉ์๋ฅผ ์ํ ์ญ๋์ ์ด๊ณ ๋ฐ์์ ์ธ ์น ๊ฒฝํ์ ๊ตฌ์ถํ๋ ๋ฐ ํ์ํ ์ง์๊ณผ ๊ธฐ์ ์ ์ ๊ณตํฉ๋๋ค.
์ปจํ ์ด๋ ์ฟผ๋ฆฌ์ ํ์์ฑ ์ดํดํ๊ธฐ
์์ธํ ๋ด์ฉ์ ์ดํด๋ณด๊ธฐ ์ ์, ์ปจํ ์ด๋ ์ฟผ๋ฆฌ๊ฐ ์ ๊ทธํ ๋ก ์ค์ํ์ง ์ดํดํด ๋ด ์๋ค. ์ ํ ์ ๋ณด๋ฅผ ํ์ํ๋ ์นด๋ ์ปดํฌ๋ํธ๊ฐ ์๋ ์๋๋ฆฌ์ค๋ฅผ ์๊ฐํด ๋ณด์ธ์. ๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ฅผ ์ฌ์ฉํ๋ฉด ๋ทฐํฌํธ ๋๋น๋ฅผ ๊ธฐ์ค์ผ๋ก ์ด ์นด๋์ ๋ ์ด์์์ ์กฐ์ ํ ์ ์์ต๋๋ค. ํ์ง๋ง ํ์ด์ง์ ์ฌ๋ฌ ๊ฐ์ ์นด๋๊ฐ ์๊ณ , ๊ฐ ์นด๋๊ฐ ๋ค๋ฅธ ๊ทธ๋ฆฌ๋ ๋ ์ด์์์ด๋ ์ฌ์ฉ์ ์ธํฐํ์ด์ค ์กฐ์ ์ผ๋ก ์ธํด ๋ค๋ฅธ ์ปจํ ์ด๋ ํฌ๊ธฐ๋ฅผ ๊ฐ์ง๋ค๋ฉด ์ด๋จ๊น์? ๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ง์ผ๋ก๋ ์นด๋๊ฐ ์๋ํ ๋๋ก ๋ฐ์ํ์ง ์์ ๋ ์ด์์ ๋ถ์ผ์น์ ์ข์ง ์์ ์ฌ์ฉ์ ๊ฒฝํ์ ์ด๋ํ ์ ์์ต๋๋ค.
์ปจํ ์ด๋ ์ฟผ๋ฆฌ๋ ๋จ์ํ ํ๋ฉด ํฌ๊ธฐ๊ฐ ์๋ ๋ถ๋ชจ ์ปจํ ์ด๋์ ํฌ๊ธฐ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ์นด๋์ ์คํ์ผ์ ์ง์ ํ ์ ์๊ฒ ํจ์ผ๋ก์จ ์ด ๋ฌธ์ ๋ฅผ ํด๊ฒฐํฉ๋๋ค. ์ด๋ ์นด๋๊ฐ ์ฌ์ฉ ๊ฐ๋ฅํ ๊ณต๊ฐ์ ๋ฐ๋ผ ๋ชจ์์ ์กฐ์ ํ ์ ์์์ ์๋ฏธํ๋ฉฐ, ์ฃผ๋ณ ๋ ์ด์์์ ๊ด๊ณ์์ด ์ผ๊ด๋๊ณ ์ต์ ํ๋ ํํ์ ๋ณด์ฅํฉ๋๋ค. ์ด๋ฌํ ์์ค์ ์ ์ด๋ ํนํ ๋ค์๊ณผ ๊ฐ์ ๊ฒฝ์ฐ์ ์ ์ฉํฉ๋๋ค:
- ๋์์ธ ์์คํ : ๋์์ธ ์์คํ ๋ด ๋ค์ํ ์ปจํ ์คํธ์ ์ ์ํ๋ ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ์ปดํฌ๋ํธ ์์ฑ.
- ๋ณต์กํ ๋ ์ด์์: ์์๊ฐ ์ค์ฒฉ๋๊ณ ์ปจํ ์ด๋ ํฌ๊ธฐ๊ฐ ๋ค์ํ ๋ณต์กํ ๋ ์ด์์ ์ฒ๋ฆฌ.
- ๋์ ์ฝํ ์ธ : ์ปดํฌ๋ํธ๊ฐ ๋ค์ํ ์ฝํ ์ธ ๊ธธ์ด์ ๋ง์ถฐ ๋งค๋๋ฝ๊ฒ ์ ์ํ๊ณ ํ์ ๋ณํ์ ๋ณด์ฅ.
์ปจํ ์ด๋ ์ฐจ์ ์ฟผ๋ฆฌ๋ ๋ฌด์์ธ๊ฐ?
์ปจํ ์ด๋ ์ฐจ์ ์ฟผ๋ฆฌ๋ ์ปจํ ์ด๋ ์ฟผ๋ฆฌ ๊ธฐ๋ฅ์ ํต์ฌ์ ๋๋ค. ์ด๋ฅผ ํตํด ์ปจํ ์ด๋ ์์์ ๋๋น์ ๋์ด๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ์ ์ฉ๋๋ CSS ๊ท์น์ ์์ฑํ ์ ์์ต๋๋ค. ๋ฏธ๋์ด ์ฟผ๋ฆฌ์ ๋์ผํ ๋ฐฉ์์ผ๋ก ์ฌ์ฉํ ์ ์์ง๋ง, ๋ทฐํฌํธ ๋์ ์ปจํ ์ด๋๋ฅผ ๋์์ผ๋ก ํฉ๋๋ค.
์ปจํ ์ด๋ ์ฐจ์ ์ฟผ๋ฆฌ๋ฅผ ์ฌ์ฉํ๋ ค๋ฉด ๋จผ์ ์ปจํ ์ด๋ ์์๋ฅผ ์๋ณํด์ผ ํฉ๋๋ค. ๊ทธ๋ฐ ๋ค์ CSS์ `container` ์์ฑ์ ์ฌ์ฉํ์ฌ ํด๋น ์์๋ฅผ ์ปจํ ์ด๋๋ก ์ ์ธํฉ๋๋ค. ์ด๋ฅผ ์ํํ๋ ๋ ๊ฐ์ง ์ฃผ์ ๋ฐฉ๋ฒ์ด ์์ต๋๋ค:
- `container: normal;` (๋๋ `container: auto;`): ์ด๊ฒ์ด ๊ธฐ๋ณธ ๋์์ ๋๋ค. ์ปจํ ์ด๋๋ ์์์ ์ผ๋ก ์ปจํ ์ด๋์ด์ง๋ง, `container-type`๊ณผ ๊ฐ์ ๋จ์ถ ์์ฑ์ ์ฌ์ฉํ์ง ์๋ ํ ์์ ์์์ ์ง์ ์ ์ธ ์ํฅ์ ๋ฏธ์น์ง ์์ต๋๋ค.
- `container: [name];` (๋๋ `container: [name] / [type];`): ์ด๊ฒ์ *์ด๋ฆ์ด ์ง์ ๋* ์ปจํ ์ด๋๋ฅผ ์์ฑํฉ๋๋ค. ์ด๋ ๋ ๋์ ๊ตฌ์ฑ์ ๊ฐ๋ฅํ๊ฒ ํ๋ฉฐ, ํนํ ๋ณต์กํ ํ๋ก์ ํธ ๋ฐ ๋์์ธ ์์คํ ์ ๋ํ ๋ชจ๋ฒ ์ฌ๋ก์ ๋๋ค. 'card-container', 'product-grid' ๋ฑ๊ณผ ๊ฐ์ ์ด๋ฆ์ ์ฌ์ฉํ ์ ์์ต๋๋ค.
์ปจํ ์ด๋๊ฐ ์์ผ๋ฉด `@container` at-rule์ ์ฌ์ฉํ์ฌ ์ฐจ์ ๊ธฐ๋ฐ ๊ท์น์ ์์ฑํ ์ ์์ต๋๋ค. `@container` ๊ท์น ๋ค์์๋ ์คํ์ผ์ด ์ ์ฉ๋์ด์ผ ํ๋ ์กฐ๊ฑด์ ์ง์ ํ๋ ์ฟผ๋ฆฌ๊ฐ ์ต๋๋ค.
๊ตฌ๋ฌธ ๋ฐ ์ฌ์ฉ๋ฒ: ์ค์ ์์
๋ช ๊ฐ์ง ์ค์ ์์ ๋ฅผ ํตํด ๊ตฌ๋ฌธ์ ์ค๋ช ํด ๋ณด๊ฒ ์ต๋๋ค. ์ปจํ ์ด๋์ ๋๋น์ ๋ฐ๋ผ ์กฐ์ ํ๊ณ ์ถ์ ์นด๋ ์ปดํฌ๋ํธ๊ฐ ์๋ค๊ณ ๊ฐ์ ํด ๋ด ์๋ค. ๋จผ์ , ์ปจํ ์ด๋๋ฅผ ์ ์ธํฉ๋๋ค:
.card-container {
container: card;
/* Other styles for the container */
}
๊ทธ๋ฐ ๋ค์, ์นด๋ ์์ ๋ด๋ถ์ ๋ค์๊ณผ ๊ฐ์ด ์์ฑํ ์ ์์ต๋๋ค:
.card {
/* Default styles */
}
@container card (min-width: 300px) {
.card {
/* Styles to apply when the container's width is at least 300px */
}
}
@container card (min-width: 500px) {
.card {
/* Styles to apply when the container's width is at least 500px */
}
}
์ด ์์ ์์:
- `.card-container`๋ฅผ ์ปจํ ์ด๋๋ก ์ ์ธํ๊ณ 'card'๋ผ๋ ์ด๋ฆ์ ๋ถ์ฌํฉ๋๋ค.
- ๊ทธ๋ฐ ๋ค์ `@container` ๊ท์น์ ์ฌ์ฉํ์ฌ ์ปจํ ์ด๋์ ๋๋น์ ๋ฐ๋ผ `.card` ์์์ ๋ค๋ฅธ ์คํ์ผ์ ์ ์ฉํฉ๋๋ค.
- ์ปจํ ์ด๋์ ๋๋น๊ฐ 300px ์ด์์ผ ๋, ์ฒซ ๋ฒ์งธ `@container` ๋ธ๋ก ๋ด์ ์คํ์ผ์ด ์ ์ฉ๋ฉ๋๋ค.
- ์ปจํ ์ด๋์ ๋๋น๊ฐ 500px ์ด์์ผ ๋, ๋ ๋ฒ์งธ `@container` ๋ธ๋ก์ ์คํ์ผ์ด ์ ์ฉ๋์ด ์ด์ ์คํ์ผ์ ๋ฎ์ด์๋๋ค.
์ด๋ฅผ ํตํด ์นด๋๋ ์ฌ์ฉ ๊ฐ๋ฅํ ๊ณต๊ฐ์ ์์ ๋ฐ๋ผ ๋ ์ด์์, ๊ธ๊ผด ํฌ๊ธฐ ๋๋ ๊ธฐํ ์คํ์ผ ์์ฑ์ ๋ณ๊ฒฝํ ์ ์์ต๋๋ค. ์ด๊ฒ์ ์ปดํฌ๋ํธ๊ฐ ์ปจํ ์คํธ์ ๊ด๊ณ์์ด ํญ์ ์ต์์ ๋ชจ์ต์ผ๋ก ๋ณด์ด๋๋ก ๋ณด์ฅํ๋ ๋ฐ ๋งค์ฐ ์ ์ฉํฉ๋๋ค.
์์ : ์ ํ ์นด๋ ์กฐ์ ํ๊ธฐ
๋ ๊ตฌ์ฒด์ ์ธ ์ ํ ์นด๋ ์์ ๋ฅผ ์ดํด๋ณด๊ฒ ์ต๋๋ค. ์ฐ๋ฆฌ๋ ์ฌ์ฉ ๊ฐ๋ฅํ ๊ณต๊ฐ์ ๋ฐ๋ผ ์นด๋๊ฐ ๋ค๋ฅด๊ฒ ํ์๋๊ธฐ๋ฅผ ์ํฉ๋๋ค. ๋ค์์ ๊ธฐ๋ณธ HTML ๊ตฌ์กฐ์ ๋๋ค:
<div class="product-grid">
<div class="product-card-container">
<div class="product-card">
<img src="product-image.jpg" alt="Product Image">
<h3>Product Name</h3>
<p>Product Description...</p>
<button>Add to Cart</button>
</div>
</div>
</div>
๊ทธ๋ฆฌ๊ณ ๋ค์์ ์ปจํ ์ด๋์ ๋๋น์ ๋ฐ๋ผ ์นด๋๊ฐ ์ ์ํ๋๋ก ๋ง๋๋ ์ํ CSS์ ๋๋ค:
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Example of a responsive grid */
gap: 1rem;
}
.product-card-container {
container: card;
}
.product-card {
border: 1px solid #ccc;
padding: 1rem;
border-radius: 8px;
text-align: center;
}
.product-card img {
width: 100%;
height: auto;
margin-bottom: 1rem;
}
@container card (min-width: 350px) {
.product-card {
text-align: left;
display: flex;
align-items: center;
}
.product-card img {
width: 100px;
margin-right: 1rem;
margin-bottom: 0;
}
.product-card h3 {
margin-bottom: 0.5rem;
}
}
@container card (min-width: 600px) {
.product-card {
/* Further adjustments for larger containers */
padding: 1.5rem;
}
}
์ด ์์ ์์ `product-card-container`์ ๋๋น๊ฐ 350px ์ด์์ด ๋๋ฉด ์นด๋ ๋ ์ด์์์ด ๋๋ํ ๋ฐฐ์ด๋๋ ๋ฐฉ์์ผ๋ก ๋ณ๊ฒฝ๋ฉ๋๋ค. ์ปจํ ์ด๋๊ฐ 600px ์ด์์ผ ๋ ์ถ๊ฐ ์คํ์ผ์ ์ ์ฉํ ์ ์์ต๋๋ค.
๊ณ ๊ธ ์ปจํ ์ด๋ ์ฟผ๋ฆฌ ๊ธฐ์
`container-type` ์ฌ์ฉํ๊ธฐ
`container-type` ์์ฑ์ ์ฌ์ฉํ๋ฉด ์ปจํ ์ด๋๊ฐ ํฌ๊ธฐ ๋ณ๊ฒฝ์ *์ด๋ป๊ฒ* ์ถ์ ํ ์ง ์ง์ ํ ์ ์์ต๋๋ค. ์ด๊ฒ์ ์ฑ๋ฅ์ ์ํ ์ค์ํ ์ต์ ํ ๊ธฐ์ ์ ๋๋ค. ์ฃผ์ ๊ฐ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- `container-type: normal;` (๋๋ `auto`): ๊ธฐ๋ณธ๊ฐ์ ๋๋ค. ์ปจํ ์ด๋๋ `container-type: size;`์ ๊ฐ์ ๋จ์ถ ์์ฑ์ ์ฌ์ฉํ์ง ์๋ ํ ์์ ์์์ ์ด๋ ํ ์ ํ๋ ๊ฐํ์ง ์์ต๋๋ค.
- `container-type: size;` : ์ปจํ ์ด๋์ ํฌ๊ธฐ๊ฐ ํ๋ฐํ๊ฒ ์ถ์ ๋์ด ๋ธ๋ผ์ฐ์ ๊ฐ ์ฟผ๋ฆฌ๋ฅผ ์ต์ ํํ๊ณ ๋ณ๊ฒฝ ์ฌํญ์ ๊ฐ์งํ ์ ์์ต๋๋ค. ์ด ์ค์ ์ ํ์ฑ ๋ฆฌ์ค๋์ด๋ฏ๋ก ์ฐจ์ ๊ธฐ๋ฐ ์ฟผ๋ฆฌ์ ๋ํด ์ต์์ ์ฑ๋ฅ์ ์ ๊ณตํ๋ ๊ฒฝ์ฐ๊ฐ ๋ง์ต๋๋ค.
- `container-type: inline-size;` : `size`์ ์ ์ฌํ์ง๋ง ์ธ๋ผ์ธ ํฌ๊ธฐ ์ฐจ์๋ง ์ถ์ ๋ฉ๋๋ค(์ผ๋ฐ์ ์ผ๋ก ๊ฐ๋ก ์ฐ๊ธฐ ๋ชจ๋์์๋ ๋๋น).
์ปจํ ์ด๋ ์ฐจ์ ์ฟผ๋ฆฌ๋ฅผ ์ฌ์ฉํ ๋, ํนํ ์์ฃผ ์ ๋ฐ์ดํธ๋๋ ์ฝํ ์ธ ์์๋ `container-type: size;`๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ด ์ผ๋ฐ์ ์ผ๋ก ๋ชจ๋ฒ ์ฌ๋ก์ ๋๋ค.
.product-card-container {
container: card;
container-type: size; /* Optimize for dimension queries */
}
๋ค๋ฅธ CSS ๊ธฐ๋ฅ๊ณผ ์ปจํ ์ด๋ ์ฟผ๋ฆฌ ๊ฒฐํฉํ๊ธฐ
์ปจํ ์ด๋ ์ฟผ๋ฆฌ๋ ์ฌ์ฉ์ ์ ์ ์์ฑ(CSS ๋ณ์), `calc()`, CSS ๊ทธ๋ฆฌ๋/ํ๋ ์ค๋ฐ์ค์ ๊ฐ์ ๋ค๋ฅธ CSS ๊ธฐ๋ฅ๊ณผ ๊ฒฐํฉํ ๋ ํจ์ฌ ๋ ์ญ๋์ ์ด๊ณ ์ ์ฐํ ๋์์ธ์ ๋ง๋๋ ๋ฐ ๋งค์ฐ ๊ฐ๋ ฅํฉ๋๋ค.
์ฌ์ฉ์ ์ ์ ์์ฑ: ์ฌ์ฉ์ ์ ์ ์์ฑ์ ์ฌ์ฉํ์ฌ ์ปจํ ์ด๋ ํฌ๊ธฐ์ ๋ฐ๋ผ ๋ณ๊ฒฝ๋๋ ๊ฐ์ ์ ์ํ ์ ์์ต๋๋ค. ์ด๋ ํจ์ฌ ๋ ๋ณต์กํ๊ณ ๋์ ์ธ ์คํ์ผ๋ง์ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค.
.card-container {
container: card;
}
.card {
--card-padding: 1rem;
padding: var(--card-padding);
}
@container card (min-width: 400px) {
.card {
--card-padding: 1.5rem;
}
}
`calc()`: `calc()`๋ฅผ ์ฌ์ฉํ์ฌ ์ปจํ ์ด๋ ํฌ๊ธฐ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ๊ฐ์ ๊ณ์ฐํ ์ ์์ต๋๋ค.
.card-container {
container: card;
}
.card {
width: calc(100% - 20px); /* Example: A width that is less than the container */
}
@container card (min-width: 500px) {
.card {
width: calc(50% - 20px);
}
}
CSS ๊ทธ๋ฆฌ๋/ํ๋ ์ค๋ฐ์ค: ์ด๋ฌํ ๊ฐ๋ ฅํ ๋ ์ด์์ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ์ปจํ ์ด๋ ๋ด์์ ์ ์ํ ๋ ์ด์์์ ๋ง๋์ธ์.
.product-card-container {
container: card;
display: flex;
flex-direction: column;
}
@container card (min-width: 500px) {
.product-card-container {
flex-direction: row;
}
}
์ปจํ ์ด๋ ์ฐจ์ ์ฟผ๋ฆฌ ์ฌ์ฉ์ ์ํ ๋ชจ๋ฒ ์ฌ๋ก
์ปจํ ์ด๋ ์ฟผ๋ฆฌ๋ฅผ ํจ๊ณผ์ ์ผ๋ก ํ์ฉํ๋ ค๋ฉด ๋ค์ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ๊ณ ๋ คํ์ญ์์ค:
- ๋ช ํํ ์ปจํ ์ด๋ ๊ฒฝ๊ณ ์ ์: ์ปจํ ์ด๋ ์์๋ฅผ ๋ช ํํ๊ฒ ์ ์ํ์ญ์์ค. ์ ์ํด์ผ ํ ์ปดํฌ๋ํธ๋ฅผ ์ ๊ฐ์ธ๋๋ก ํ์ธ์.
- ์๋ฏธ ์๋ ์ปจํ ์ด๋ ์ด๋ฆ ์ฌ์ฉ: ๋ ๋ณต์กํ ํ๋ก์ ํธ์ ๊ฒฝ์ฐ, ์ปจํ ์ด๋์ ์ค๋ช ์ ์ธ ์ด๋ฆ์ ์ฌ์ฉํ์ธ์(์: 'product-card-container', 'feature-section-container'). ์ด๋ ์ฝ๋ ๊ฐ๋ ์ฑ๊ณผ ์ ์ง๋ณด์์ฑ์ ํฅ์์ํต๋๋ค.
- `container-type: size;`๋ก ์ต์ ํ: ์ฐจ์ ์ฟผ๋ฆฌ๋ฅผ ์ฌ์ฉํ ๋ `container-type: size;`๋ฅผ ์ฌ์ฉํ์ฌ ํนํ ๋์ ์ฝํ ์ธ ์ํฉ์์ ์ฑ๋ฅ์ ํฅ์์ํค์ธ์.
- ์๊ฒ ์์ํ๊ณ ๋ฐ๋ณตํ๊ธฐ: ๊ฐ๋จํ ์ปจํ ์ด๋ ์ฟผ๋ฆฌ๋ก ์์ํ์ฌ ํ์์ ๋ฐ๋ผ ์ ์ง์ ์ผ๋ก ๋ณต์ก์ฑ์ ์ถ๊ฐํ์ธ์. ๋ค์ํ ์ปจํ ์ด๋ ํฌ๊ธฐ์์ ์ปดํฌ๋ํธ๋ฅผ ์ฒ ์ ํ ํ ์คํธํ์ธ์.
- ์ ๊ทผ์ฑ ๊ณ ๋ ค: ๋ค์ํ ํ๋ฉด ํฌ๊ธฐ ๋ฐ ์ฅ์น์์ ๋์์ธ์ด ์ ๊ทผ์ฑ์ ์ ์งํ๋๋ก ํ์ธ์. ์๋ ๋จ์(์: `rem`, `em`, ๋ฐฑ๋ถ์จ)๋ฅผ ์ฌ์ฉํ๊ณ ๋ณด์กฐ ๊ธฐ์ ๋ก ํ ์คํธํ์ธ์.
- ์ปดํฌ๋ํธ ์ฐ์ ์ฌ๊ณ : ์ปดํฌ๋ํธ๊ฐ ์ต๋ํ ๋ ๋ฆฝ์ ์ด๊ณ ์ ์ ๊ฐ๋ฅํ๋๋ก ์ค๊ณํ์ธ์. ์ปจํ ์ด๋ ์ฟผ๋ฆฌ๋ ์ด๋ฌํ ์ ๊ทผ ๋ฐฉ์์ ์๋ฒฝํฉ๋๋ค.
- ๊ฐ๋ ์ฑ ์ฐ์ : ๊นจ๋ํ๊ณ ์ ์ฃผ์ ์ฒ๋ฆฌ๋ CSS๋ฅผ ์์ฑํ์ฌ ํนํ ์ปดํฌ๋ํธ ๋ด์์ ์ฌ๋ฌ ์ปจํ ์ด๋ ์ฟผ๋ฆฌ๋ฅผ ์ฌ์ฉํ ๋ ์ฝ๋๋ฅผ ๋ ์ฝ๊ฒ ์ดํดํ๊ณ ์ ์ง ๊ด๋ฆฌํ ์ ์๋๋ก ํ์ธ์.
์ ๊ทผ์ฑ ๊ณ ๋ ค์ฌํญ
์ ๊ทผ์ฑ์ ํฌ์ฉ์ ์ธ ์น ๊ฒฝํ์ ๋ง๋๋ ๋ฐ ๋งค์ฐ ์ค์ํฉ๋๋ค. ์ปจํ ์ด๋ ์ฟผ๋ฆฌ๋ฅผ ๊ตฌํํ ๋ ์ ๊ทผ์ฑ์ ์ผ๋์ ๋์ญ์์ค:
- ์๋งจํฑ HTML: ์๋งจํฑ HTML ์์๋ฅผ ์ฌ์ฉํ์ฌ ์ฝํ ์ธ ๋ฅผ ๋ ผ๋ฆฌ์ ์ผ๋ก ๊ตฌ์กฐํํ์ธ์.
- ์์ ๋๋น: ํนํ ๋ ์ด์์์ด ๋ณ๊ฒฝ๋ ๋ ํ ์คํธ์ ๋ฐฐ๊ฒฝ์ ๊ฐ์ ์ถฉ๋ถํ ์์ ๋๋น๋ฅผ ๋ณด์ฅํ์ธ์. ์์ ๋๋น ๊ฒ์ฌ๊ธฐ๋ฅผ ์ฌ์ฉํ์ฌ ํ์ธํ๋ ๊ฒ์ ๊ณ ๋ คํ์ญ์์ค.
- ํ ์คํธ ํฌ๊ธฐ ์กฐ์ : ์ฌ์ฉ์๊ฐ ๋ธ๋ผ์ฐ์ ์ค์ ์์ ํ ์คํธ ํฌ๊ธฐ๋ฅผ ๋๋ฆด ๋ ๋ ์ด์์์ด ์ ์ํ๋์ง ํ์ธํ์ธ์. ๊ธ๊ผด ํฌ๊ธฐ์๋ ์๋ ๋จ์(์: `rem`, `em`)๋ฅผ ์ฌ์ฉํ์ธ์.
- ์คํฌ๋ฆฐ ๋ฆฌ๋ ํธํ์ฑ: ์คํฌ๋ฆฐ ๋ฆฌ๋๋ก ์ปดํฌ๋ํธ๋ฅผ ํ ์คํธํ์ฌ ์ฝํ ์ธ ๊ฐ ๋ ผ๋ฆฌ์ ์ผ๋ก ์ ๊ณต๋๊ณ ์ํธ ์์ฉ ์์์ ์ ๊ทผํ ์ ์๋์ง ํ์ธํ์ธ์.
- ํค๋ณด๋ ํ์: ๋ชจ๋ ์ํธ ์์ฉ ์์๊ฐ ํค๋ณด๋ ํ์์ ํตํด ์ ๊ทผํ๊ณ ์กฐ์๋ ์ ์๋์ง ํ์ธํ์ธ์.
- ๋์ฒด ํ ์คํธ: ๋ชจ๋ ์ด๋ฏธ์ง, ํนํ ์๋ฏธ ์๋ ์ ๋ณด๋ฅผ ์ ๋ฌํ๋ ์ด๋ฏธ์ง์ ๋ํด ์ค๋ช ์ ์ธ ๋์ฒด ํ ์คํธ๋ฅผ ์ ๊ณตํ์ธ์.
์ด๋ฌํ ์ ๊ทผ์ฑ ์์น์ ๊ณ ๋ คํจ์ผ๋ก์จ, ์ปจํ ์ด๋ ์ฟผ๋ฆฌ๋ก ๊ตฌ๋๋๋ ๋์์ธ์ด ๋ฅ๋ ฅ์ด๋ ์ฅ์ ์ ๊ด๊ณ์์ด ๋ชจ๋ ์ฌ๋์ด ํฌ์ฉํ๊ณ ์ฌ์ฉํ ์ ์๋๋ก ๋ณด์ฅํ ์ ์์ต๋๋ค.
๊ตญ์ ํ ๋ฐ ํ์งํ
์ ์ธ๊ณ ์ฌ์ฉ์๋ฅผ ๋์์ผ๋ก ๋์์ธํ ๋ ๊ตญ์ ํ(i18n) ๋ฐ ํ์งํ(l10n)๋ฅผ ๊ณ ๋ คํด์ผ ํฉ๋๋ค. ์ปจํ ์ด๋ ์ฟผ๋ฆฌ๋ ์ฌ๊ธฐ์ ์ญํ ์ ํ ์ ์์ต๋๋ค:
- ํ ์คํธ ๋ฐฉํฅ: ์ปจํ ์ด๋์ `dir` ์์ฑ์ ์ฌ์ฉํ๊ฑฐ๋ `writing-mode` CSS ์์ฑ์ ์ฌ์ฉํ์ฌ ๋ค์ํ ํ ์คํธ ๋ฐฉํฅ(์: ์ผ์ชฝ์์ ์ค๋ฅธ์ชฝ, ์ค๋ฅธ์ชฝ์์ ์ผ์ชฝ)์ ์ฒ๋ฆฌํ์ธ์. ๊ทธ๋ฐ ๋ค์ ์ปจํ ์ด๋ ์ฟผ๋ฆฌ๋ `dir` ์์ฑ์ ๊ธฐ๋ฐ์ผ๋ก ๋ ์ด์์์ ์กฐ์ ํ ์ ์์ต๋๋ค.
- ์ธ์ด๋ณ ์คํ์ผ: ์ปจํ ์ด๋ ์ฟผ๋ฆฌ์ ํจ๊ป CSS ์์ฑ ์ ํ์(์: `[lang="ar"]`)๋ฅผ ์ฌ์ฉํ์ฌ ์ปดํฌ๋ํธ์ ์ธ์ด๋ณ ์คํ์ผ์ ์ ์ฉํ์ธ์.
- ํตํ ๋ฐ ์ซ์ ์์: ์ฌ์ฉ์์ ๋ก์บ์ ๋ฐ๋ผ ํตํ์ ์ซ์๊ฐ ์ฌ๋ฐ๋ฅด๊ฒ ํ์๋๋์ง ํ์ธํ์ธ์. ์ด๋ ์ข ์ข ์๋ฒ ์ธก ์ฒ๋ฆฌ๋ฅผ ํฌํจํ์ง๋ง, ์ปจํ ์ด๋ ์ฟผ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ฌ ๋ค์ํ ์ฝํ ์ธ ๊ธธ์ด์ ์ ์ํ๋๋ก ๋ ์ด์์์ ์ค๊ณํ ์ ์์ต๋๋ค.
์ปจํ ์ด๋ ์ฐจ์ ์ฟผ๋ฆฌ์ ์ด์
์ปจํ ์ด๋ ์ฐจ์ ์ฟผ๋ฆฌ๋ ๊ธฐ์กด ๋ฏธ๋์ด ์ฟผ๋ฆฌ์ ๋นํด ์๋ง์ ์ด์ ์ ์ ๊ณตํ์ฌ ๋ ์ ์ฐํ๊ณ ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ๋ฉฐ ์ ์ง ๊ด๋ฆฌํ๊ธฐ ์ฌ์ด ์น ๋์์ธ์ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค:
- ํฅ์๋ ์ฌ์ฌ์ฉ์ฑ: ์ปจํ ์ด๋ ์ฟผ๋ฆฌ๋ฅผ ์ฌ์ฉํ๋ฉด ๋ค์ํ ์ปจํ ์คํธ์ ๋งค๋๋ฝ๊ฒ ์ ์ํ๋ ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ค ์ ์์ต๋๋ค. ์ด๋ ๋์์ธ ์์คํ ๋ฐ ์ปดํฌ๋ํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ํ์์ ์ ๋๋ค.
- ํฅ์๋ ์ ์ง๋ณด์์ฑ: ์คํ์ผ๋ง ๋ก์ง์ ์ปดํฌ๋ํธ ๋ด์ ์บก์ํํจ์ผ๋ก์จ ์ปจํ ์ด๋ ์ฟผ๋ฆฌ๋ CSS๋ฅผ ๋ ์ฒด๊ณ์ ์ด๊ณ ์ ์ง ๊ด๋ฆฌํ๊ธฐ ์ฝ๊ฒ ๋ง๋ญ๋๋ค.
- ์ธ๋ฐํ ์ ์ด: ์ปจํ ์ด๋ ์ฟผ๋ฆฌ๋ ์์ ์คํ์ผ ์ง์ ๋ฐฉ๋ฒ์ ๋ํด ํจ์ฌ ๋ ์ธ๋ฐํ ์ ์ด ์์ค์ ์ ๊ณตํ์ฌ ๊ณ ๋๋ก ๋ง์ถคํ๋๊ณ ์ ์์ฑ์ด ๋ฐ์ด๋ ๋์์ธ์ ๋ง๋ค ์ ์๋๋ก ํฉ๋๋ค.
- ์ฝ๋ ์ค๋ณต ๊ฐ์: ์ปจํ ์ด๋ ์ฟผ๋ฆฌ๋ ์ปดํฌ๋ํธ๊ฐ ๊ฐ ํ๋ฉด ํฌ๊ธฐ์ ๋ํด ๋ณ๋์ ์คํ์ผ๋ง ์์ด ์ปจํ ์คํธ์ ์ ์ํ ์ ์๊ฒ ํจ์ผ๋ก์จ ์ฝ๋ ์ค๋ณต์ ์ค์ผ ์ ์์ต๋๋ค.
- ๋ ๋์ ์ฑ๋ฅ: ๋ทฐํฌํธ๊ฐ ์๋ ์ปจํ ์ด๋ ํฌ๊ธฐ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ์คํ์ผ์ ์ง์ ํจ์ผ๋ก์จ ์ปจํ ์ด๋ ์ฟผ๋ฆฌ๋ ์ปดํฌ๋ํธ๊ฐ ๋ค๋ฅธ ํ๋ฉด ํฌ๊ธฐ์ ๋ํด ์์ ํ ๋ค์ ์คํ์ผ๋ง๋ ํ์๊ฐ ์์ผ๋ฏ๋ก ์ข ์ข ๋ ๋์ ์ฑ๋ฅ์ผ๋ก ์ด์ด์ง ์ ์์ต๋๋ค.
- ๋ฏธ๋ ๋๋น: ์ปจํ ์ด๋ ์ฟผ๋ฆฌ๋ ๋น๊ต์ ์๋ก์ด ๊ธฐ์ ์ด์ง๋ง ๋น ๋ฅด๊ฒ ์ฑํ๋๊ณ ์์ผ๋ฉฐ, ์ด๋ ์น ๊ฐ๋ฐ์ ๋ฏธ๋์ ์์ด ๊ฐ๋ ฅํ๊ณ ์ค์ํ ๋ถ๋ถ์์ ๋ํ๋ ๋๋ค. ๋ธ๋ผ์ฐ์ ๊ฐ ๊ณ์ํด์ ์ง์์ ๊ฐ์ ํจ์ ๋ฐ๋ผ ํจ์ฌ ๋ ํฐ ๊ฐ๋ฅ์ฑ์ด ๋ํ๋ ๊ฒ์ ๋๋ค.
๋ธ๋ผ์ฐ์ ์ง์ ๋ฐ ์ปจํ ์ด๋ ์ฟผ๋ฆฌ์ ๋ฏธ๋
์ปจํ ์ด๋ ์ฟผ๋ฆฌ๋ ํ๋ฅญํ ๋ธ๋ผ์ฐ์ ์ง์์ ๋ฐ๊ณ ์์ต๋๋ค. ํฌ๋กฌ, ํ์ด์ดํญ์ค, ์ฌํ๋ฆฌ, ์ฃ์ง๋ฅผ ํฌํจํ ์ต์ ๋ธ๋ผ์ฐ์ ๋ค์ ์ปจํ ์ด๋ ์ฟผ๋ฆฌ๋ฅผ ์์ ํ ์ง์ํฉ๋๋ค. CanIUse.com๊ณผ ๊ฐ์ ๋ฆฌ์์ค์์ ํน์ ํธํ์ฑ์ ํ์ธํ์ฌ ๋ธ๋ผ์ฐ์ ์ง์์ ๋ํ ์ต์ ์ ๋ณด๋ฅผ ์ป์ ์ ์์ต๋๋ค.
์ปจํ ์ด๋ ์ฟผ๋ฆฌ์ ๋ฏธ๋๋ ๋ฐ์ต๋๋ค. ์น ๊ฐ๋ฐ์๋ค์ด ์ด ๊ฐ๋ ฅํ ๊ธฐ๋ฅ์ ๋ ์ต์ํด์ง์ ๋ฐ๋ผ ํจ์ฌ ๋ ํ์ ์ ์ด๊ณ ์ ๊ตํ ๋์์ธ์ด ๋ฑ์ฅํ ๊ฒ์ผ๋ก ๊ธฐ๋ํ ์ ์์ต๋๋ค. ๋ธ๋ผ์ฐ์ ์ง์์ ๊ฐ ์ ๋ฐ์ดํธ๋ง๋ค ๊ฐ์ ๋ ๊ฒ์ผ๋ก ์์๋๋ฉฐ, ์ปจํ ์ด๋ ์ฟผ๋ฆฌ์ ์ถ๊ฐ ํ์ฅ์ด ์์๋์ด ๋ ํํ๋ ฅ ์๊ณ ์ ์์ฑ ์๋ ๊ธฐ๋ฅ์ ์ฝ์ํฉ๋๋ค. ์ปจํ ์ด๋ ์ฟผ๋ฆฌ๋ ๋ฐ์ํ ๋์์ธ ๊ดํ์ ํ์ค ๋ถ๋ถ์ด ๋ ์ค๋น๊ฐ ๋์ด ์์ผ๋ฏ๋ก CSS ๋ฐ ์น ๊ฐ๋ฐ์ ์งํ๋ฅผ ์ฃผ์ํ์ญ์์ค. CSS ์ํน ๊ทธ๋ฃน ๋ฐ ๊ธฐํ ํ์ค ๊ธฐ๊ตฌ๋ ์ปจํ ์ด๋ ์ฟผ๋ฆฌ์ ๊ธฐ๋ฅ์ ๊ณ์ํด์ ๊ฐ์ ํ๊ณ ํ์ฅํ๊ณ ์์ต๋๋ค.
๊ฒฐ๋ก
CSS ์ปจํ ์ด๋ ์ฟผ๋ฆฌ๋ ์ง์ ์ผ๋ก ๋ฐ์์ ์ด๊ณ ์ ์์ฑ์ด ๋ฐ์ด๋ ์น ๋์์ธ์ ๋ง๋๋ ๋ฐ ์์ด ๊ฒ์ ์ฒด์ธ์ ์ ๋๋ค. ์ปจํ ์ด๋ ์ฐจ์ ์ฟผ๋ฆฌ์ ๊ทธ ์ ์ฉ์ ์ดํดํจ์ผ๋ก์จ ์ปจํ ์ด๋ ํฌ๊ธฐ์ ๋ฐ์ํ๋ ์ปดํฌ๋ํธ๋ฅผ ๊ตฌ์ถํ์ฌ ๋ ์ ์ฐํ๊ณ ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ๋ฉฐ ์ ์ง ๊ด๋ฆฌํ๊ธฐ ์ฌ์ด ๋ ์ด์์์ ๋ง๋ค ์ ์์ต๋๋ค. ๊ณ ๋๋ก ์ ์์ฑ์ด ๋ฐ์ด๋ ์ปดํฌ๋ํธ๋ฅผ ๋ง๋๋ ๋ฅ๋ ฅ์ ๋์์ธ ์์คํ , ๋ณต์กํ ๋ ์ด์์ ๋ฐ ๋ค์ํ ์ปจํ ์คํธ์ ๋งค๋๋ฝ๊ฒ ์ ์ํ๋ ๋์ ์ฝํ ์ธ ํํ์ ์ ์ฌ๋ ฅ์ ์ด์ด์ค๋๋ค. ์ด ๊ธฐ์ ์ ์ฑํํ ๋๋ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ํตํฉํ๊ณ ์ ๊ทผ์ฑ ๋ฐ ๊ตญ์ ํ ๊ณ ๋ ค ์ฌํญ์ ํฌํจํ์ฌ ๋์์ธ์ด ์ ์ธ๊ณ ์ฌ์ฉ์๋ฅผ ์ํด ๊ฒฌ๊ณ ํ๊ณ ์ ๊ทผ ๊ฐ๋ฅํ๋๋ก ๋ณด์ฅํ์ญ์์ค. ์ปจํ ์ด๋ ์ฟผ๋ฆฌ๋ ๋จ์ํ ์๋ก์ด ๊ธฐ๋ฅ์ด ์๋๋ผ, ์ฐ๋ฆฌ๊ฐ ๋ฐ์ํ ๋์์ธ์ ๋ํด ์๊ฐํ๋ ๋ฐฉ์์ ๊ทผ๋ณธ์ ์ธ ๋ณํ๋ฅผ ๋ํ๋ด๋ฉฐ, ๊ฐ๋ฐ์๊ฐ ์ฌ์ฉ์์ ์๊ตฌ์ ๊ทธ๋ค์ด ๋ณด๋ ์ปจํ ์คํธ์ ์ง์ ์ผ๋ก ๋ง์ถฐ์ง ์น ๊ฒฝํ์ ๋ง๋ค ์ ์๋๋ก ํ์ ์ค์ด์ค๋๋ค. ์ด์ ์ง์ ์ผ๋ก ๋ฐ์์ ์ด๊ณ ์ ์์ฑ ์๋ ์น ๊ฒฝํ์ ๊ตฌ์ถํ๋ฌ ๋์๊ฐ์ญ์์ค!