λ·°ν¬νΈ ν¬κΈ°λ§μ΄ μλ 컨ν μ΄λ μ€νμΌμ κΈ°λ°ν λ°μν λμμΈμ κ°λ₯νκ² νλ CSS 컨ν μ΄λ 쿼리 λ―Έλμ΄ κΈ°λ₯μΈ μ»¨ν μ΄λ μμ± κ°μ§μ κ°λ ₯ν¨μ νμν΄ λ³΄μΈμ. μ΄ κ³ κΈ κΈ°μ μ ꡬννκ³ νμ©νμ¬ μ μν λ μ΄μμκ³Ό μ»΄ν¬λνΈ μμ€μ λ°μμ±μ ꡬννλ λ°©λ²μ λ°°μ°μΈμ.
CSS 컨ν μ΄λ 쿼리 λ―Έλμ΄ κΈ°λ₯: 컨ν μ΄λ μμ± κ°μ§ - μ’ ν© κ°μ΄λ
μΉ κ°λ°μ μΈκ³λ λμμμ΄ μ§ννκ³ μμΌλ©°, μ΅κ·Ό λͺ λ κ° κ°μ₯ ν₯λ―Έλ‘μ΄ λ°μ μ€ νλλ CSS 컨ν μ΄λ 쿼리μ λμ μ΄μμ΅λλ€. κΈ°μ‘΄ λ―Έλμ΄ μΏΌλ¦¬λ λ·°ν¬νΈ ν¬κΈ°μ μ΄μ μ λ§μΆμ§λ§, 컨ν μ΄λ 쿼리λ₯Ό μ¬μ©νλ©΄ μμλ₯Ό ν¬ν¨νλ μμμ ν¬κΈ°μ μ€νμΌμ λ°λΌ μ€νμΌμ μ§μ ν μ μμ΅λλ€. μ΄λ λ°μν λμμΈμμ μλ‘μ΄ μ°¨μμ μ μ°μ±κ³Ό μΈλΆμ±μ μ 곡ν©λλ€.
μ΄ μ’ ν© κ°μ΄λλ 컨ν μ΄λ 쿼리μ κ°μ₯ κ°λ ₯ν μΈ‘λ©΄ μ€ νλμΈ μ»¨ν μ΄λ μμ± κ°μ§μ λν΄ κΉμ΄ νκ³ λ€ κ²μ λλ€. μ΄κ²μ΄ 무μμΈμ§, μ΄λ»κ² μλνλμ§, κ·Έλ¦¬κ³ μ΄λ₯Ό μ¬μ©νμ¬ μ§μ μΌλ‘ μ μ κ°λ₯νκ³ λ°μμ μΈ μ»΄ν¬λνΈλ₯Ό λ§λλ λ°©λ²μ νμν κ²μ λλ€.
컨ν μ΄λ 쿼리λ 무μμ΄λ©° μ μ€μνκ°?
컨ν μ΄λ μμ± κ°μ§μ λν΄ μμΈν μμ보기 μ μ, 컨ν μ΄λ μΏΌλ¦¬κ° λ¬΄μμ΄λ©° μ μΉ κ°λ°μλ€μκ² κ²μ 체μΈμ μΈμ§ κ°λ¨ν μμ½ν΄ λ³΄κ² μ΅λλ€.
μ ν΅μ μΈ λ―Έλμ΄ μΏΌλ¦¬λ μ μ©ν μ€νμΌμ κ²°μ νκΈ° μν΄ λ·°ν¬νΈμ ν¬κΈ°(λλΉμ λμ΄)μ μμ‘΄ν©λλ€. μ΄λ μ¬μ©λλ μ₯μΉμ νλ©΄ ν¬κΈ°μ λ°λΌ μΉνμ΄μ§μ μ 체 λ μ΄μμμ μ‘°μ νλ λ°λ μ μλν©λλ€. κ·Έλ¬λ λ ν° λ μ΄μμ λ΄μμ κ°λ³ μ»΄ν¬λνΈμ μ¬μ© κ°λ₯ν 곡κ°μ λ°λΌ μ€νμΌμ μ§μ ν΄μΌ ν λλ λΆμ‘±ν©λλ€.
μλ₯Ό λ€μ΄, μ’μ μ¬μ΄λλ°μ λ°°μΉλλμ§ λμ λ©μΈ μ½ν μΈ μμμ λ°°μΉλλμ§μ λ°λΌ λ€λ₯Έ μ½ν μΈ λ₯Ό νμνκ±°λ λ€λ₯Έ λ μ΄μμμ μ¬μ©ν΄μΌ νλ μΉ΄λ μ»΄ν¬λνΈλ₯Ό μμν΄ λ³΄μΈμ. μ ν΅μ μΈ λ―Έλμ΄ μΏΌλ¦¬λ‘λ μΉ΄λ μ»΄ν¬λνΈ λΆλͺ¨ μμμ ν¬κΈ°λ₯Ό μ§μ νκ²ν ν μ μκΈ° λλ¬Έμ μ΄λ₯Ό λ¬μ±νκΈ°κ° μ΄λ ΅μ΅λλ€.
컨ν μ΄λ 쿼리λ μ§μ λ 컨ν μ΄λ μμμ ν¬κΈ°μ λ°λΌ μ€νμΌμ μ μ©ν μ μκ² ν¨μΌλ‘μ¨ μ΄ λ¬Έμ λ₯Ό ν΄κ²°ν©λλ€. μ΄λ μ»΄ν¬λνΈκ° μ 체 λ·°ν¬νΈ ν¬κΈ°μ κ΄κ³μμ΄ μ§μ μΌλ‘ λ 립μ μ΄ λμ΄ νκ²½μ μ μν μ μμμ μλ―Έν©λλ€.
컨ν μ΄λ μμ± κ°μ§ μκ°
컨ν μ΄λ μμ± κ°μ§λ 컨ν μ΄λ 쿼리λ₯Ό ν λ¨κ³ λ λ°μ μν΅λλ€. λ¨μν 컨ν μ΄λμ ν¬κΈ°μλ§ μμ‘΄νλ λμ , 컨ν μ΄λμ μ μ©λ νΉμ CSS μμ±μ κ°μ λ°λΌ μ€νμΌμ μ μ©ν μλ μμ΅λλ€. μ΄λ λμ μ΄κ³ μ μ κ°λ₯ν μ»΄ν¬λνΈλ₯Ό λ§λ€κΈ° μν ν¨μ¬ λ κ°λ ₯ν κ°λ₯μ±μ μ΄μ΄μ€λλ€.
컨ν
μ΄λμ display μμ±(μ: flex, grid, block), flex-direction, grid-template-columns λλ μ¬μ©μ μ§μ μμ±μ λ°λΌ μ»΄ν¬λνΈμ λͺ¨μμ λ³κ²½νλ €λ μλ리μ€λ₯Ό μκ°ν΄ 보μΈμ. 컨ν
μ΄λ μμ± κ°μ§λ λ°λ‘ κ·Έκ²μ κ°λ₯νκ² ν©λλ€!
컨ν μ΄λ μμ± κ°μ§μ μλ λ°©μ
컨ν μ΄λ μμ± κ°μ§λ₯Ό μ¬μ©νλ €λ©΄ λ€μ λ¨κ³λ₯Ό λ°λΌμΌ ν©λλ€:
- 컨ν
μ΄λ μ μ: λ¨Όμ ,
container-typeλ°/λλcontainer-nameCSS μμ±μ μ¬μ©νμ¬ μμλ₯Ό 컨ν μ΄λλ‘ μ§μ ν΄μΌ ν©λλ€. @containerκ·μΉ μ¬μ©: κ·Έλ° λ€μ,@containerat-ruleμ μ¬μ©νμ¬ νΉμ μ€νμΌμ΄ μ μ©λ 쑰건μ μ μν©λλ€. μ¬κΈ°μ κ°μ§νλ €λ μμ±κ³Ό μμ κ°μ μ§μ ν©λλ€.
1λ¨κ³: 컨ν μ΄λ μ μνκΈ°
λ κ°μ§ μμ± μ€ νλλ₯Ό μ¬μ©νμ¬ μ»¨ν μ΄λλ₯Ό μ μν μ μμ΅λλ€:
container-type: μ΄ μμ±μ μ€μ ν ν¬ν¨ 컨ν μ€νΈμ μ νμ μ μν©λλ€. μΌλ°μ μΈ κ°μ λ€μκ³Ό κ°μ΅λλ€:size: 컨ν μ΄λμ μΈλΌμΈ λ° λΈλ‘ ν¬κΈ°λ₯Ό 쿼리ν μ μλ ν¬κΈ° ν¬ν¨ 컨ν μ€νΈλ₯Ό μμ±ν©λλ€.inline-size: 컨ν μ΄λμ μΈλΌμΈ ν¬κΈ°λ§ 쿼리ν μ μλ μΈλΌμΈ ν¬κΈ° ν¬ν¨ 컨ν μ€νΈλ₯Ό μμ±ν©λλ€.normal: μμκ° μΏΌλ¦¬ 컨ν μ΄λκ° μλλλ€.
container-name: μ΄ μμ±μ μ¬μ©νλ©΄ 컨ν μ΄λμ μ΄λ¦μ μ§μ ν μ μμΌλ©°, μ΄λ νμ΄μ§μ μ¬λ¬ 컨ν μ΄λκ° μμ λ μ μ©ν μ μμ΅λλ€.
λ€μμ 컨ν μ΄λλ₯Ό μ μνλ λ°©λ²μ μμ λλ€:
.container {
container-type: inline-size;
container-name: my-card-container;
}
μ΄ μμ μμλ .container ν΄λμ€λ₯Ό κ°μ§ μμλ₯Ό μΈλΌμΈ ν¬κΈ° 컨ν
μ΄λλ‘ μ μνκ³ my-card-containerλΌλ μ΄λ¦μ λΆμ¬νμ΅λλ€.
2λ¨κ³: @container κ·μΉ μ¬μ©νκΈ°
@container κ·μΉμ 컨ν
μ΄λ 쿼리μ ν΅μ¬μ
λλ€. μ΄λ₯Ό ν΅ν΄ 컨ν
μ΄λ λ΄μ μμμ νΉμ μ€νμΌμ΄ μ μ©λ 쑰건μ μ§μ ν μ μμ΅λλ€.
@container κ·μΉμ κΈ°λ³Έ ꡬ문μ λ€μκ³Ό κ°μ΅λλ€:
@container [container-name] (property: value) {
/* Styles to apply when the condition is met */
}
container-name(μ ν μ¬ν): 컨ν μ΄λμ μ΄λ¦μ μ§μ ν κ²½μ°, νΉμ 컨ν μ΄λλ₯Ό λμμΌλ‘ μ§μ νκΈ° μν΄ μ¬κΈ°μ λͺ μν μ μμ΅λλ€. μ΄λ¦μ μλ΅νλ©΄ κ·μΉμ΄ μ§μ λ μ νμ λͺ¨λ 컨ν μ΄λμ μ μ©λ©λλ€.property: value: μ΄κ²μ μ€νμΌμ΄ μ μ©λκΈ° μν΄ μΆ©μ‘±λμ΄μΌ νλ 쑰건μ λλ€. κ°μ§νλ €λ CSS μμ±κ³Ό μμ κ°μ μ§μ ν©λλ€.
λ€μμ 컨ν
μ΄λμ display μμ±μ λ°λΌ μμμ λ°°κ²½μμ λ³κ²½νκΈ° μν΄ μ»¨ν
μ΄λ μμ± κ°μ§λ₯Ό μ¬μ©νλ λ°©λ²μ μμ
λλ€:
.container {
container-type: inline-size;
display: flex;
}
.element {
background-color: lightblue;
}
@container (display: grid) {
.element {
background-color: lightcoral;
}
}
μ΄ μμμ 컨ν
μ΄λμ display μμ±μ΄ gridλ‘ μ€μ λλ©΄ .elementμ λ°°κ²½μμ΄ lightcoralλ‘ λ³κ²½λ©λλ€. κ·Έλ μ§ μμΌλ©΄ lightblueλ‘ μ μ§λ©λλ€.
컨ν μ΄λ μμ± κ°μ§μ μ€μ μμ
컨ν μ΄λ μμ± κ°μ§λ₯Ό μ¬μ©νμ¬ λ μ μ κ°λ₯νκ³ λ°μμ μΈ μ»΄ν¬λνΈλ₯Ό λ§λλ λ°©λ²μ λν λͺ κ°μ§ μ€μ μμ λ₯Ό μ΄ν΄λ³΄κ² μ΅λλ€.
μμ 1: Flex λ°©ν₯μ λ°λΌ μΉ΄λ μ»΄ν¬λνΈ μ‘°μ νκΈ°
μ΄λ―Έμ§, μ λͺ©, μ€λͺ
μ νμνλ μΉ΄λ μ»΄ν¬λνΈλ₯Ό μμν΄ λ³΄μΈμ. 컨ν
μ΄λκ° μ΄ λ μ΄μμ(flex-direction: column)μΌ λλ μ΄λ―Έμ§λ₯Ό ν
μ€νΈ μμ νμνκ³ , ν λ μ΄μμ(flex-direction: row)μΌ λλ ν
μ€νΈ μμ νμνκ³ μΆμ΅λλ€.
<div class="container">
<div class="card">
<img src="image.jpg" alt="Image">
<h2>Title</h2>
<p>Description</p>
</div>
</div>
.container {
container-type: inline-size;
display: flex;
flex-direction: column;
}
.card {
display: flex;
flex-direction: column;
align-items: center;
}
.card img {
width: 100%;
margin-bottom: 10px;
}
@container (flex-direction: row) {
.card {
flex-direction: row;
align-items: flex-start;
}
.card img {
width: 150px;
margin-right: 10px;
margin-bottom: 0;
}
}
μ΄ μμ μμ @container κ·μΉμ 컨ν
μ΄λμ flex-directionμ΄ rowλ‘ μ€μ λ λλ₯Ό κ°μ§ν©λλ€. μ΄ κ²½μ°, μΉ΄λμ λ μ΄μμμ΄ λ³κ²½λμ΄ μ΄λ―Έμ§κ° ν
μ€νΈ μμ νμλ©λλ€. μ΄λ₯Ό ν΅ν΄ μΉ΄λλ λ³λμ CSS ν΄λμ€ μμ΄ λ€λ₯Έ λ μ΄μμμ μ μν μ μμ΅λλ€.
μμ 2: μ΄ κ°μμ λ°λΌ 그리λ λ μ΄μμ μ‘°μ νκΈ°
그리λ λ μ΄μμμΌλ‘ νμλλ μ΄λ―Έμ§ κ°€λ¬λ¦¬λ₯Ό μκ°ν΄ 보μΈμ. 컨ν
μ΄λ λ΄μ μ¬μ© κ°λ₯ν 곡κ°μ λ°λΌ 그리λμ μ΄ μκ° μ‘°μ λκΈ°λ₯Ό μν©λλ€. 컨ν
μ΄λ μμ± κ°μ§μ grid-template-columns μμ±μ μ¬μ©νμ¬ μ΄λ₯Ό λ¬μ±ν μ μμ΅λλ€.
<div class="container">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
<img src="image4.jpg" alt="Image 4">
</div>
.container {
container-type: inline-size;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
@container (grid-template-columns: repeat(1, minmax(200px, 1fr))) {
.container {
grid-template-columns: repeat(1, 1fr);
}
}
@container (grid-template-columns: repeat(2, minmax(200px, 1fr))) {
.container {
grid-template-columns: repeat(2, 1fr);
}
}
μ΄ μμ λ `grid-template-columns` μμ±μ λ°λΌ μ΄ μλ₯Ό μ‘°μ ν©λλ€. μ΄ κΈ°λ₯μ μμ ν μλμν€λ €λ©΄ μλ§λ μλ°μ€ν¬λ¦½νΈλ₯Ό μ¬μ©νμ¬ μ»¨ν μ΄λμ `grid-template-columns` μμ±μ λμ μΌλ‘ λ³κ²½ν΄μΌ νλ€λ μ μ μ μνμΈμ. κ·Έλ¬λ©΄ 컨ν μ΄λ μΏΌλ¦¬κ° μ λ°μ΄νΈλ μμ±μ λ°μν κ²μ λλ€.
μμ 3: μ¬μ©μ μ§μ μμ±μ μ¬μ©ν ν λ§ μ ν
컨ν μ΄λ μμ± κ°μ§λ μ¬μ©μ μ§μ μμ±(CSS λ³μ)κ³Ό κ²°ν©ν λ νΉν κ°λ ₯ν μ μμ΅λλ€. μ΄λ₯Ό μ¬μ©νμ¬ ν λ§λ₯Ό μ ννκ±°λ 컨ν μ΄λμ μ μ©λ μ¬μ©μ μ§μ μμ±μ κ°μ λ°λΌ μ»΄ν¬λνΈμ λͺ¨μμ μ‘°μ ν μ μμ΅λλ€.
<div class="container">
<div class="element">This is an element.</div>
</div>
.container {
container-type: inline-size;
--theme: light;
}
.element {
background-color: var(--background-color);
color: var(--text-color);
}
:root {
--background-color: white;
--text-color: black;
}
@container (--theme: dark) {
:root {
--background-color: black;
--text-color: white;
}
}
μ΄ μμ μμλ --theme μ¬μ©μ μ§μ μμ±μ μ¬μ©νμ¬ μμμ ν
λ§λ₯Ό μ μ΄ν©λλ€. 컨ν
μ΄λμ --theme μμ±μ΄ darkλ‘ μ€μ λλ©΄ μμμ λ°°κ²½μκ³Ό ν
μ€νΈ μμμ΄ μ΄λμ΄ ν
λ§λ₯Ό λ°μνμ¬ λ³κ²½λ©λλ€. μ΄λ₯Ό ν΅ν΄ μ»΄ν¬λνΈμ CSSλ₯Ό μ§μ μμ νμ§ μκ³ λ 컨ν
μ΄λ μμ€μμ μ½κ² ν
λ§λ₯Ό μ νν μ μμ΅λλ€.
λΈλΌμ°μ μ§μ λ° ν΄λ¦¬ν
2024λ νλ° κΈ°μ€μΌλ‘, 컨ν μ΄λ μμ± κ°μ§λ₯Ό ν¬ν¨ν 컨ν μ΄λ 쿼리λ Chrome, Firefox, Safari, Edgeμ κ°μ μ΅μ λΈλΌμ°μ μμ μ μ§μλ©λλ€. κ·Έλ¬λ νλ‘λμ μ½λμ 컨ν μ΄λ 쿼리λ₯Ό ꡬννκΈ° μ μ Can I use...μ κ°μ μΉμ¬μ΄νΈμμ μ΅μ λΈλΌμ°μ νΈνμ± μ 보λ₯Ό νμ νμΈνλ κ²μ΄ μ’μ΅λλ€.
컨ν μ΄λ 쿼리λ₯Ό κΈ°λ³Έμ μΌλ‘ μ§μνμ§ μλ μ΄μ λΈλΌμ°μ λ₯Ό μ§μν΄μΌ νλ κ²½μ° ν΄λ¦¬νμ μ¬μ©ν μ μμ΅λλ€. ν΄λ¦¬νμ μ΄μ λΈλΌμ°μ μμ μλ‘μ΄ κΈ°λ₯μ κΈ°λ₯μ μ 곡νλ μλ°μ€ν¬λ¦½νΈ λΌμ΄λΈλ¬λ¦¬μ λλ€. EQCSS λ° @container-queries/polyfillκ³Ό κ°μ μ¬λ¬ 컨ν μ΄λ 쿼리 ν΄λ¦¬νμ μ¬μ©ν μ μμ΅λλ€. ν΄λ¦¬νμ μ±λ₯μ μν₯μ λ―ΈμΉ μ μμΌλ―λ‘ μ μ€νκ² μ¬μ©ν΄μΌ ν©λλ€.
컨ν μ΄λ μμ± κ°μ§ μ¬μ©μ μν λͺ¨λ² μ¬λ‘
컨ν μ΄λ μμ± κ°μ§λ₯Ό μ¬μ©ν λ μΌλμ λμ΄μΌ ν λͺ κ°μ§ λͺ¨λ² μ¬λ‘λ λ€μκ³Ό κ°μ΅λλ€:
- 컨ν μ΄λ 쿼리λ₯Ό μ μ€νκ² μ¬μ©νμΈμ: 컨ν μ΄λ 쿼리λ λ°μ΄λ μ μ°μ±μ μ 곡νμ§λ§ κ³Όλνκ² μ¬μ©νμ§ λ§μΈμ. κ³Όλν 컨ν μ΄λ 쿼리λ CSSλ₯Ό λ 볡μ‘νκ³ μ μ§ κ΄λ¦¬νκΈ° μ΄λ ΅κ² λ§λ€ μ μμ΅λλ€. 컨ν μ΄λ κΈ°λ° μ€νμΌλ§μ μ΄μ μ μ€μ λ‘ λ릴 μ μλ μ»΄ν¬λνΈμ μ λ΅μ μΌλ‘ μ¬μ©νμΈμ.
- λ¨μνκ² μ μ§νμΈμ: 컨ν μ΄λ 쿼리 쑰건μ κ°λ₯ν ν λ¨μνκ³ μ§κ΄μ μΌλ‘ μ μ§νλλ‘ λ Έλ ₯νμΈμ. μ΄ν΄νκ³ λλ²κΉ νκΈ° μ΄λ €μ΄ 볡μ‘ν λ‘μ§μ νΌνμΈμ.
- μ±λ₯μ κ³ λ €νμΈμ: 컨ν μ΄λ 쿼리λ νΉν νμ΄μ§μ λ§μ 컨ν μ΄λκ° μμ κ²½μ° μ±λ₯μ μν₯μ λ―ΈμΉ μ μμ΅λλ€. 컨ν μ΄λ ν¬κΈ°κ° λ³κ²½λ λ λ€μ κ³μ°ν΄μΌ νλ μ€νμΌ μλ₯Ό μ΅μννλλ‘ CSSλ₯Ό μ΅μ ννμΈμ.
- μ² μ νκ² ν μ€νΈνμΈμ: 컨ν μ΄λ 쿼리 ꡬνμ΄ μμλλ‘ μλνλμ§ νμΈνκΈ° μν΄ νμ λ€λ₯Έ λΈλΌμ°μ μ μ₯μΉμμ μ² μ νκ² ν μ€νΈνμΈμ.
- μλ―Έ μλ μ΄λ¦μ μ¬μ©νμΈμ:
container-nameμ μ¬μ©ν λ 컨ν μ΄λμ λͺ©μ μ λͺ ννκ² λνλ΄λ μ€λͺ μ μΈ μ΄λ¦μ μ ννμΈμ. μ΄λ κ² νλ©΄ CSSλ₯Ό λ μ½κΈ° μ½κ³ μ μ§ κ΄λ¦¬νκΈ° μ½κ² λ§λ€ μ μμ΅λλ€. - μ½λλ₯Ό λ¬ΈμννμΈμ: CSSμ μ£Όμμ μΆκ°νμ¬ μ»¨ν μ΄λ 쿼리λ₯Ό μ¬μ©νλ μ΄μ μ μλ λ°©μμ μ€λͺ νμΈμ. μ΄λ κ² νλ©΄ λ€λ₯Έ κ°λ°μ(κ·Έλ¦¬κ³ λ―Έλμ μμ )κ° μ½λλ₯Ό λ μ½κ² μ΄ν΄νλ λ° λμμ΄ λ©λλ€.
μ κ·Όμ± κ³ λ €μ¬ν
컨ν μ΄λ μμ± κ°μ§λ₯Ό μ¬μ©ν λλ μ₯μ κ° μλ μ¬λλ€μ ν¬ν¨νμ¬ λͺ¨λ μ¬λμ΄ μΉμ¬μ΄νΈλ₯Ό μ¬μ©ν μ μλλ‘ μ κ·Όμ±μ κ³ λ €νλ κ²μ΄ μ€μν©λλ€.
- μΆ©λΆν λλΉλ₯Ό 보μ₯νμΈμ: 컨ν μ΄λ μμ±μ λ°λΌ μμμ λ³κ²½ν λ ν μ€νΈμ λ°°κ²½μ κ°μ λλΉκ° κ°λ μ±μ μν΄ μΆ©λΆν μ μ§λλλ‘ νμΈμ. μμ λλΉ κ²μ¬ λꡬλ₯Ό μ¬μ©νμ¬ μμ μ‘°ν©μ΄ μ κ·Όμ± κ°μ΄λλΌμΈμ μΆ©μ‘±νλμ§ νμΈνμΈμ.
- μ΄λ―Έμ§μ λν λ체 ν
μ€νΈλ₯Ό μ 곡νμΈμ: 컨ν
μ΄λ μμ±μ λ°λΌ μ΄λ―Έμ§λ₯Ό λ³κ²½νλ κ²½μ° λͺ¨λ μ΄λ―Έμ§μ μλ―Έ μλ λ체 ν
μ€νΈ(
altμμ±)λ₯Ό μ 곡ν΄μΌ ν©λλ€. μ΄λ κ² νλ©΄ μ€ν¬λ¦° 리λ μ¬μ©μκ° μ΄λ―Έμ§κ° 보μ΄μ§ μλλΌλ μ΄λ―Έμ§μ λͺ©μ μ μ΄ν΄ν μ μμ΅λλ€. - μλ§¨ν± HTMLμ μ¬μ©νμΈμ: μλ§¨ν± HTML μμ(μ:
<article>,<nav>,<aside>)λ₯Ό μ¬μ©νμ¬ μ½ν μΈ λ₯Ό λ Όλ¦¬μ μΌλ‘ ꡬ쑰ννμΈμ. μ΄λ κ² νλ©΄ μ€ν¬λ¦° 리λκ° μ½ν μΈ λ₯Ό λ μ½κ² ν΄μνκ³ μ₯μ κ° μλ μ¬λλ€μκ² λ λμ μ¬μ©μ κ²½νμ μ 곡ν μ μμ΅λλ€. - 보쑰 κΈ°μ λ‘ ν μ€νΈνμΈμ: μ€ν¬λ¦° 리λμ κ°μ 보쑰 κΈ°μ λ‘ μΉμ¬μ΄νΈλ₯Ό ν μ€νΈνμ¬ μ₯μ κ° μλ μ¬λλ€μ΄ μ κ·Όν μ μλμ§ νμΈνμΈμ. μ΄λ κ² νλ©΄ μ‘΄μ¬ν μ μλ λͺ¨λ μ κ·Όμ± λ¬Έμ λ₯Ό μλ³νκ³ μμ νλ λ° λμμ΄ λ©λλ€.
컨ν μ΄λ 쿼리μ μμ± κ°μ§μ λ―Έλ
컨ν μ΄λ 쿼리μ 컨ν μ΄λ μμ± κ°μ§λ λΉκ΅μ μλ‘μ΄ κΈ°μ μ΄λ©°, λ―Έλμ λμ± λ°μ νκ³ κ°μ λ κ°λ₯μ±μ΄ λμ΅λλ€. μ°λ¦¬λ λ€μκ³Ό κ°μ κ²μ κΈ°λν μ μμ΅λλ€:
- λ λ§μ λΈλΌμ°μ μ§μ: 컨ν μ΄λ μΏΌλ¦¬κ° λ λ리 μ±νλ¨μ λ°λΌ λͺ¨λ μ£Όμ λΈλΌμ°μ μμ ν¨μ¬ λ λμ λΈλΌμ°μ μ§μμ κΈ°λν μ μμ΅λλ€.
- μλ‘μ΄ κΈ°λ₯κ³Ό μλ: CSS νμ€ κΈ°κ΅¬λ 컨ν μ΄λ 쿼리λ₯Ό μν μλ‘μ΄ κΈ°λ₯κ³Ό μλμ μ§μμ μΌλ‘ κ°λ°νκ³ μμ΅λλ€. 컨ν μ΄λ μμ±μ 쿼리νλ μλ‘μ΄ λ°©λ²μ΄λ μλ‘μ΄ μ νμ ν¬ν¨ 컨ν μ€νΈλ₯Ό λ³΄κ² λ μλ μμ΅λλ€.
- CSS νλ μμν¬μμ ν΅ν©: Bootstrap λ° Tailwind CSSμ κ°μ CSS νλ μμν¬λ 컨ν μ΄λ 쿼리λ₯Ό μ»΄ν¬λνΈ λ° μ νΈλ¦¬ν°μ ν΅ν©νκΈ° μμν μ μμ΅λλ€. μ΄λ₯Ό ν΅ν΄ κ°λ°μλ νλ‘μ νΈμμ 컨ν μ΄λ 쿼리λ₯Ό λ μ½κ² μ¬μ©ν μ μμ΅λλ€.
κ²°λ‘
컨ν μ΄λ μμ± κ°μ§λ₯Ό ν¬ν¨ν CSS 컨ν μ΄λ 쿼리 λ―Έλμ΄ κΈ°λ₯μ μΉ κ°λ°μκ° μ§μ μΌλ‘ μ μ κ°λ₯νκ³ λ°μμ μΈ μ»΄ν¬λνΈλ₯Ό λ§λ€ μ μλλ‘ νλ κ°λ ₯ν λꡬμ λλ€. ν¬ν¨νλ μμμ μμ±μ λ°λΌ μμμ μ€νμΌμ μ§μ ν μ μκ² ν¨μΌλ‘μ¨, 컨ν μ΄λ μμ± κ°μ§λ λμ λ μ΄μμκ³Ό μ»΄ν¬λνΈ μμ€μ λ°μμ±μ λν μλ‘μ΄ κ°λ₯μ±μ μΈκ³λ₯Ό μ΄μ΄μ€λλ€.
컨ν μ΄λ 쿼리λ μμ§ λΉκ΅μ μλ‘μ΄ κΈ°μ μ΄μ§λ§ λΉ λ₯΄κ² μΈκΈ°λ₯Ό μ»κ³ μμΌλ©° νλ μΉ κ°λ°μμ ν΄ν·μμ νμμ μΈ λΆλΆμ΄ λ μ€λΉκ° λμ΄ μμ΅λλ€. 컨ν μ΄λ μμ± κ°μ§κ° μ΄λ»κ² μλνλμ§ μ΄ν΄νκ³ λͺ¨λ² μ¬λ‘λ₯Ό λ°λ₯΄λ©΄, κ·Έ νμ νμ©νμ¬ μ μΈκ³ μ¬μ©μλ₯Ό μν λ μ μ°νκ³ μ μ§ κ΄λ¦¬νκΈ° μ¬μ°λ©° μ κ·Όμ± λμ μΉ μ ν리μΌμ΄μ μ λ§λ€ μ μμ΅λλ€.
ꡬνμ μ² μ ν ν μ€νΈνκ³ , μ κ·Όμ±μ κ³ λ €νλ©°, 컨ν μ΄λ 쿼리 κΈ°μ μ μ΅μ κ°λ° λν₯μ κ³μ νμΈνλ κ²μ μμ§ λ§μΈμ. μ¦κ±°μ΄ μ½λ© λμΈμ!