κ°μ²΄ κ³ κΈ
11. μμ(extends) μ€λ³΅λλ μ½λλ₯Ό μμνμ¬ λͺ¨λ μ€μ΄λ κ²
12. super λΆλͺ¨κ° κ°μ§κ³ μλ κΈ°λ₯μ μ¬μ©ν μ μλ κ²(super.sum)
μ€νλ¦°νΈ νκ³ νΉκ°
μμΉμ§μ λͺ»νλ€κ³ νΌλλ μ΄μ ? νΌλλ°±μ 1λ μ 1-2λ² λ°κΈ° λλ¬Έμ κ΅μ ν κΈ°νκ° 1-2λ² λ°μ μλλ€.
λλ§μ μκΉμ λμκ² λ°©ν₯μ±μ μν λμΉ¨λ°μ΄ λκ³ , λ€λ₯Έ μ¬λλ€μκ²λ μκ°μ μ€λ€.
νλ₯ν μμ§λμ΄λ?
1. μ’μ μ½λλ₯Ό μ§ λ€.(μλλ₯Ό λλ¬λ΄λ λ€μ΄λ°, μ¬μ¬μ©μ±μ΄ λμ μ½λ, μ±λ₯μ κ³ λ €ν μ€κ³, λ²κ·Έ μ΅μν, μλ―Έμλ ν μ€νΈ μ½λ)
2. μμ μ νμ¬ κ°μΉλ₯Ό κ·Ήλννλ€.(μ μ μ½λ, μ½λ μμ΄ λ¬Έμ λ₯Ό ν΄κ²°νκ³ κΈ°λ₯μ λμνλ νλ‘κ·Έλ¨μ λ§λλ μλ)
3. λ°μ΄ν°μ κΈ°λ°νμ¬ μμ¬ κ²°μ νλ€.
4. λλ£μ ν¨κ³Όμ μΈ μμ¬ κ²°μ μ λλλ€.
5. κΎΈμ€ν νμ΅νλ€ (λλ§μ λλν νμ΅ λ°©μκ³Ό 체κ³κ° λ§λ€μ΄μ§κ³ μλκ°?, μ΄μ μ κ²½ν μμμ μ΄λ»κ² λ΄κ° ν¨κ³Όμ μΌλ‘ νμ΅νλ €κ³ νλμ§?)
μ¬λ―Έ => μλμ§
μνλ μ¬λλ€μ μμ μ΄ νλ κ²λ€μ μ’μνκ³ μ¬λ°κ² λ§λ€κ³ , ν¬κ² κ΄΄λ‘μ νμ§ μλλ€.
ν΅μ¬μ μ’μν λ§ν μ¬λ°μλ§ν μμλ₯Ό λμμΈ ν΄μ νμ΅κ³Ό μ±μ₯ κ³Όμ μ λ Ήμ¬λ΄λ ν¬μΈνΈ(λ΄κ° μ’μνλ μ¬λμ΄λ κ°μ΄ νλ κ±°)
μ λ¬Έμ±
μ΄λ»κ² νλ©΄ λ λλνκ² μ¬λ¦΄ μ μμκΉ?
λλ§μ κ²½νκ³Ό λ°©λ²μ λ§λ€μ΄κ°κΈ°.
μ묡μ§μ λͺ λͺ©μ§ 2κ°μ§λ₯Ό κ°μ΄ μ΅λνλ €κ³ ν΄μΌνλ€.
μ묡μ§: λ§λ‘νκΈ° μ΄λ €μ΄ κ²λ€. μμ κ±° ν λ κ· νμ μ‘λ λλμ΄λ νλ¬μ λ°λ κ°κ°.
- λ²κ·Έλ₯Ό λ°κ²¬νλ κ³Όμ μ΄λ μ λ΅, ꡬκΈλ§ νλ λ°©λ²κ³Ό μ λ΅
λͺ λͺ©μ§: μ± μ΄λ κΈλ‘ μ 리λ κ²λ€, λ μνΌ
μμ μ±
루ν΄μ΄ μμ μ μ΄κΈ° λλ¬Έ,μ΄λ»κ² νλ©΄ λλνκ² μ΅κ΄μ λ§λ€ μ μμκΉ
ν볡, 건κ°
ν볡νλ ₯μ±
λ₯λμ μΈ ν΄μ λ νν 리λ₯Ό λ§λ€ μ μλ κ² μ€μ. λ΄κ° λ νκ³ λλ©΄ μλμ§κ° μ¬λΌκ°λκ°? (λ°©μ²μ, μ°μ± , μ리 λ±)
CSS μμ
μ΄κΈ°κ° μ΄λ»κ² μ€μ ??
body {
margin: initial; λͺ μμ μΌλ‘ νκΈ°ν¨μΌλ‘μ¨ λ΄ μλλ₯Ό λͺ νν νλ€.
}
.div {
}
=> μμ * (universal selector) μ΄ μλ΅λμ΄μλ€. κ·Έλμ CSSμμ .divλ₯Ό μ λ ₯νλ©΄ div μ λΆλ₯Ό λΆλ¬μ€λ κ².
.wrap = any wrap
div.wrap = div wrap
<header>μ <footer>λ μ¬λ¬λ² μμ±ν μ μλ νκ·Έμ΄λ€. λλ¬Έμ classλ‘ λ¬Άμ΄μ£Όκ³ , λͺ λͺ ν νμκ° μλ€.
inherit, initial, unset
inherit: μμ λ°μ κ²
initial: μ΄κΈ°κ°μΌλ‘ ν κ²
unset: μμμ λ°λ κ±°λ©΄ λ°κ³ , μλλ©΄ μ΄κΈ°κ° ν κ².
descendant combinator
[1214 ν ν·] CSS :: Flex μ 볡νκΈ° (0) | 2023.12.14 |
---|---|
[1213 ν ν·] (0) | 2023.12.14 |
[ν ν· 1211] CSS (1) | 2023.12.11 |
[ν ν· 1206] CSS box model (2) | 2023.12.07 |
[ν ν·] 1205 (0) | 2023.12.06 |