μμ μ°¨μ 쿼리λ₯Ό νμ©ν CSS μ΅μ»€ μ¬μ΄μ§ κΈ°μ μ¬μΈ΅ λΆμ. λ°μν λ° μ μν λ μ΄μμμ μν 컨ν μ΄λ ν¬κΈ°μ λ°λΌ λμ μΌλ‘ μ‘°μ λλ μ»΄ν¬λνΈ μ μλ²μ λ°°μ보μΈμ.
CSS μ΅μ»€ μ¬μ΄μ§: μμ μ°¨μ 쿼리 λ§μ€ν°νκΈ°
λμμμ΄ μ§ννλ μΉ κ°λ° νκ²½μμ μ§μ μΌλ‘ λ°μνμ΄κ³ μ μνμΈ λ μ΄μμμ λ§λλ κ²μ μ¬μ ν μ€μν κ³Όμ μ λλ€. λ―Έλμ΄ μΏΌλ¦¬λ μ€λ«λμ νλ©΄ ν¬κΈ°μ μ μνλ νμ€μ΄μμ§λ§, μ»΄ν¬λνΈ μμ€μ λ°μμ±μ ν΄κ²°νλ λ°λ νκ³κ° μμ΅λλ€. λ°λ‘ μ΄ μ§μ μμ CSS μ΅μ»€ μ¬μ΄μ§μ΄, νΉν μμ μ°¨μ 쿼리μ κ²°ν©λ λ, λ μΈλ°νκ³ κ°λ ₯ν μ루μ μ μ 곡ν©λλ€.
λ―Έλμ΄ μΏΌλ¦¬μ νκ³ μ΄ν΄νκΈ°
λ―Έλμ΄ μΏΌλ¦¬λ λ·°ν¬νΈμ λλΉ, λμ΄ λ° κΈ°ν μ₯μΉ νΉμ±μ λ°λΌ λ μ΄μμμ μ‘°μ νλ λ° νλ₯ν©λλ€. κ·Έλ¬λ νμ΄μ§μ κ°λ³ μ»΄ν¬λνΈμ μ€μ ν¬κΈ°λ 컨ν μ€νΈλ₯Ό μΈμνμ§ λͺ»ν©λλ€. μ΄λ‘ μΈν΄ μ 체 νλ©΄ ν¬κΈ°κ° νμ© λ²μ λ΄μ μλλΌλ μ»΄ν¬λνΈκ° 컨ν μ΄λ λ΄μμ λ무 ν¬κ±°λ μκ² λ³΄μ΄λ μν©μ΄ λ°μν μ μμ΅λλ€.
μ¬λ¬ μΈν°λν°λΈ μμ ―μ΄ ν¬ν¨λ μ¬μ΄λλ°κ° μλ μλ리μ€λ₯Ό μκ°ν΄ 보μμμ€. λ―Έλμ΄ μΏΌλ¦¬λ§ μ¬μ©νλ©΄ λ¬Έμ κ° μ¬μ΄λλ°μ κ·Έ μμ μμ ―μ κ΅νλμ΄ μλλΌλ μ 체 νμ΄μ§ λ μ΄μμμ μν₯μ λ―ΈμΉλ μ€λ¨μ μ μ μν΄μΌ ν μ μμ΅λλ€. CSS μ΅μ»€ μ¬μ΄μ§μ ν΅ν΄ ꡬνλλ μμ μ°¨μ 쿼리λ₯Ό μ¬μ©νλ©΄ μ΄λ¬ν νΉμ μ»΄ν¬λνΈλ₯Ό λμμΌλ‘ νκ³ λ·°ν¬νΈ ν¬κΈ°μ 무κ΄νκ² μ»¨ν μ΄λμ μ°¨μμ λ°λΌ μ€νμΌμ μ‘°μ ν μ μμ΅λλ€.
CSS μ΅μ»€ μ¬μ΄μ§ μκ°
μμ μ°¨μ 쿼리 λλ 컨ν μ΄λ 쿼리λ‘λ μλ €μ§ CSS μ΅μ»€ μ¬μ΄μ§μ λΆλͺ¨ 컨ν μ΄λμ μ°¨μμ λ°λΌ μμμ μ€νμΌμ μ§μ νλ λ©μ»€λμ¦μ μ 곡ν©λλ€. μ΄λ₯Ό ν΅ν΄ μ§μ μΌλ‘ 컨ν μ€νΈλ₯Ό μΈμνκ³ μ£Όλ³ νκ²½μ μλ²½νκ² μ μνλ μ»΄ν¬λνΈλ₯Ό λ§λ€ μ μμ΅λλ€.
곡μ μ¬μκ³Ό λΈλΌμ°μ μ§μμ΄ μμ§ λ°μ μ€μ΄μ§λ§, μ€λλ μ μ¬ν κΈ°λ₯μ λ¬μ±νκΈ° μν΄ μ¬λ¬ κΈ°μ κ³Ό ν΄λ¦¬νμ μ¬μ©ν μ μμ΅λλ€. μ΄λ¬ν κΈ°μ μ μ’ μ’ CSS λ³μμ μλ°μ€ν¬λ¦½νΈλ₯Ό νμ©νμ¬ μ»¨ν μ΄λ ν¬κΈ° λ³κ²½μ κ΄μ°°νκ³ μ΄μ λ°μν©λλ€.
μ΅μ»€ μ¬μ΄μ§ ꡬν κΈ°μ
μ΅μ»€ μ¬μ΄μ§μ ꡬννλ λ°μλ μ¬λ¬ μ λ΅μ΄ μμΌλ©°, κ° μ λ΅μ 볡μ‘μ±, μ±λ₯ λ° λΈλΌμ°μ νΈνμ± μΈ‘λ©΄μμ μ₯λ¨μ μ κ°μ§λλ€. κ°μ₯ μΌλ°μ μΈ μ κ·Όλ² λͺ κ°μ§λ₯Ό μ΄ν΄λ³΄κ² μ΅λλ€:
1. ResizeObserverλ₯Ό μ΄μ©ν μλ°μ€ν¬λ¦½νΈ κΈ°λ° μ κ·Όλ²
ResizeObserver APIλ μμμ ν¬κΈ° λ³κ²½μ κ°μ§νλ λ°©λ²μ μ 곡ν©λλ€. ResizeObserverλ₯Ό CSS λ³μμ ν¨κ» μ¬μ©νλ©΄ 컨ν
μ΄λμ μ°¨μμ λ°λΌ μ»΄ν¬λνΈμ μ€νμΌμ λμ μΌλ‘ μ
λ°μ΄νΈν μ μμ΅λλ€.
μμ:
const container = document.querySelector('.container');
const element = document.querySelector('.element');
const resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) {
const width = entry.contentRect.width;
container.style.setProperty('--container-width', `${width}px`);
}
});
resizeObserver.observe(container);
CSS:
.element {
width: 100%;
background-color: #eee;
padding: 1em;
font-size: 16px;
}
.element[style*="--container-width: 300px"] {
font-size: 14px;
}
.element[style*="--container-width: 200px"] {
font-size: 12px;
}
μ΄ μμμμ μλ°μ€ν¬λ¦½νΈ μ½λλ .container μμμ λλΉλ₯Ό κ°μ§ν©λλ€. λλΉκ° λ³κ²½λ λλ§λ€ --container-width CSS λ³μλ₯Ό μ
λ°μ΄νΈν©λλ€. κ·Έλ° λ€μ CSSλ μμ± μ νμλ₯Ό μ¬μ©νμ¬ --container-width λ³μμ κ°μ λ°λΌ .elementμ λ€λ₯Έ κΈκΌ΄ ν¬κΈ°λ₯Ό μ μ©ν©λλ€.
μ₯μ :
- ꡬνμ΄ λΉκ΅μ κ°λ¨ν©λλ€.
- λλΆλΆμ μ΅μ λΈλΌμ°μ μμ μλν©λλ€.
λ¨μ :
- μλ°μ€ν¬λ¦½νΈκ° νμν©λλ€.
- μ μ€νκ² μ΅μ ννμ§ μμΌλ©΄ μ±λ₯μ μν₯μ μ€ μ μμ΅λλ€.
2. CSS νλλ (λ―Έλμ μ κ·Όλ²)
CSS νλλλ CSS μμ§μ μΌλΆλ₯Ό λ ΈμΆνλ μ μμ€ API μΈνΈλ₯Ό μ 곡νμ¬ κ°λ°μκ° μ¬μ©μ μ μ κΈ°λ₯μΌλ‘ CSSλ₯Ό νμ₯ν μ μκ² ν΄μ€λλ€. μμ§ κ°λ° μ€μ΄μ§λ§, νλλμ Custom Properties and Values APIμ Layout API λ° Paint APIμ μ‘°ν©μ λ―Έλμ μμ μ°¨μ 쿼리μ λν λ μ±λ₯μ΄ μ’κ³ νμ€νλ μ κ·Όλ²μ μ 곡ν κ²μΌλ‘ κΈ°λλ©λλ€. 컨ν μ΄λ ν¬κΈ° λ³κ²½μ λ°λΌ μλμΌλ‘ μ λ°μ΄νΈλκ³ νμν λλ§ λ μ΄μμ 리νλ‘μ°λ₯Ό νΈλ¦¬κ±°νλ μ¬μ©μ μ μ μμ±μ μ μν μ μλ€κ³ μμν΄ λ³΄μμμ€.
μ΄ μ κ·Όλ²μ κ²°κ΅ μλ°μ€ν¬λ¦½νΈ κΈ°λ° μ루μ μ νμμ±μ μμ κ³ μ΅μ»€ μ¬μ΄μ§μ ꡬννλ λ λ€μ΄ν°λΈνκ³ ν¨μ¨μ μΈ λ°©λ²μ μ 곡ν κ²μ λλ€.
μ₯μ :
- λ€μ΄ν°λΈ λΈλΌμ°μ μ§μ (ꡬν μ).
- μλ°μ€ν¬λ¦½νΈ κΈ°λ° μ루μ λ³΄λ€ μ μ¬μ μΌλ‘ λ λμ μ±λ₯.
- νμ¬ κΈ°μ λ³΄λ€ λ μ μ°νκ³ νμ₯ κ°λ₯.
λ¨μ :
- μμ§ λΈλΌμ°μ μμ λ리 μ§μλμ§ μμ.
- CSS μμ§μ λν λ κΉμ μ΄ν΄κ° νμ.
3. ν΄λ¦¬ν λ° λΌμ΄λΈλ¬λ¦¬
λͺλͺ μλ°μ€ν¬λ¦½νΈ λΌμ΄λΈλ¬λ¦¬μ ν΄λ¦¬νμ λ€μ΄ν°λΈ μμ μ°¨μ 쿼리μ λμμ λͺ¨λ°©νμ¬ μ»¨ν
μ΄λ 쿼리 κΈ°λ₯μ μ 곡νλ κ²μ λͺ©νλ‘ ν©λλ€. μ΄λ¬ν λΌμ΄λΈλ¬λ¦¬λ μ’
μ’
ResizeObserverμ μ리ν CSS κΈ°μ μ μ‘°ν©μ μ¬μ©νμ¬ μνλ ν¨κ³Όλ₯Ό μ»μ΅λλ€.
μ΄λ¬ν λΌμ΄λΈλ¬λ¦¬μ μμλ λ€μκ³Ό κ°μ΅λλ€:
- EQCSS: μμ ν μμ 쿼리 ꡬ문μ μ 곡νλ κ²μ λͺ©νλ‘ ν©λλ€.
- CSS Element Queries: μμ± μ νμμ μλ°μ€ν¬λ¦½νΈλ₯Ό μ¬μ©νμ¬ μμ ν¬κΈ°λ₯Ό κ°μ§ν©λλ€.
μ₯μ :
- λ€μ΄ν°λΈλ‘ μ§μνμ§ μλ λΈλΌμ°μ μμλ μ€λλ 컨ν μ΄λ 쿼리λ₯Ό μ¬μ©ν μ μκ² ν΄μ€λλ€.
λ¨μ :
- νλ‘μ νΈμ μμ‘΄μ±μ μΆκ°ν©λλ€.
- μ±λ₯μ μν₯μ μ€ μ μμ΅λλ€.
- λ€μ΄ν°λΈ 컨ν μ΄λ 쿼리λ₯Ό μλ²½νκ² λͺ¨λ°©νμ§ λͺ»ν μ μμ΅λλ€.
μ€μ©μ μΈ μμ λ° μ¬μ© μ¬λ‘
μμ μ°¨μ 쿼리λ κ΄λ²μν μ¬μ© μ¬λ‘μ μ μ©λ μ μμ΅λλ€. λͺ κ°μ§ μμλ λ€μκ³Ό κ°μ΅λλ€:
1. μΉ΄λ μ»΄ν¬λνΈ
μ νμ΄λ μλΉμ€μ λν μ 보λ₯Ό νμνλ μΉ΄λ μ»΄ν¬λνΈλ₯Ό μμν΄ λ³΄μμμ€. μ΅μ»€ μ¬μ΄μ§μ μ¬μ©νλ©΄ μ¬μ© κ°λ₯ν λλΉμ λ°λΌ μΉ΄λμ λ μ΄μμκ³Ό μ€νμΌμ μ‘°μ ν μ μμ΅λλ€. μλ₯Ό λ€μ΄, μμ 컨ν μ΄λμμλ μ΄λ―Έμ§μ ν μ€νΈλ₯Ό μμ§μΌλ‘ μκ³ , ν° μ»¨ν μ΄λμμλ λλν νμν μ μμ΅λλ€.
μμ: λ΄μ€ μΉμ¬μ΄νΈλ μΉ΄λκ° νμλλ μμΉ(μ: ννμ΄μ§μ ν° νμ΄λ‘ μΉ΄λ λ μ¬μ΄λλ°μ μμ μΉ΄λ)μ λ°λΌ κΈ°μ¬μ λν λ€μν μΉ΄λ λμμΈμ κ°μ§ μ μμ΅λλ€.
2. λ΄λΉκ²μ΄μ λ©λ΄
λ΄λΉκ²μ΄μ λ©λ΄λ μ’ μ’ λ€λ₯Έ νλ©΄ ν¬κΈ°μ μ μν΄μΌ ν©λλ€. μ΅μ»€ μ¬μ΄μ§μ μ¬μ©νλ©΄ μ¬μ© κ°λ₯ν 곡κ°μ λ°λΌ λ μ΄μμμ λμ μΌλ‘ λ³κ²½νλ λ©λ΄λ₯Ό λ§λ€ μ μμ΅λλ€. μλ₯Ό λ€μ΄, μ’μ 컨ν μ΄λμμλ λ©λ΄λ₯Ό νλ²κ±° μμ΄μ½μΌλ‘ μΆμνκ³ , λμ 컨ν μ΄λμμλ λͺ¨λ λ©λ΄ νλͺ©μ μνμΌλ‘ νμν μ μμ΅λλ€.
μμ: μ μ μκ±°λ μ¬μ΄νΈλ λ°μ€ν¬ν±μμλ λͺ¨λ μ ν μΉ΄ν κ³ λ¦¬λ₯Ό νμνμ§λ§ λͺ¨λ°μΌ κΈ°κΈ°μμλ λλ‘λ€μ΄ λ©λ΄λ‘ μΆμλλ λ΄λΉκ²μ΄μ λ©λ΄λ₯Ό κ°μ§ μ μμ΅λλ€. 컨ν μ΄λ 쿼리λ₯Ό μ¬μ©νλ©΄ μ΄ λμμ μ 체 λ·°ν¬νΈ ν¬κΈ°μ μκ΄μμ΄ μ»΄ν¬λνΈ μμ€μμ μ μ΄ν μ μμ΅λλ€.
3. μΈν°λν°λΈ μμ ―
μ°¨νΈ, κ·Έλν, μ§λμ κ°μ μΈν°λν°λΈ μμ ―μ ν¬κΈ°μ λ°λΌ λ€λ₯Έ μμ€μ μΈλΆ μ λ³΄κ° νμν κ²½μ°κ° λ§μ΅λλ€. μ΅μ»€ μ¬μ΄μ§μ μ¬μ©νλ©΄ 컨ν μ΄λμ μ°¨μμ λ°λΌ μ΄λ¬ν μμ ―μ 볡μ‘μ±μ μ‘°μ ν μ μμ΅λλ€. μλ₯Ό λ€μ΄, μμ 컨ν μ΄λμμλ λ μ΄λΈμ μ κ±°νκ±°λ λ°μ΄ν° ν¬μΈνΈ μλ₯Ό μ€μ¬ μ°¨νΈλ₯Ό λ¨μνν μ μμ΅λλ€.
μμ: κΈμ΅ λ°μ΄ν°λ₯Ό νμνλ λμ보λλ μμ νλ©΄μμλ λ¨μνλ λΌμΈ κ·Έλνλ₯Ό, ν° νλ©΄μμλ λ μμΈν μΊλ€μ€ν± μ°¨νΈλ₯Ό 보μ¬μ€ μ μμ΅λλ€.
4. ν μ€νΈκ° λ§μ μ½ν μΈ λΈλ‘
ν μ€νΈμ κ°λ μ±μ 컨ν μ΄λμ λλΉμ ν° μν₯μ λ°μ μ μμ΅λλ€. μ΅μ»€ μ¬μ΄μ§μ μ¬μ©νμ¬ μ¬μ© κ°λ₯ν λλΉμ λ°λΌ ν μ€νΈμ κΈκΌ΄ ν¬κΈ°, μ€ λμ΄ λ° κΈμ κ°κ²©μ μ‘°μ ν μ μμ΅λλ€. μ΄λ 컨ν μ΄λ ν¬κΈ°μ κ΄κ³μμ΄ ν μ€νΈκ° νμ μ½κΈ° μ½λλ‘ λ³΄μ₯νμ¬ μ¬μ©μ κ²½νμ ν₯μμν¬ μ μμ΅λλ€.
μμ: λΈλ‘κ·Έ κ²μλ¬Όμ λ μμ μ°½ λλΉμ λ°λΌ λ©μΈ μ½ν μΈ μμμ κΈκΌ΄ ν¬κΈ°μ μ€ λμ΄λ₯Ό μ‘°μ νμ¬ μ°½ ν¬κΈ°κ° μ‘°μ λ λμλ μ΅μ μ κ°λ μ±μ 보μ₯ν μ μμ΅λλ€.
μ΅μ»€ μ¬μ΄μ§ μ¬μ©μ μν λͺ¨λ² μ¬λ‘
μμ μ°¨μ 쿼리λ₯Ό ν¨κ³Όμ μΌλ‘ νμ©νλ €λ©΄ λ€μ λͺ¨λ² μ¬λ‘λ₯Ό κ³ λ €νμμμ€:
- λͺ¨λ°μΌ μ°μ μΌλ‘ μμνμΈμ: κ°μ₯ μμ 컨ν μ΄λ ν¬κΈ°μ λ§μΆ° μ»΄ν¬λνΈλ₯Ό λ¨Όμ λμμΈνκ³ , λ ν° ν¬κΈ°λ₯Ό μν΄ μ μ§μ μΌλ‘ κ°μ νμΈμ.
- CSS λ³μ μ¬μ©: CSS λ³μλ₯Ό νμ©νμ¬ μ»¨ν μ΄λ μ°¨μμ μ μ₯νκ³ μ λ°μ΄νΈνμΈμ. μ΄λ κ² νλ©΄ μ€νμΌμ λ μ½κ² κ΄λ¦¬νκ³ μ μ§ν μ μμ΅λλ€.
- μ±λ₯ μ΅μ ν: μλ°μ€ν¬λ¦½νΈ κΈ°λ° μ루μ μ μ±λ₯ μν₯μ μ μνμΈμ. κ³Όλν κ³μ°μ νΌνκΈ° μν΄ λ¦¬μ¬μ΄μ¦ μ΄λ²€νΈλ₯Ό λλ°μ΄μ€νκ±°λ μ€λ‘νλ§νμΈμ.
- μ² μ ν ν μ€νΈ: λ€μν κΈ°κΈ°μ νλ©΄ ν¬κΈ°μμ μ»΄ν¬λνΈλ₯Ό ν μ€νΈνμ¬ μ¬λ°λ₯΄κ² μ μνλμ§ νμΈνμΈμ.
- μ κ·Όμ± κ³ λ €: ν¬κΈ°λ λ μ΄μμμ κ΄κ³μμ΄ μ₯μ κ° μλ μ¬μ©μκ° μ»΄ν¬λνΈμ μ κ·Όν μ μλλ‘ λ³΄μ₯νμΈμ.
- μ κ·Ό λ°©μ λ¬Έμν: λ€λ₯Έ κ°λ°μλ€μ΄ μ½λλ₯Ό μ΄ν΄νκ³ μ μ§ν μ μλλ‘ μ΅μ»€ μ¬μ΄μ§ μ λ΅μ λͺ ννκ² λ¬ΈμννμΈμ.
κΈλ‘λ² κ³ λ €μ¬ν
κΈλ‘λ² μ¬μ©μλ₯Ό λμμΌλ‘ μ΅μ»€ μ¬μ΄μ§μ ꡬνν λλ λ€μ μμλ₯Ό κ³ λ €νλ κ²μ΄ μ€μν©λλ€:
- μΈμ΄ μ§μ: μ»΄ν¬λνΈκ° λ€μν μΈμ΄μ ν μ€νΈ λ°©ν₯(μ: μΌμͺ½μμ μ€λ₯Έμͺ½, μ€λ₯Έμͺ½μμ μΌμͺ½)μ μ§μνλμ§ νμΈνμΈμ.
- μ§μμ μ°¨μ΄: λμμΈ μ νΈλ λ° λ¬Ένμ κ·λ²μ μ§μμ μ°¨μ΄λ₯Ό μΈμ§νμΈμ.
- μ κ·Όμ± νμ€: WCAG(μΉ μ½ν μΈ μ κ·Όμ± κ°μ΄λλΌμΈ)μ κ°μ κ΅μ μ κ·Όμ± νμ€μ μ€μνμΈμ.
- μ±λ₯ μ΅μ ν: λ€μν λ€νΈμν¬ μ‘°κ±΄κ³Ό κΈ°κΈ° μ±λ₯μ λ§κ² μ½λλ₯Ό μ΅μ ννμΈμ.
- μ¬λ¬ λ‘μΌμΌμμ ν μ€νΈ: μ§μλλ λͺ¨λ μΈμ΄μ μ§μμμ μ»΄ν¬λνΈκ° μ¬λ°λ₯΄κ² νμλλμ§ νμΈνκΈ° μν΄ μ¬λ¬ λ‘μΌμΌμμ ν μ€νΈνμΈμ.
μλ₯Ό λ€μ΄, μ£Όμλ₯Ό νμνλ μΉ΄λ μ»΄ν¬λνΈλ μ¬μ©μμ μμΉμ λ°λΌ λ€λ₯Έ μ£Όμ νμμ μ μν΄μΌ ν μ μμ΅λλ€. λ§μ°¬κ°μ§λ‘, λ μ§ μ ν μμ ―μ λ€λ₯Έ λ μ§ νμκ³Ό λ¬λ ₯μ μ§μν΄μΌ ν μ μμ΅λλ€.
λ°μν λμμΈμ λ―Έλ
CSS μ΅μ»€ μ¬μ΄μ§μ λ°μν λμμΈμ μ§νμ μμ΄ μ€μν μ§μ μ λνλ λλ€. μ»΄ν¬λνΈκ° 컨ν μ΄λμ μ°¨μμ μ μν μ μκ² ν¨μΌλ‘μ¨ κ°λ°μλ λ μ μ°νκ³ , μ¬μ¬μ© κ°λ₯νλ©°, μ μ§λ³΄μνκΈ° μ¬μ΄ μ½λλ₯Ό λ§λ€ μ μμ΅λλ€.
λ€μ΄ν°λΈ μμ μ°¨μ 쿼리μ λν λΈλΌμ°μ μ§μμ΄ ν₯μλ¨μ λ°λΌ, μ΄ κ°λ ₯ν κΈ°μ μ λμ± νμ μ μ΄κ³ μ°½μμ μΈ μ¬μ©μ κΈ°λν μ μμ΅λλ€. λ°μν λμμΈμ λ―Έλλ κΈ°κΈ°λ νλ©΄ ν¬κΈ°μ κ΄κ³μμ΄ μ£Όλ³ νκ²½μ μλ²½νκ² μ μνκ³ μ§μ μΌλ‘ 컨ν μ€νΈλ₯Ό μΈμνλ μ»΄ν¬λνΈλ₯Ό λ§λλ κ²μ λλ€.
κ²°λ‘
μμ μ°¨μ μΏΌλ¦¬λ‘ κ°νλ CSS μ΅μ»€ μ¬μ΄μ§μ μ§μ μΌλ‘ λ°μνμ΄κ³ μ μνμΈ μΉ μ»΄ν¬λνΈλ₯Ό λ§λλ κ°λ ₯ν μ κ·Όλ²μ μ 곡ν©λλ€. νμ€νμ λ€μ΄ν°λΈ λΈλΌμ°μ μ§μμ΄ μμ§ μ§ν μ€μ΄μ§λ§, μ€λλ μ¬μ© κ°λ₯ν κΈ°μ κ³Ό ν΄λ¦¬νμ μ μ¬ν κΈ°λ₯μ λ¬μ±νκΈ° μν μ€ν κ°λ₯ν μ루μ μ μ 곡ν©λλ€. μ΅μ»€ μ¬μ΄μ§μ μ±νν¨μΌλ‘μ¨, λ μ΄μμμ λν μλ‘μ΄ μμ€μ μ μ΄λ₯Ό ν보νκ³ κ° μ»΄ν¬λνΈμ νΉμ 컨ν μ€νΈμ λ§λ μ¬μ©μ κ²½νμ λ§λ€ μ μμ΅λλ€.
μ΅μ»€ μ¬μ΄μ§ μ¬μ μ μμνλ©΄μ μ¬μ©μ κ²½ν, μ κ·Όμ±, μ±λ₯μ μ°μ μνλ κ²μ κΈ°μ΅νμμμ€. μ΄λ¬ν μμλ₯Ό μ μ€νκ² κ³ λ €ν¨μΌλ‘μ¨ μκ°μ μΌλ‘ λ§€λ ₯μ μΌ λΏλ§ μλλΌ μ μΈκ³ μ¬μ©μκ° κΈ°λ₯μ μΌλ‘ μ¬μ©νκ³ μ κ·Όν μ μλ μΉ μ ν리μΌμ΄μ μ λ§λ€ μ μμ΅λλ€.