CSS ์ปจํ ์ด๋ ์ฟผ๋ฆฌ๋ฅผ ๋ง์คํฐํ์ฌ ์ง์ ํ ๋ฐ์ํ ์น ๋์์ธ์ ๊ตฌํํ์ธ์. ๋ทฐํฌํธ๊ฐ ์๋ ์ปจํ ์ด๋ ํฌ๊ธฐ์ ๋ฐ๋ผ ๋ ์ด์์์ ์กฐ์ ํ์ฌ ๋ชจ๋ ๊ธฐ๊ธฐ์์ ๋งค๋๋ฌ์ด ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ๋ ๋ฐฉ๋ฒ์ ๋ฐฐ์๋ณด์ธ์.
๋ฐ์ํ ๋์์ธ์ ์๋ก์ด ๊ฐ๋ฅ์ฑ: CSS ์ปจํ ์ด๋ ์ฟผ๋ฆฌ ์๋ฒฝ ๊ฐ์ด๋
์๋ ๊ฐ ๋ฐ์ํ ์น ๋์์ธ์ ์ฃผ๋ก ๋ฏธ๋์ด ์ฟผ๋ฆฌ์ ์์กดํ์ฌ ์น์ฌ์ดํธ๊ฐ ๋ทฐํฌํธ์ ๋๋น์ ๋์ด์ ๋ฐ๋ผ ๋ ์ด์์๊ณผ ์คํ์ผ์ ์กฐ์ ํ ์ ์๋๋ก ํ์ต๋๋ค. ์ด ์ ๊ทผ ๋ฐฉ์์ ํจ๊ณผ์ ์ด์ง๋ง, ์ ์ฒด ํ๋ฉด ํฌ๊ธฐ์๋ ๋ ๋ฆฝ์ ์ผ๋ก ์ ์ํด์ผ ํ๋ ๋ณต์กํ ์ปดํฌ๋ํธ๋ฅผ ๋ค๋ฃฐ ๋ ๋๋๋ก ์ ํ์ ์ผ๋ก ๋๊ปด์ง ์ ์์ต๋๋ค. ์ด๋ ๋ฑ์ฅํ ๊ฒ์ด ๋ฐ๋ก CSS ์ปจํ ์ด๋ ์ฟผ๋ฆฌ์ ๋๋ค โ ์ด ๊ฐ๋ ฅํ ์ ๋๊ตฌ๋ ์์๊ฐ ๋ทฐํฌํธ ์์ฒด๊ฐ ์๋, ์์ ์ ํฌํจํ๋ ์ปจํ ์ด๋ ์์์ ํฌ๊ธฐ์ ๋ฐ์ํ๋๋ก ํฉ๋๋ค. ์ด๋ ๋ฐ์ํ ๋์์ธ์์ ์๋ก์ด ์ฐจ์์ ์ ์ฐ์ฑ๊ณผ ์ ๋ฐ์ฑ์ ์ด์ด์ค๋๋ค.
CSS ์ปจํ ์ด๋ ์ฟผ๋ฆฌ๋ ๋ฌด์์ธ๊ฐ?
CSS ์ปจํ ์ด๋ ์ฟผ๋ฆฌ๋ ๋ถ๋ชจ ์ปจํ ์ด๋์ ํฌ๊ธฐ๋ ๋ค๋ฅธ ํน์ฑ์ ๋ฐ๋ผ ์์์ ์คํ์ผ์ ์ ์ฉํ ์ ์๊ฒ ํด์ฃผ๋ CSS ๊ธฐ๋ฅ์ ๋๋ค. ๋ทฐํฌํธ๋ฅผ ๋์์ผ๋ก ํ๋ ๋ฏธ๋์ด ์ฟผ๋ฆฌ์ ๋ฌ๋ฆฌ, ์ปจํ ์ด๋ ์ฟผ๋ฆฌ๋ ํน์ ์์๋ฅผ ๋์์ผ๋ก ํฉ๋๋ค. ์ด ๋๋ถ์ ํ๋ฉด ํฌ๊ธฐ์ ์๊ด์์ด ์ปดํฌ๋ํธ๊ฐ ์ปจํ ์ด๋ ๋ด์์ ์ฌ์ฉ ๊ฐ๋ฅํ ๊ณต๊ฐ์ ๋ฐ๋ผ ์คํ์ผ์ ์กฐ์ ํ๋ ๊ฒ์ด ๊ฐ๋ฅํด์ง๋๋ค.
์ข์ ์ฌ์ด๋๋ฐ์ ๋ฐฐ์น๋ ๋์ ๋์ ๋ฉ์ธ ์ฝํ ์ธ ์์ญ์ ๋ฐฐ์น๋ ๋ ๋ค๋ฅด๊ฒ ํ์๋๋ ์นด๋ ์ปดํฌ๋ํธ๋ฅผ ์์ํด ๋ณด์ธ์. ๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ฅผ ์ฌ์ฉํ๋ฉด ํ๋ฉด ํฌ๊ธฐ์ ๋ฐ๋ผ ์นด๋์ ์คํ์ผ์ ์กฐ์ ํด์ผ ํ๋ฏ๋ก ์ผ๊ด์ฑ์ด ๋จ์ด์ง ์ ์์ต๋๋ค. ์ปจํ ์ด๋ ์ฟผ๋ฆฌ๋ฅผ ์ฌ์ฉํ๋ฉด ์นด๋์ ์ปจํ ์ด๋๊ฐ ํน์ ๋๋น์ ๋๋ฌํ์ ๋ ํน๋ณํ ์ ์ฉ๋๋ ์คํ์ผ์ ์ ์ํ ์ ์์ด, ๋ค์ํ ๋ ์ด์์์์ ์ผ๊ด๋๊ณ ๋ฐ์์ ์ธ ๊ฒฝํ์ ๋ณด์ฅํ ์ ์์ต๋๋ค.
์ ์ปจํ ์ด๋ ์ฟผ๋ฆฌ๋ฅผ ์ฌ์ฉํด์ผ ํ๋๊ฐ?
์ปจํ ์ด๋ ์ฟผ๋ฆฌ๋ ๊ธฐ์กด์ ๋ฏธ๋์ด ์ฟผ๋ฆฌ์ ๋นํด ์ฌ๋ฌ ๊ฐ์ง ์ด์ ์ ์ ๊ณตํฉ๋๋ค:
- ์ปดํฌ๋ํธ ๊ธฐ๋ฐ ๋ฐ์์ฑ: ์ปจํ ์ด๋ ์ฟผ๋ฆฌ๋ ์ง์ ํ ์ปดํฌ๋ํธ ๊ธฐ๋ฐ ๋ฐ์์ฑ์ ๊ฐ๋ฅํ๊ฒ ํ์ฌ, ๊ฐ๋ณ ์์๊ฐ ์ ์ฒด ํ๋ฉด ํฌ๊ธฐ์ ๋ ๋ฆฝ์ ์ผ๋ก ์คํ์ผ์ ์กฐ์ ํ ์ ์๊ฒ ํฉ๋๋ค. ์ด๋ ๋ ๋ชจ๋ํ๋๊ณ ์ ์ง๋ณด์ํ๊ธฐ ์ฌ์ด ์ฝ๋๋ก ์ด์ด์ง๋๋ค.
- ํฅ์๋ ์ ์ฐ์ฑ: ๋ ๋์ ๋ฒ์์ ์ปจํ ์ด๋ ํฌ๊ธฐ์ ์ ์ํ๋ ๋ ๋ณต์กํ๊ณ ๋ฏธ๋ฌํ ๋ ์ด์์์ ๋ง๋ค ์ ์์ต๋๋ค. ์ด๋ ํนํ ๋ค์ํ ์ปจํ ์คํธ์์ ์ฌ์ฉ๋ ์ ์๋ ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ์ปดํฌ๋ํธ์ ์ ์ฉํฉ๋๋ค.
- ์ฝ๋ ์ค๋ณต ๊ฐ์: ๋ทฐํฌํธ ๋์ ์ปจํ ์ด๋๋ฅผ ๋์์ผ๋ก ํจ์ผ๋ก์จ, ๋ค๋ฅธ ํ๋ฉด ํฌ๊ธฐ์ ๋ํด ๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ฅผ ๋ฐ๋ณตํ ํ์๊ฐ ์์ผ๋ฏ๋ก ์์ฑํด์ผ ํ CSS์ ์์ ์ค์ผ ์ ์์ต๋๋ค.
- ๋ ๋์ ์ฌ์ฉ์ ๊ฒฝํ: ์ปจํ ์ด๋ ์ฟผ๋ฆฌ๋ ์์๊ฐ ํญ์ ์์ ์ ์ปจํ ์คํธ์ ์ ํฉํ ๋ฐฉ์์ผ๋ก ํ์๋๋๋ก ๋ณด์ฅํ์ฌ, ๋ ์ผ๊ด๋๊ณ ์ฆ๊ฑฐ์ด ์ฌ์ฉ์ ๊ฒฝํ์ผ๋ก ์ด์ด์ง๋๋ค. ์๋ฅผ ๋ค์ด, ์ ์์๊ฑฐ๋ ์ฌ์ดํธ๋ ์ ์ฒด ํ๋ฉด ํด์๋์ ๊ด๊ณ์์ด ์์ ์ปจํ ์ด๋์์๋ ์ํ ๋ชฉ๋ก์ ๊ทธ๋ฆฌ๋์์ ๋ฆฌ์คํธ๋ก ๋ณ๊ฒฝํ ์ ์์ต๋๋ค.
CSS ์ปจํ ์ด๋ ์ฟผ๋ฆฌ ๊ตฌํ ๋ฐฉ๋ฒ
CSS ์ปจํ ์ด๋ ์ฟผ๋ฆฌ๋ฅผ ๊ตฌํํ๋ ๊ฒ์ ๋ ๊ฐ์ง ํต์ฌ ๋จ๊ณ, ์ฆ ์ปจํ ์ด๋ ์ ์์ ์ฟผ๋ฆฌ ์์ฑ์ผ๋ก ์ด๋ฃจ์ด์ง๋๋ค.
1. ์ปจํ ์ด๋ ์ ์ํ๊ธฐ
๋จผ์ , ์์๋ฅผ *์ปจํ
์ด๋*๋ก ์ง์ ํด์ผ ํฉ๋๋ค. ์ด๋ container-type ์์ฑ์ ์ฌ์ฉํ์ฌ ์ํ๋ฉ๋๋ค. container-type์๋ ๋ ๊ฐ์ง ์ฃผ์ ๊ฐ์ด ์์ต๋๋ค:
size: ์ด ๊ฐ์ ์ปจํ ์ด๋์ ๋๋น์ ๋์ด๋ฅผ ์ฟผ๋ฆฌํ ์ ์๊ฒ ํฉ๋๋ค.inline-size: ์ด ๊ฐ์ ์ปจํ ์ด๋์ ์ธ๋ผ์ธ ํฌ๊ธฐ(๊ฐ๋ก ์ฐ๊ธฐ ๋ชจ๋์์๋ ๋๋น, ์ธ๋ก ์ฐ๊ธฐ ๋ชจ๋์์๋ ๋์ด)๋ฅผ ์ฟผ๋ฆฌํ ์ ์๊ฒ ํฉ๋๋ค. ์ด๋ ์ข ์ข ๋ฐ์ํ ๋ ์ด์์์ ๊ฐ์ฅ ์ ์ฉํ ์ต์ ์ ๋๋ค.
๋ํ container-name์ ์ฌ์ฉํ์ฌ ์ปจํ
์ด๋์ ์ด๋ฆ์ ์ง์ ํ ์ ์์ผ๋ฉฐ, ์ด๋ ์ฟผ๋ฆฌ์์ ํน์ ์ปจํ
์ด๋๋ฅผ ๋์์ผ๋ก ํ ๋ ์ ์ฉํ ์ ์์ต๋๋ค. ์๋ฅผ ๋ค๋ฉด ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
.card-container {
container-type: inline-size;
container-name: cardContainer;
}
์ด ์ฝ๋๋ .card-container ํด๋์ค๋ฅผ ๊ฐ์ง ์์๋ฅผ ์ปจํ
์ด๋๋ก ์ ์ธํฉ๋๋ค. ์ปจํ
์ด๋์ ๋๋น๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ์ฟผ๋ฆฌ๋ฅผ ํ์ฉํ๊ธฐ ์ํด inline-size๋ฅผ ์ง์ ํ๊ณ ์์ต๋๋ค. ๋ํ cardContainer๋ผ๋ ์ด๋ฆ๋ ๋ถ์ฌํ์ต๋๋ค.
2. ์ปจํ ์ด๋ ์ฟผ๋ฆฌ ์์ฑํ๊ธฐ
์ปจํ
์ด๋๋ฅผ ์ ์ํ๋ค๋ฉด, @container at-rule์ ์ฌ์ฉํ์ฌ ์ปจํ
์ด๋ ์ฟผ๋ฆฌ๋ฅผ ์์ฑํ ์ ์์ต๋๋ค. ๊ตฌ๋ฌธ์ ๋ฏธ๋์ด ์ฟผ๋ฆฌ์ ์ ์ฌํฉ๋๋ค:
@container cardContainer (min-width: 400px) {
.card {
flex-direction: row;
}
.card-image {
width: 40%;
}
.card-content {
width: 60%;
}
}
์ด ์ฟผ๋ฆฌ๋ cardContainer๋ผ๋ ์ด๋ฆ์ ์ปจํ
์ด๋์ ์ต์ ๋๋น๊ฐ 400px์ผ ๋๋ง ์ค๊ดํธ ์์ ์คํ์ผ์ ์ ์ฉํฉ๋๋ค. ์ด๋ (์๋ง๋ .card-container์ ์์ ์์์ธ) .card ์์๋ฅผ ๋์์ผ๋ก ํ์ฌ ๋ ์ด์์์ ์กฐ์ ํฉ๋๋ค. ์ปจํ
์ด๋๊ฐ 400px๋ณด๋ค ์ข์ผ๋ฉด ์ด ์คํ์ผ๋ค์ ์ ์ฉ๋์ง ์์ต๋๋ค.
๋จ์ถํ: ์ปจํ
์ด๋ ์ด๋ฆ์ ์ง์ ํ ํ์๊ฐ ์์ ๋๋ @container ๊ท์น์ ๋จ์ถ ๋ฒ์ ์ ์ฌ์ฉํ ์๋ ์์ต๋๋ค:
@container (min-width: 400px) {
/* Styles to apply when the container is at least 400px wide */
}
์ปจํ ์ด๋ ์ฟผ๋ฆฌ์ ์ค์ ์์
์ปจํ ์ด๋ ์ฟผ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ฌ ๋ ๋ฐ์์ ์ด๊ณ ์ ์์ฑ ์๋ ๋ ์ด์์์ ๋ง๋๋ ๋ช ๊ฐ์ง ์ค์ ์์ ๋ฅผ ์ดํด๋ณด๊ฒ ์ต๋๋ค.
์์ 1: ์นด๋ ์ปดํฌ๋ํธ
์ด ์์ ๋ ์ปจํ ์ด๋์ ๋๋น์ ๋ฐ๋ผ ์นด๋ ์ปดํฌ๋ํธ๋ฅผ ์กฐ์ ํ๋ ๋ฐฉ๋ฒ์ ๋ณด์ฌ์ค๋๋ค. ์นด๋๋ ์ปจํ ์ด๋๊ฐ ์ข์ ๋๋ ์ฝํ ์ธ ๋ฅผ ๋จ์ผ ์ด๋ก, ์ปจํ ์ด๋๊ฐ ๋ ๋์ ๋๋ ๋ ๊ฐ์ ์ด๋ก ํ์ํฉ๋๋ค.
HTML:
CSS:
.card-container {
container-type: inline-size;
border: 1px solid #ccc;
margin-bottom: 20px;
}
.card {
display: flex;
flex-direction: column;
}
.card-image {
width: 100%;
height: auto;
}
.card-content {
padding: 10px;
}
@container (min-width: 500px) {
.card {
flex-direction: row;
}
.card-image {
width: 40%;
}
.card-content {
width: 60%;
}
}
์ด ์์ ์์ .card-container๋ ์ปจํ
์ด๋๋ก ์ ์ธ๋ฉ๋๋ค. ์ปจํ
์ด๋์ ๋๋น๊ฐ 500px ๋ฏธ๋ง์ผ ๋, .card๋ ์ด ๋ ์ด์์์ ์ฌ์ฉํ์ฌ ์ด๋ฏธ์ง์ ์ฝํ
์ธ ๋ฅผ ์์ง์ผ๋ก ์์ต๋๋ค. ์ปจํ
์ด๋์ ๋๋น๊ฐ 500px ์ด์์ผ ๋, .card๋ ํ ๋ ์ด์์์ผ๋ก ์ ํ๋์ด ์ด๋ฏธ์ง์ ์ฝํ
์ธ ๋ฅผ ๋๋ํ ํ์ํฉ๋๋ค.
์์ 2: ๋ด๋น๊ฒ์ด์ ๋ฉ๋ด
์ด ์์ ๋ ์ฌ์ฉ ๊ฐ๋ฅํ ๊ณต๊ฐ์ ๋ฐ๋ผ ๋ด๋น๊ฒ์ด์ ๋ฉ๋ด๋ฅผ ์กฐ์ ํ๋ ๋ฐฉ๋ฒ์ ๋ณด์ฌ์ค๋๋ค. ์ปจํ ์ด๋๊ฐ ์ข์ ๋๋ ๋ฉ๋ด ํญ๋ชฉ์ด ๋๋กญ๋ค์ด์ผ๋ก ํ์๋ฉ๋๋ค. ์ปจํ ์ด๋๊ฐ ๋ ๋์ ๋๋ ๋ฉ๋ด ํญ๋ชฉ์ด ์ํ์ผ๋ก ํ์๋ฉ๋๋ค.
HTML:
CSS:
.nav-container {
container-type: inline-size;
background-color: #f0f0f0;
padding: 10px;
}
.nav-container ul {
list-style: none;
margin: 0;
padding: 0;
}
.nav-container li {
margin-bottom: 5px;
}
.nav-container a {
display: block;
padding: 5px 10px;
text-decoration: none;
color: #333;
}
@container (min-width: 600px) {
.nav-container ul {
display: flex;
}
.nav-container li {
margin-right: 10px;
margin-bottom: 0;
}
.nav-container a {
display: inline-block;
}
}
์ด ์์ ์์ .nav-container๋ ์ปจํ
์ด๋๋ก ์ ์ธ๋ฉ๋๋ค. ์ปจํ
์ด๋์ ๋๋น๊ฐ 600px ๋ฏธ๋ง์ผ ๋, ๋ฉ๋ด ํญ๋ชฉ์ ์์ง ๋ชฉ๋ก์ผ๋ก ํ์๋ฉ๋๋ค. ์ปจํ
์ด๋์ ๋๋น๊ฐ 600px ์ด์์ผ ๋, ๋ฉ๋ด ํญ๋ชฉ์ flexbox๋ฅผ ์ฌ์ฉํ์ฌ ์ํ์ผ๋ก ํ์๋ฉ๋๋ค.
์์ 3: ์ํ ๋ชฉ๋ก
์ ์์๊ฑฐ๋ ์ํ ๋ชฉ๋ก์ ์ปจํ ์ด๋์ ๋๋น์ ๋ฐ๋ผ ๋ ์ด์์์ ์กฐ์ ํ ์ ์์ต๋๋ค. ์์ ์ปจํ ์ด๋์์๋ ์ํ ์ด๋ฏธ์ง, ์ ๋ชฉ, ๊ฐ๊ฒฉ์ด ์๋ ๊ฐ๋จํ ๋ชฉ๋ก์ด ์ ์๋ํ ์ ์์ต๋๋ค. ์ปจํ ์ด๋๊ฐ ์ปค์ง์ ๋ฐ๋ผ ์งง์ ์ค๋ช ์ด๋ ๊ณ ๊ฐ ํ์ ๊ณผ ๊ฐ์ ์ถ๊ฐ ์ ๋ณด๋ฅผ ์ถ๊ฐํ์ฌ ํํ์ ํฅ์์ํฌ ์ ์์ต๋๋ค. ์ด๋ ๋ํ ๋ทฐํฌํธ๋ง์ ๋์์ผ๋ก ํ๋ ๊ฒ๋ณด๋ค ๋ ์ธ๋ถํ๋ ์ ์ด๋ฅผ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค.
HTML:
Product Name 1
$19.99
Product Name 2
$24.99
CSS:
.product-listing-container {
container-type: inline-size;
display: flex;
flex-wrap: wrap;
}
.product-item {
width: 100%;
margin-bottom: 20px;
border: 1px solid #eee;
padding: 10px;
}
.product-item img {
width: 100%;
height: auto;
margin-bottom: 10px;
}
.product-item h3 {
margin-top: 0;
font-size: 1.2em;
}
.product-item .price {
font-weight: bold;
color: #007bff;
}
@container (min-width: 400px) {
.product-item {
width: 50%;
padding: 15px;
}
}
@container (min-width: 768px) {
.product-item {
width: 33.33%;
}
}
์ด CSS ์ฝ๋๋ ๋จผ์ `product-listing-container`๋ฅผ ์ปจํ ์ด๋๋ก ์ค์ ํฉ๋๋ค. ์ข์ ์ปจํ ์ด๋(400px ๋ฏธ๋ง)์ ๊ฒฝ์ฐ, ๊ฐ ์ํ ์์ดํ ์ ๋๋น์ 100%๋ฅผ ์ฐจ์งํฉ๋๋ค. ์ปจํ ์ด๋๊ฐ 400px๋ฅผ ์ด๊ณผํ๋ฉด ์ํ ์์ดํ ์ ๋ ๊ฐ์ ์ด๋ก ๋ฐฐ์ด๋ฉ๋๋ค. 768px๋ฅผ ์ด๊ณผํ๋ฉด ์ํ ์์ดํ ์ ์ธ ๊ฐ์ ์ด๋ก ํ์๋ฉ๋๋ค.
๋ธ๋ผ์ฐ์ ์ง์ ๋ฐ ํด๋ฆฌํ
์ปจํ ์ด๋ ์ฟผ๋ฆฌ๋ Chrome, Firefox, Safari, Edge๋ฅผ ํฌํจํ ์ต์ ๋ธ๋ผ์ฐ์ ์์ ์ ์ง์๋ฉ๋๋ค. ๊ทธ๋ฌ๋ ๊ตฌํ ๋ธ๋ผ์ฐ์ ๋ ๊ธฐ๋ณธ์ ์ผ๋ก ์ง์ํ์ง ์์ ์ ์์ต๋๋ค.
๊ตฌํ ๋ธ๋ผ์ฐ์ ๋ฅผ ์ง์ํ๊ธฐ ์ํด ํด๋ฆฌํ(polyfill)์ ์ฌ์ฉํ ์ ์์ต๋๋ค. ์ธ๊ธฐ ์๋ ์ต์
์ npm๊ณผ GitHub์์ ์ฐพ์ ์ ์๋ container-query-polyfill์
๋๋ค. ํด๋ฆฌํ์ ์ง์๋์ง ์๋ ๊ธฐ๋ฅ์ ๊ฒฉ์ฐจ๋ฅผ ๋ฉ์์ฃผ์ด ๊ตฌํ ๋ธ๋ผ์ฐ์ ์์๋ ์ปจํ
์ด๋ ์ฟผ๋ฆฌ๋ฅผ ์ฌ์ฉํ ์ ์๊ฒ ํด์ค๋๋ค.
์ปจํ ์ด๋ ์ฟผ๋ฆฌ ์ฌ์ฉ์ ์ํ ๋ชจ๋ฒ ์ฌ๋ก
์ปจํ ์ด๋ ์ฟผ๋ฆฌ๋ฅผ ์ฌ์ฉํ ๋ ์ผ๋์ ๋์ด์ผ ํ ๋ช ๊ฐ์ง ๋ชจ๋ฒ ์ฌ๋ก๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- ์๋ฏธ ์๋ ์ปจํ ์ด๋ ์ด๋ฆ ์ฌ์ฉ: ์ฝ๋์ ๊ฐ๋ ์ฑ๊ณผ ์ ์ง๋ณด์์ฑ์ ๋์ด๊ธฐ ์ํด ์ปจํ ์ด๋์ ์ค๋ช ์ ์ธ ์ด๋ฆ์ ์ง์ ํ์ธ์.
- ์ฟผ๋ฆฌ๋ฅผ ๊ตฌ์ฒด์ ์ผ๋ก ์ ์ง: ์ปจํ ์ด๋ ํฌ๊ธฐ์ ๋ฐ๋ผ ์คํ์ผ์ ์ง์ ํด์ผ ํ๋ ํน์ ์์๋ฅผ ๋์์ผ๋ก ํ์ธ์.
- ๊ณผ๋ํ๊ฒ ๋ณต์กํ ์ฟผ๋ฆฌ ํผํ๊ธฐ: ์ฟผ๋ฆฌ๋ฅผ ๊ฐ๋จํ๊ณ ์ง์ค์ ์ผ๋ก ์ ์งํ์ธ์. ๋ณต์กํ ์ฟผ๋ฆฌ๋ ๋๋ฒ๊น ํ๊ณ ์ ์ง๋ณด์ํ๊ธฐ ์ด๋ ค์ธ ์ ์์ต๋๋ค.
- ์ฒ ์ ํ๊ฒ ํ ์คํธํ๊ธฐ: ๋ค์ํ ์ปจํ ์ด๋ ํฌ๊ธฐ์์ ๋ ์ด์์์ ํ ์คํธํ์ฌ ๋ฐ์์ ์ด๊ณ ์ ์์ฑ์ด ์๋์ง ํ์ธํ์ธ์.
- ์ฑ๋ฅ ๊ณ ๋ ค: ์ปจํ ์ด๋ ์ฟผ๋ฆฌ๋ ์ผ๋ฐ์ ์ผ๋ก ์ฑ๋ฅ์ด ์ข์ง๋ง, ์์ฃผ ์ ๋ฐ์ดํธ๋๋ ์์์ ๊ณผ๋ํ๊ฒ ์ฌ์ฉํ๋ ๊ฒ์ ํผํ์ธ์.
- ์ ๊ทผ์ฑ ๊ณ ๋ ค์ฌํญ: ์ปจํ ์ด๋ ์ฟผ๋ฆฌ์ ์ํด ํธ๋ฆฌ๊ฑฐ๋๋ ๋ณ๊ฒฝ ์ฌํญ์ด ์ ๊ทผ์ฑ์ ๋ถ์ ์ ์ธ ์ํฅ์ ๋ฏธ์น์ง ์๋๋ก ํ์ธ์. ์๋ฅผ ๋ค์ด, ๋ชจ๋ ์ปจํ ์ด๋ ํฌ๊ธฐ์์ ์ฝํ ์ธ ๊ฐ ์ฝ๊ธฐ ์ฝ๊ณ ํ์ ๊ฐ๋ฅํ ์ํ๋ก ์ ์ง๋๋์ง ํ์ธํ์ธ์.
์ผ๋ฐ์ ์ธ ํจ์ ๊ณผ ์ด๋ฅผ ํผํ๋ ๋ฐฉ๋ฒ
- ์ํ ์ข ์์ฑ: ์ปจํ ์ด๋ ์ฟผ๋ฆฌ ๊ฐ์ ์ํ ์ข ์์ฑ์ ๋ง๋ค์ง ์๋๋ก ์ฃผ์ํ์ธ์. ์๋ฅผ ๋ค์ด, ์ปจํ ์ด๋์ ํฌ๊ธฐ๊ฐ ์ปจํ ์ด๋ ์ฟผ๋ฆฌ ๋ด์์ ์ ์ฉ๋ ์คํ์ผ์ ์ํด ์ํฅ์ ๋ฐ๋ ๊ฒฝ์ฐ ์๊ธฐ์น ์์ ๋์์ผ๋ก ์ด์ด์ง ์ ์์ต๋๋ค.
- ๊ณผ๋ํ ๊ตฌ์ฒด์ฑ: ์ปจํ ์ด๋ ์ฟผ๋ฆฌ์์ ์ง๋์น๊ฒ ๊ตฌ์ฒด์ ์ธ ์ ํ์๋ฅผ ์ฌ์ฉํ์ง ๋ง์ธ์. ์ด๋ ์ฝ๋ ์ ์ง๋ณด์๋ฅผ ์ด๋ ต๊ฒ ๋ง๋ค๊ณ ๋ค๋ฅธ ์คํ์ผ๊ณผ ์ถฉ๋์ ์ผ์ผํฌ ์ ์์ต๋๋ค.
- ์ค์ฒฉ๋ ์ปจํ ์ด๋ ๋ฌด์: ์ค์ฒฉ๋ ์ปจํ ์ด๋๋ฅผ ์ฌ์ฉํ ๋, ์ฟผ๋ฆฌ๊ฐ ์ฌ๋ฐ๋ฅธ ์ปจํ ์ด๋๋ฅผ ๋์์ผ๋ก ํ๊ณ ์๋์ง ํ์ธํ์ธ์. ํผ๋์ ํผํ๊ธฐ ์ํด ๋ ๊ตฌ์ฒด์ ์ธ ์ปจํ ์ด๋ ์ด๋ฆ์ ์ฌ์ฉํด์ผ ํ ์๋ ์์ต๋๋ค.
- ์ปจํ ์ด๋ ์ ์ ์์ด๋ฒ๋ฆฌ๊ธฐ: ํํ ์ค์ ์ค ํ๋๋ `container-type`์ ์ฌ์ฉํ์ฌ ์์๋ฅผ ์ปจํ ์ด๋๋ก ์ ์ธํ๋ ๊ฒ์ ์๋ ๊ฒ์ ๋๋ค. ์ด๊ฒ์ด ์์ผ๋ฉด ์ปจํ ์ด๋ ์ฟผ๋ฆฌ๋ ์๋ํ์ง ์์ต๋๋ค.
์ปจํ ์ด๋ ์ฟผ๋ฆฌ vs. ๋ฏธ๋์ด ์ฟผ๋ฆฌ: ์ฌ๋ฐ๋ฅธ ๋๊ตฌ ์ ํํ๊ธฐ
์ปจํ ์ด๋ ์ฟผ๋ฆฌ๋ ์๋นํ ์ด์ ์ ์ ๊ณตํ์ง๋ง, ๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ ์ฌ์ ํ ๋ฐ์ํ ๋์์ธ์์ ์ ์ญํ ์ ํฉ๋๋ค. ๋ค์์ ๋ค์ํ ์ํฉ์ ์ด๋ค ๋๊ตฌ๊ฐ ๊ฐ์ฅ ์ ํฉํ์ง ๊ฒฐ์ ํ๋ ๋ฐ ๋์์ด ๋๋ ๋น๊ต์ ๋๋ค:
| ๊ธฐ๋ฅ | ์ปจํ ์ด๋ ์ฟผ๋ฆฌ | ๋ฏธ๋์ด ์ฟผ๋ฆฌ |
|---|---|---|
| ๋์ | ์ปจํ ์ด๋ ํฌ๊ธฐ | ๋ทฐํฌํธ ํฌ๊ธฐ |
| ๋ฐ์์ฑ | ์ปดํฌ๋ํธ ๊ธฐ๋ฐ | ํ์ด์ง ๊ธฐ๋ฐ |
| ์ ์ฐ์ฑ | ๋์ | ์ค๊ฐ |
| ์ฝ๋ ์ค๋ณต | ๋ฎ์ | ๋์ |
| ์ฌ์ฉ ์ฌ๋ก | ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ์ปดํฌ๋ํธ, ๋ณต์กํ ๋ ์ด์์ | ์ ์ญ ๋ ์ด์์ ์กฐ์ , ๊ธฐ๋ณธ ๋ฐ์์ฑ |
์ผ๋ฐ์ ์ผ๋ก, ์ปดํฌ๋ํธ์ ์คํ์ผ์ ์ปจํ ์ด๋ ํฌ๊ธฐ์ ๋ฐ๋ผ ์กฐ์ ํด์ผ ํ ๋๋ ์ปจํ ์ด๋ ์ฟผ๋ฆฌ๋ฅผ ์ฌ์ฉํ๊ณ , ๋ทฐํฌํธ ํฌ๊ธฐ์ ๋ฐ๋ผ ์ ์ญ์ ์ธ ๋ ์ด์์ ์กฐ์ ์ ํด์ผ ํ ๋๋ ๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ธ์. ์ข ์ข ๋ ๊ธฐ์ ์ ์กฐํฉํ๋ ๊ฒ์ด ์ต์์ ์ ๊ทผ ๋ฐฉ์์ ๋๋ค.
์ปจํ ์ด๋ ์ฟผ๋ฆฌ์ ํจ๊ปํ๋ ๋ฐ์ํ ๋์์ธ์ ๋ฏธ๋
์ปจํ ์ด๋ ์ฟผ๋ฆฌ๋ ๋ฐ์ํ ๋์์ธ์์ ์ค์ํ ์ง์ ์ ๋ํ๋ด๋ฉฐ, ์์๊ฐ ๋ค์ํ ์ปจํ ์คํธ์ ์ด๋ป๊ฒ ์ ์ํ๋์ง์ ๋ํด ๋ ํฐ ์ ์ฐ์ฑ๊ณผ ์ ์ด๋ ฅ์ ์ ๊ณตํฉ๋๋ค. ๋ธ๋ผ์ฐ์ ์ง์์ด ๊ณ์ํด์ ํฅ์๋จ์ ๋ฐ๋ผ, ์ปจํ ์ด๋ ์ฟผ๋ฆฌ๋ ์น ๊ฐ๋ฐ์์๊ฒ ์ ์ ๋ ์ค์ํ ๋๊ตฌ๊ฐ ๋ ๊ฒ์ ๋๋ค. ์ด๋ ๋์์ด๋์ ๊ฐ๋ฐ์๊ฐ ๋ชจ๋ ๊ธฐ๊ธฐ์ ํ๋ฉด ํฌ๊ธฐ์์ ๋งค๋๋ฌ์ด ๊ฒฝํ์ ์ ๊ณตํ๋ ์ง์ ์ผ๋ก ์ ์์ฑ ์๊ณ ์ฌ์ฉ์ ์นํ์ ์ธ ์น์ฌ์ดํธ๋ฅผ ๋ง๋ค ์ ์๋๋ก ํ์ ์ค์ด์ค๋๋ค.
๊ฒฐ๋ก
CSS ์ปจํ ์ด๋ ์ฟผ๋ฆฌ๋ ๋ฐ์ํ ๋์์ธ ํดํท์ ๊ฐ๋ ฅํ๊ฒ ์ถ๊ฐ๋ ๊ธฐ๋ฅ์ ๋๋ค. ์์๊ฐ ์์ ์ ํฌํจํ๋ ์ปจํ ์ด๋์ ํฌ๊ธฐ์ ๋ฐ์ํ๋๋ก ํจ์ผ๋ก์จ, ์ง์ ํ ์ปดํฌ๋ํธ ๊ธฐ๋ฐ ๋ฐ์์ฑ์ ๊ฐ๋ฅํ๊ฒ ํ๊ณ ์น ๋์์ธ์์ ์๋ก์ด ์ฐจ์์ ์ ์ฐ์ฑ๊ณผ ์ ๋ฐ์ฑ์ ์ด์ด์ค๋๋ค. ์ปจํ ์ด๋ ์ฟผ๋ฆฌ๋ฅผ ํจ๊ณผ์ ์ผ๋ก ๊ตฌํํ๊ณ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ ์ดํดํจ์ผ๋ก์จ, ๋ชจ๋ ์ฌ๋์๊ฒ ๋ ๋์ ๊ฒฝํ์ ์ ๊ณตํ๋ ๋ ์ ์์ฑ ์๊ณ , ์ ์ง๋ณด์ํ๊ธฐ ์ฌ์ฐ๋ฉฐ, ์ฌ์ฉ์ ์นํ์ ์ธ ์น์ฌ์ดํธ๋ฅผ ๋ง๋ค ์ ์์ต๋๋ค.