CSS @layerμ λν μ¬μΈ΅ λΆμ, μ±λ₯ μν₯ λΆμ λ° μ μΈκ³μ μΌλ‘ λ λΉ λ₯Έ μΉ λ λλ§μ μν λ μ΄μ΄ μ²λ¦¬ μ€λ²ν€λ μ΅μ ν μ λ΅ μ 곡.
CSS @layer μ±λ₯ μν₯: λ μ΄μ΄ μ²λ¦¬ μ€λ²ν€λ λΆμ
CSS μΊμ€μΌμ΄λ λ μ΄μ΄(@layer)μ λμ
μ CSS νΉμμ±κ³Ό ꡬ쑰λ₯Ό κ΄λ¦¬νλ κ°λ ₯ν λ©μ»€λμ¦μ μ 곡ν©λλ€. νμ§λ§ ν° νμλ ν° μ±
μμ΄ λ°λ¦
λλ€. @layerμ μ μ¬μ μΈ μ±λ₯ μν₯μ μ΄ν΄νκ³ μ¬μ©μ μ΅μ ννλ κ²μ μ μΈκ³ μ¬μ©μμκ² λΉ λ₯΄κ³ ν¨μ¨μ μΈ μΉ κ²½νμ μ μ§νλ λ° λ§€μ° μ€μν©λλ€.
CSS μΊμ€μΌμ΄λ λ μ΄μ΄λ 무μμΈκ°μ?
CSS μΊμ€μΌμ΄λ λ μ΄μ΄λ₯Ό ν΅ν΄ κ°λ°μλ CSS κ·μΉμ λ Όλ¦¬μ μΈ λ μ΄μ΄λ‘ κ·Έλ£Ήννμ¬ μΊμ€μΌμ΄λ μμμ μν₯μ μ£Όκ³ μ€νμΌλ§μ λ μΈλ°νκ² μ μ΄ν μ μμ΅λλ€. μ΄λ 볡μ‘ν μ€νμΌμνΈ, νμ¬ λΌμ΄λΈλ¬λ¦¬ λ° ν λ§λ₯Ό μ¬μ©νλ λκ·λͺ¨ νλ‘μ νΈμμ νΉν μ μ©ν©λλ€.
κΈ°λ³Έμ μΈ μλ λ€μκ³Ό κ°μ΅λλ€.
@layer base, components, overrides;
@layer base {
body { font-family: sans-serif; }
}
@layer components {
button { padding: 10px 20px; border: none; }
}
@layer overrides {
button { background-color: red; color: white; }
}
μ΄ μμμ overrides λ μ΄μ΄μ μ€νμΌμ components λ μ΄μ΄λ³΄λ€ μ°μ νλ©°, components λ μ΄μ΄λ base λ μ΄μ΄λ³΄λ€ μ°μ ν©λλ€. μ΄λ₯Ό ν΅ν΄ κ°λ°μλ νΉμμ± ν΄νΉμλ§ μμ‘΄νμ§ μκ³ κΈ°λ³Έ μ€νμΌμ μ½κ² μ¬μ μν μ μμ΅λλ€.
CSS @layerμ μ μ¬μ μ±λ₯ ν¨μ
@layerλ μλΉν μ΄μ μ μ 곡νμ§λ§, μ μ¬μ μΈ μ±λ₯ μν₯μ μΈμ§νλ κ²μ΄ μ€μν©λλ€. λΈλΌμ°μ λ μ΄λ¬ν λ μ΄μ΄λ₯Ό μ²λ¦¬νκ³ κ΄λ¦¬ν΄μΌ νλ©°, νΉν 볡μ‘ν μλ리μ€μμλ μ€λ²ν€λκ° λ°μν μ μμ΅λλ€.
1. μ€νμΌ μ¬κ³μ° μ¦κ°
λΈλΌμ°μ κ° νμ΄μ§λ₯Ό λ λλ§νκ±°λ λ€μ λ λλ§ν λλ§λ€ μ€νμΌ μ¬κ³μ°μ μνν©λλ€. μ¬κΈ°μλ μ΄λ€ CSS κ·μΉμ΄ νμ΄μ§μ κ° μμμ μ μ©λλμ§ κ²°μ νλ κ³Όμ μ΄ ν¬ν¨λ©λλ€. @layerλ₯Ό μ¬μ©νλ©΄ λΈλΌμ°μ λ λ μ΄μ΄ κ³μΈ΅ ꡬ쑰λ₯Ό κ³ λ €ν΄μΌ νλ©°, μ€νμΌ μ¬κ³μ°μ νμν 볡μ‘μ±κ³Ό μκ°μ μ¦κ°μν¬ μ μμ΅λλ€.
μλ리μ€: κΉκ² μ€μ²©λ μ»΄ν¬λνΈμ μ¬λ¬ λ μ΄μ΄μ λΆμ°λ μλ§μ CSS κ·μΉμ΄ μλ 볡μ‘ν μΉ μ ν리μΌμ΄μ μ μμν΄ λ³΄μΈμ. ν λ μ΄μ΄μ μμ λ³κ²½μ΄ μ 체 κ³μΈ΅ ꡬ쑰μ κ±Έμ³ μ¬κ³μ°μ μ°μ λ°μμ μΌμΌμΌ λμ λλ μ±λ₯ μ νλ‘ μ΄μ΄μ§ μ μμ΅λλ€.
μμ: μ ν νμ, μ¬μ©μ μΈν°νμ΄μ€ λ° λΈλλ©μ μν λ μ΄μ΄λ μ€νμΌμ κ°μΆ λκ·λͺ¨ μ μμκ±°λ μΉμ¬μ΄νΈ. μ¬μ΄νΈ μ 체μ κΈκΌ΄ ν¬κΈ°μ μν₯μ λ―ΈμΉλ κΈ°λ³Έ λ μ΄μ΄λ₯Ό μμ νλ©΄ μ¬κ³μ° μκ°μ΄ ν¬κ² λμ΄λ μ¬μ©μ κ²½νμ μν₯μ λ―ΈμΉ μ μμΌλ©°, νΉν μ μΈκ³ μΌλΆ μ§μμμ νν λ³Ό μ μλ μ μ¬μ κΈ°κΈ°λ λλ¦° λ€νΈμν¬ μ°κ²°μμ λμ± κ·Έλ μ΅λλ€.
2. λ©λͺ¨λ¦¬ μ€λ²ν€λ
λΈλΌμ°μ λ κ° λ μ΄μ΄μ κ΄λ ¨ μ€νμΌ μ 보λ₯Ό μ μ₯νκ³ κ΄λ¦¬ν΄μΌ ν©λλ€. μ΄λ νΉν λ§μ μμ λ μ΄μ΄ λλ 볡μ‘ν μ€νμΌ κ·μΉμ μ²λ¦¬ν λ λ©λͺ¨λ¦¬ μ¬μ©λμ΄ μ¦κ°ν μ μμ΅λλ€.
μλ리μ€: κ° λΌμ΄λΈλ¬λ¦¬κ° μ체 λ μ΄μ΄ μ§ν©μ μ μν μ μλ λ°©λν νμ¬ λΌμ΄λΈλ¬λ¦¬λ₯Ό κ΄λ²μνκ² μ¬μ©νλ μΉ μ ν리μΌμ΄μ μ μλΉν λ©λͺ¨λ¦¬ μ€λ²ν€λλ₯Ό κ²½νν μ μμ΅λλ€. μ΄λ λ©λͺ¨λ¦¬ 리μμ€κ° μ νλ λͺ¨λ°μΌ μ₯μΉμμ νΉν λ¬Έμ κ° λ μ μμ΅λλ€.
μμ: λ€μν μμ€μ μμ ― λ° νλ¬κ·ΈμΈμ ν΅ν©νλ κΈλ‘λ² λ΄μ€ ν¬νΈμ μκ°ν΄ 보μΈμ. κ° μμ ― λ° νλ¬κ·ΈμΈμ μ체 λ μ΄μ΄λ CSSλ₯Ό μ¬μ©ν©λλ€. μ΄λ¬ν λ μ΄μ΄μ κ²°ν©λ λ©λͺ¨λ¦¬ μ¬μ©λμ μ¬μ΄νΈμ μ λ°μ μΈ μ±λ₯μ λΆμ μ μΈ μν₯μ λ―ΈμΉ μ μμΌλ©°, νΉν RAMμ΄ μ νλ ꡬν μ€λ§νΈν°μ΄λ νλΈλ¦Ώμμ μ¬μ΄νΈμ μ‘μΈμ€νλ μ¬μ©μμκ² λμ± κ·Έλ μ΅λλ€.
3. νμ± μκ° μ¦κ°
λΈλΌμ°μ λ CSS μ½λλ₯Ό νμ±νκ³ λ μ΄μ΄μ λ΄λΆ ννμ ꡬμ±ν΄μΌ ν©λλ€. 볡μ‘ν λ μ΄μ΄ μ μμ κΉλ€λ‘μ΄ μ€νμΌ κ·μΉμ νμ± μκ°μ λλ € νμ΄μ§μ μ΄κΈ° λ λλ§μ μ§μ°μν¬ μ μμ΅λλ€.
μλ리μ€: κΉκ² μ€μ²©λ λ μ΄μ΄μ 볡μ‘ν μ νκΈ°λ₯Ό κ°μ§ λκ·λͺ¨ CSS νμΌμ νμ± μκ°μ ν¬κ² λλ € μ΅μ΄ μ½ν μΈ νμΈνΈ(FCP) λ° μ΅λ μ½ν μΈ νμΈνΈ(LCP)λ₯Ό μ§μ°μν¬ μ μμ΅λλ€. μ΄λ νΉν λλ¦° λ€νΈμν¬ μ°κ²°μμ μ¬μ©μ μ²΄κ° μ±λ₯μ λΆμ μ μΈ μν₯μ λ―ΈμΉ μ μμ΅λλ€.
μμ: 볡μ‘ν λ μ΄μμκ³Ό μ€νμΌλ§μ κ°μΆ λνν κ³Όμ μ μ 곡νλ μ¨λΌμΈ κ΅μ‘μ© μΉ μ ν리μΌμ΄μ . CSSκ° κ³Όλν λ μ΄μ΄λ§ λ° λ³΅μ‘ν μ νκΈ°λ‘ μ΅μ νλμ§ μμ κ²½μ° νμ± μκ°μ΄ μλΉν μ μμΌλ©°, μ΄κΈ° κ³Όμ μ½ν μΈ νμκ° μ§μ°λμ΄ μ νλ λμνμ κ°μ§ μ§μμ νμλ€μ νμ΅ κ²½νμ λ°©ν΄ν©λλ€.
@layer μ±λ₯ λΆμ: λꡬ λ° κΈ°μ
@layerμ μ±λ₯ μν₯μ μ΄ν΄νκ³ μννλ €λ©΄ λΆμ λ° μ΅μ νλ₯Ό μν μ μ ν λꡬμ κΈ°μ μ μ¬μ©νλ κ²μ΄ μ€μν©λλ€.
1. λΈλΌμ°μ κ°λ°μ λꡬ
μ΅μ λΈλΌμ°μ κ°λ°μ λꡬλ CSS μ±λ₯μ λν κ·μ€ν ν΅μ°°λ ₯μ μ 곡ν©λλ€. Chrome, Firefox λ° Safariμ "Performance" ν¨λμ μ¬μ©νλ©΄ μ€νμΌ μ¬κ³μ° λ° λ λλ§ μκ°μ ν¬ν¨ν λΈλΌμ°μ νλ νμλΌμΈμ κΈ°λ‘ν μ μμ΅λλ€.
μ¬μ© λ°©λ²:
- λΈλΌμ°μ μμ κ°λ°μ λꡬλ₯Ό μ½λλ€ (μΌλ°μ μΌλ‘ F12 ν€λ₯Ό λλ¦).
- "Performance" ν¨λλ‘ μ΄λν©λλ€.
- "Record" λ²νΌμ ν΄λ¦νκ³ μΉ νμ΄μ§μ μνΈ μμ©ν©λλ€.
- λ Ήνλ₯Ό μ€μ§νκ³ νμλΌμΈμ λΆμν©λλ€.
μ€νμΌ μ¬κ³μ° λ° λ λλ§ μκ°μ λνλ΄λ κΈ΄ λ§λλ₯Ό μ°Ύμ΅λλ€. @layerκ° μ±λ₯ λ³λͺ© νμμ κΈ°μ¬ν μ μλ μμμ μλ³ν©λλ€.
μμ: λ¨μΌ νμ΄μ§ μ ν리μΌμ΄μ μ μ±λ₯ νμλΌμΈμ λΆμνλ©΄ μ¬μ©μ μνΈ μμ© ν μ€νμΌ μ¬κ³μ°μ μλΉν μκ°μ΄ μμλλ κ²μ μ μ μμ΅λλ€. μΆκ° μ‘°μ¬λ₯Ό ν΅ν΄ κΈ°λ³Έ λ μ΄μ΄μ λ³κ²½μΌλ‘ μΈν΄ λ§μ μμ CSS κ·μΉμ΄ μ¬κ³μ°λκ³ μμμ μ μ μμΌλ©°, μ΄λ μ΅μ νμ νμμ±μ κ°μ‘°ν©λλ€.
2. Lighthouse
Lighthouseλ μΉ νμ΄μ§ νμ§μ κ°μ νκΈ° μν μλνλ λꡬμ
λλ€. μ±λ₯, μ κ·Όμ±, λͺ¨λ² μ¬λ‘ λ° SEOμ λν κ°μ¬λ₯Ό μ 곡ν©λλ€. Lighthouseλ @layerμ κ΄λ ¨λ μ μ¬μ μΈ CSS μ±λ₯ λ¬Έμ λ₯Ό μλ³νλ λ° λμμ΄ λ μ μμ΅λλ€.
μ¬μ© λ°©λ²:
- λΈλΌμ°μ μμ κ°λ°μ λꡬλ₯Ό μ½λλ€.
- "Lighthouse" ν¨λλ‘ μ΄λν©λλ€.
- κ°μ¬νλ €λ μΉ΄ν κ³ λ¦¬λ₯Ό μ νν©λλ€ (μ: Performance).
- "Generate report" λ²νΌμ ν΄λ¦ν©λλ€.
Lighthouseλ μΉ νμ΄μ§ μ±λ₯μ κ°μ νκΈ° μν μ μμ΄ ν¬ν¨λ λ³΄κ³ μλ₯Ό μ 곡ν©λλ€. CSS μ΅μ ν λ° λ λλ§ μ±λ₯κ³Ό κ΄λ ¨λ κ°μ¬λ₯Ό μ£Όμ κΉκ² μ΄ν΄λ³΄μΈμ.
μμ: Lighthouseλ μΉμ¬μ΄νΈμ μ΅μ΄ μ½ν μΈ νμΈνΈ(FCP)κ° ν¬κ² μ§μ°λλ€κ³ μλ³ν©λλ€. λ³΄κ³ μλ CSS μ λ¬μ μ΅μ ννκ³ CSS μ νκΈ°μ 볡μ‘μ±μ μ€μΌ κ²μ μ μν©λλ€. μΆκ° λΆμμ λ°λ₯΄λ©΄ κ³Όλν λ μ΄μ΄λ μ€νμΌ μ¬μ©κ³Ό μ§λμΉκ² ꡬ체μ μΈ μ νκΈ°κ° λλ¦° FCPμ κΈ°μ¬νκ³ μμ΅λλ€.
3. CSS κ°μ¬ λꡬ
μ μ© CSS κ°μ¬ λꡬλ μ€νμΌμνΈμμ μ μ¬μ μΈ μ±λ₯ λ¬Έμ λ₯Ό μλ³νλ λ° λμμ΄ λ μ μμ΅λλ€. μ΄λ¬ν λꡬλ CSS μ½λλ₯Ό λΆμνκ³ μ νκΈ° 볡μ‘μ±μ μ€μ΄κ³ μ€λ³΅ κ·μΉμ μ κ±°νλ©° λ μ΄μ΄ μ μλ₯Ό κ°μννλ μ μμ ν¬ν¨νμ¬ μ΅μ νλ₯Ό μν κΆμ₯ μ¬νμ μ 곡ν μ μμ΅λλ€.
μμ:
- CSSLint: CSS μ½λμ μ μ¬μ μΈ λ¬Έμ λ₯Ό μλ³ν μ μλ μΈκΈ° μλ μ€ν μμ€ CSS λ¦°ν°μ λλ€.
- Stylelint: μΌκ΄λ μ½λ© μ€νμΌμ κ°μ νκ³ μ μ¬μ μΈ μ€λ₯ λ° μ±λ₯ λ¬Έμ λ₯Ό μλ³νλ λ° λμμ΄ λλ μ΅μ CSS λ¦°ν°μ λλ€.
μ¬μ© λ°©λ²:
- μ νν CSS κ°μ¬ λꡬλ₯Ό μ€μΉν©λλ€.
- CSS νμΌμ λΆμνλλ‘ λꡬλ₯Ό ꡬμ±ν©λλ€.
- λ³΄κ³ μλ₯Ό κ²ν νκ³ μλ³λ λ¬Έμ λ₯Ό ν΄κ²°ν©λλ€.
μμ: λκ·λͺ¨ μ€νμΌμνΈμμ CSS κ°μ¬ λꡬλ₯Ό μ€ννλ©΄ μ¬λ¬ λ μ΄μ΄ λ΄μμ μλΉν μμ μ€λ³΅ CSS κ·μΉκ³Ό μ§λμΉκ² ꡬ체μ μΈ μ νκΈ°κ° μμμ μ μ μμ΅λλ€. μ΄λ¬ν μ€λ³΅μ μ κ±°νκ³ μ νκΈ°λ₯Ό λ¨μννλ©΄ μ€νμΌμνΈμ μ±λ₯μ ν¬κ² ν₯μμν¬ μ μμ΅λλ€.
@layer μ±λ₯ μ΅μ ν μ λ΅
@layerμ κ΄λ ¨λ μ μ¬μ μΈ μ±λ₯ λ¬Έμ λ₯Ό μλ³ν νμλ λ€μν μ΅μ ν μ λ΅μ ꡬννμ¬ μ€λ²ν€λλ₯Ό μννκ³ μΉ νμ΄μ§μ λ λλ§ μ±λ₯μ κ°μ ν μ μμ΅λλ€.
1. λ μ΄μ΄ μ μ΅μν
λ λ§μ λ μ΄μ΄λ₯Ό μ μν μλ‘ λΈλΌμ°μ λ λ λ§μ μ€λ²ν€λλ₯Ό κ΄λ¦¬ν΄μΌ ν©λλ€. μνλ μμ€μ ꡬ쑰 λ° μ μ΄λ₯Ό λ¬μ±νλ λ° νμν μλ§νΌλ§ λ μ΄μ΄λ₯Ό μ¬μ©νλλ‘ λ Έλ ₯νμΈμ. μλΉν μ΄μ μ μ 곡νμ§ μκ³ λ³΅μ‘μ±λ§ λνλ κ³Όλνκ² μΈλΆνλ λ μ΄μ΄λ₯Ό λ§λλ κ²μ νΌνμΈμ.
μμ: UIμ κ° κ°λ³ μ»΄ν¬λνΈμ λν΄ λ³λμ λ μ΄μ΄λ₯Ό λ§λλ λμ κ΄λ ¨ μ»΄ν¬λνΈλ₯Ό λ¨μΌ λ μ΄μ΄λ‘ κ·Έλ£Ήννλ κ²μ κ³ λ €νμΈμ. μ΄λ κ² νλ©΄ λ μ΄μ΄μ μ 체 μλ₯Ό μ€μ΄κ³ μΊμ€μΌμ΄λλ₯Ό λ¨μνν μ μμ΅λλ€.
2. μ νκΈ° 볡μ‘μ± κ°μ
볡μ‘ν CSS μ νκΈ°λ μ€νμΌ μ¬κ³μ°μ νμν μκ°μ ν¬κ² λ릴 μ μμ΅λλ€. μμ κ³μΈ΅ ꡬ쑰μ μμ‘΄νλ κΉκ² μ€μ²©λ μ νκΈ° λμ ν΄λμ€ μ΄λ¦ λ° IDμ κ°μ΄ λ ν¨μ¨μ μΈ μ νκΈ°λ₯Ό μ¬μ©νμΈμ.
μμ: .container div p { ... }μ κ°μ μ νκΈ°λ₯Ό μ¬μ©νλ λμ .container-paragraph { ... }μ κ°μ΄ λ¨λ½ μμμ νΉμ ν΄λμ€λ₯Ό μΆκ°νλ κ²μ κ³ λ €νμΈμ. μ΄λ κ² νλ©΄ μ νκΈ°κ° λ ν¨μ¨μ μ΄ λκ³ λΈλΌμ°μ κ° κ·μΉμ μΌμΉμν€λ λ° νμν μκ°μ΄ μ€μ΄λλλ€.
3. μ€μ²©λλ λ μ΄μ΄ νΌνκΈ°
μ€μ²©λλ λ μ΄μ΄λ λͺ¨νΈν¨μ λ§λ€κ³ μΊμ€μΌμ΄λμ 볡μ‘μ±μ μ¦κ°μν¬ μ μμ΅λλ€. λ μ΄μ΄κ° μ μ μλμ΄ μκ³ λ μ΄μ΄ κ°μ μ€μ²©μ΄ μ΅μνλλλ‘ νμΈμ. μ΄λ κ² νλ©΄ μΊμ€μΌμ΄λ μμλ₯Ό λ μ½κ² μ΄ν΄ν μ μκ³ μμμΉ λͺ»ν μ€νμΌ μΆ©λ κ°λ₯μ±μ΄ μ€μ΄λλλ€.
μμ: λμΌν μμμ λν μ€νμΌμ μ μνλ λ κ°μ λ μ΄μ΄κ° μλ κ²½μ°, μ΄λ€ μ€νμΌμ΄ μ°μ ν΄μΌ νλμ§ λͺ ννκ² μ μνλ μμλ‘ λ μ΄μ΄κ° μ λ ¬λλλ‘ νμΈμ. μΊμ€μΌμ΄λ μμκ° λΆλΆλͺ νκ±°λ λͺ¨νΈν μν©μ νΌνμΈμ.
4. μ€μ CSS μ°μ μμ μ§μ
μΉ νμ΄μ§μ μ΄κΈ° λ·°ν¬νΈλ₯Ό λ λλ§νλ λ° νμμ μΈ CSS κ·μΉμ μλ³νκ³ μ λ¬μ μ°μ μμλ₯Ό μ§μ νμΈμ. μ΄λ μ€μ CSSλ₯Ό HTML λ¬Έμμ μ§μ μΈλΌμΈνκ±°λ HTTP/2 μλ² νΈμμ κ°μ κΈ°μ μ μ¬μ©νμ¬ λ λλ§ νλ‘μΈμ€ μ΄κΈ°μ μ€μ CSSλ₯Ό μ 곡νμ¬ λ¬μ±ν μ μμ΅λλ€.
μμ: CriticalCSSμ κ°μ λꡬλ₯Ό μ¬μ©νμ¬ μΉ νμ΄μ§μ 보μ΄λ μμμ λ λλ§νλ λ° νμν CSS κ·μΉμ μΆμΆνμΈμ. μ΄λ¬ν κ·μΉμ HTML λ¬Έμμ μ§μ μΈλΌμΈνμ¬ μ΄κΈ° λ·°ν¬νΈκ° λΉ λ₯΄κ² λ λλ§λλλ‘ νμΈμ.
5. λ μ΄μ΄ μμ λ° νΉμμ± κ³ λ €
λ μ΄μ΄κ° μ μλλ μμμ κ° λ μ΄μ΄ λ΄ κ·μΉμ νΉμμ±μ μΊμ€μΌμ΄λμ μλΉν μν₯μ λ―ΈμΉ©λλ€. μνλ μ€νμΌμ΄ μ°μ νλλ‘ λ μ΄μ΄ μμλ₯Ό μ μ€νκ² κ³ λ €νμΈμ. λ€λ₯Έ λ μ΄μ΄μ μν΄ μ¬μ μλ μλκ° μλ λ μ΄μ΄μμ μ§λμΉκ² ꡬ체μ μΈ μ νκΈ°λ₯Ό μ¬μ©νλ κ²μ νΌνμΈμ.
μμ: κΈ°λ³Έ μ€νμΌμ λν λ μ΄μ΄μ μ¬μ μμ λν λ μ΄μ΄κ° μλ κ²½μ°, μ¬μ μ λ μ΄μ΄κ° κΈ°λ³Έ μ€νμΌ λ μ΄μ΄ λ€μ μ μλλλ‘ νμΈμ. λν κΈ°λ³Έ μ€νμΌ λ μ΄μ΄μμ μ§λμΉκ² ꡬ체μ μΈ μ νκΈ°λ₯Ό μ¬μ©νλ κ²μ νΌνμΈμ. μ΄λ κ² νλ©΄ μ¬μ μ λ μ΄μ΄μμ μ΄λ₯Ό μ¬μ μνκΈ° μ΄λ €μΈ μ μμ΅λλ€.
6. νλ‘νμΌλ§ λ° μΈ‘μ
κ°μ₯ μ€μν λ¨κ³λ μ ν리μΌμ΄μ
μ νλ‘νμΌλ§νκ³ @layer μ¬μ©μ μ€μ μν₯μ μΈ‘μ νλ κ²μ
λλ€. κ°μ μ μμ‘΄νμ§ λ§κ³ , λΈλΌμ°μ κ°λ°μ λꡬλ₯Ό μ¬μ©νμ¬ λ³λͺ© νμμ μλ³νκ³ μ΅μ νκ° μ€μ λ‘ μ±λ₯μ κ°μ νκ³ μλμ§ νμΈνμΈμ.
μμ: μ΅μ ν μ λ΅μ ꡬννκΈ° μ νμ λΈλΌμ°μ κ°λ°μ λꡬμ Performance ν¨λμ μ¬μ©νμ¬ μΉ νμ΄μ§μ λ λλ§ μ±λ₯μ κΈ°λ‘νμΈμ. νμλΌμΈμ λΉκ΅νμ¬ μ΅μ νκ° λ λλ§ μκ°μμ μΈ‘μ κ°λ₯ν κ°μ μ κ°μ Έμλμ§ νμΈνμΈμ.
7. νΈλ¦¬ μμ΄νΉ λ° λ―Έμ¬μ© CSS μ κ±°
λꡬλ₯Ό μ¬μ©νμ¬ νλ‘μ νΈμμ μ¬μ©νμ§ μλ CSSλ₯Ό μ κ±°νμΈμ. μ΄λ κ² νλ©΄ λΈλΌμ°μ κ° νμ±νκ³ μ²λ¦¬ν΄μΌ νλ μ½λμ μμ΄ μ€μ΄λ€μ΄ μ±λ₯μ΄ ν₯μλ©λλ€. Webpack, Parcel λ° Rollupκ³Ό κ°μ μ΅μ λΉλ λꡬμλ μ¬μ©νμ§ μλ CSSλ₯Ό μλμΌλ‘ μλ³νκ³ μ κ±°νλ νλ¬κ·ΈμΈμ΄ μμ΅λλ€.
μμ: PurgeCSS λλ UnCSSλ₯Ό λΉλ νλ‘μΈμ€μ ν΅ν©νμ¬ νλ‘λμ λΉλμμ μ¬μ©νμ§ μλ CSS κ·μΉμ μλμΌλ‘ μ κ±°νμΈμ. μ΄λ κ² νλ©΄ CSS νμΌ ν¬κΈ°κ° ν¬κ² μ€μ΄λ€κ³ λ λλ§ μ±λ₯μ΄ ν₯μλ μ μμ΅λλ€.
8. λ€μν μ₯μΉ λ° λ€νΈμν¬ μ‘°κ±΄μ μ΅μ ν
λ€μν μ₯μΉ λ° λ€νΈμν¬ μ‘°κ±΄μμ @layerμ μ±λ₯ μν₯μ κ³ λ €νμΈμ. μ²λ¦¬ λ₯λ ₯μ΄ μ νμ μ΄κ³ λ€νΈμν¬ μ°κ²° μλκ° λλ¦° λͺ¨λ°μΌ μ₯μΉλ μ±λ₯ λ¬Έμ μ λ μ·¨μ½ν μ μμ΅λλ€. CSS λ° λ μ΄μ΄ μ μλ₯Ό μ΅μ ννμ¬ μΉ νμ΄μ§κ° λ€μν μ₯μΉ λ° λ€νΈμν¬ μ‘°κ±΄μμ μ μλνλλ‘ νμΈμ. μ¬μ©μ μ₯μΉ λ° νλ©΄ ν¬κΈ°μ λ°λΌ μΉ νμ΄μ§μ μ€νμΌ λ° λ μ΄μμμ μ‘°μ νκΈ° μν΄ λ°μν λμμΈ μμΉμ ꡬννμΈμ.
μμ: λ―Έλμ΄ μΏΌλ¦¬λ₯Ό μ¬μ©νμ¬ μ₯μΉμ νλ©΄ ν¬κΈ° λ° ν΄μλμ λ°λΌ λ€λ₯Έ μ€νμΌμ μ μ©νμΈμ. μ΄λ κ² νλ©΄ λ€μν μ₯μΉμ λν μ€νμΌμ μ΅μ ννκ³ νμνμ§ μμ μ₯μΉμμ λΆνμν CSS κ·μΉμ΄ μ μ©λλ κ²μ λ°©μ§ν μ μμ΅λλ€. λν μ¬μ©μμ λ€νΈμν¬ μ°κ²° μλμ λ°λΌ λ€λ₯Έ CSS νμΌμ λ‘λνκΈ° μν΄ μ μν λ‘λ©κ³Ό κ°μ κΈ°μ μ κ³ λ €νμΈμ.
μ€μ μ¬λ‘ λ° μ¬λ‘ μ°κ΅¬
@layerκ° μ±λ₯μ μ΄λ»κ² μν₯μ λ―ΈμΉκ³ μ΄λ₯Ό μ΅μ ννλ λ°©λ²μ λν λͺ κ°μ§ μ€μ μ¬λ‘λ₯Ό μ΄ν΄λ³΄κ² μ΅λλ€.
μ¬λ‘ 1: λκ·λͺ¨ μ μμκ±°λ μΉμ¬μ΄νΈ
λκ·λͺ¨ μ μμκ±°λ μΉμ¬μ΄νΈλ @layerλ₯Ό μ¬μ©νμ¬ μ μ μ€νμΌ, μ»΄ν¬λνΈλ³ μ€νμΌ λ° ν
λ§ μ¬μ μλ₯Ό κ΄λ¦¬ν©λλ€. μ΄κΈ° ꡬνμΌλ‘ μΈν΄ νΉν 볡μ‘ν λ μ΄μμμ μ ν νμ΄μ§μμ λ λλ§ μλκ° λλ €μ‘μ΅λλ€.
μ΅μ ν μ λ΅:
- κ΄λ ¨ μ»΄ν¬λνΈ μ€νμΌμ λ μ μ λ μ΄μ΄λ‘ ν΅ν©νμ¬ λ μ΄μ΄ μλ₯Ό μ€μμ΅λλ€.
- CSS μ νκΈ°λ₯Ό μ΅μ ννμ¬ λ³΅μ‘μ±μ μ€μμ΅λλ€.
- μ ν νμ΄μ§μ λν μ€μ CSSλ₯Ό μ°μ μμλ‘ μ§μ νμ΅λλ€.
- νΈλ¦¬ μμ΄νΉμ μ¬μ©νμ¬ μ¬μ©νμ§ μλ CSSλ₯Ό μ κ±°νμ΅λλ€.
κ²°κ³Ό: λ λλ§ μκ°μ΄ 30% ν₯μλμκ³ CSS νμΌ ν¬κΈ°κ° 20% κ°μνμ΅λλ€.
μ¬λ‘ 2: λ¨μΌ νμ΄μ§ μ ν리μΌμ΄μ (SPA)
λ¨μΌ νμ΄μ§ μ ν리μΌμ΄μ
μ @layerλ₯Ό μ¬μ©νμ¬ λ€μν λ·° λ° μ»΄ν¬λνΈμ μ€νμΌμ κ΄λ¦¬ν©λλ€. μ΄κΈ° ꡬνμΌλ‘ μΈν΄ λ©λͺ¨λ¦¬ μ¬μ©λμ΄ μ¦κ°νκ³ μ€νμΌ μ¬κ³μ° μκ°μ΄ λλ €μ‘μ΅λλ€.
μ΅μ ν μ λ΅:
- κ° λ μ΄μ΄μ λ²μλ₯Ό μ μ€νκ² μ μνμ¬ μ€μ²©λλ λ μ΄μ΄λ₯Ό νΌνμ΅λλ€.
- μνλ μ€νμΌμ΄ μ°μ νλλ‘ λ μ΄μ΄ μμλ₯Ό μ΅μ ννμ΅λλ€.
- μ½λ λΆν μ μ¬μ©νμ¬ νμν κ²½μ°μλ§ CSS νμΌμ λ‘λνμ΅λλ€.
κ²°κ³Ό: λ©λͺ¨λ¦¬ μ¬μ©λμ΄ 15% κ°μνκ³ μ€νμΌ μ¬κ³μ° μκ°μ΄ 25% ν₯μλμμ΅λλ€.
μ¬λ‘ 3: κΈλ‘λ² λ΄μ€ ν¬νΈ
κΈλ‘λ² λ΄μ€ ν¬νΈμ λ€μν μμ€μ μμ ― λ° νλ¬κ·ΈμΈμ ν΅ν©νλ©°, κ° μμ€λ μ체 λ μ΄μ΄λ CSSλ₯Ό μ¬μ©ν©λλ€. μ΄λ¬ν λ μ΄μ΄μ κ²°ν©λ λ©λͺ¨λ¦¬ μ¬μ©λμ μ¬μ΄νΈμ μ±λ₯μ μλΉν μν₯μ λ―Έμ³€μ΅λλ€.
μ΅μ ν μ λ΅:
- λ€μν λ μ΄μ΄μ κ±Έμ³ μ€λ³΅λ CSS κ·μΉμ μλ³νκ³ μ κ±°νμ΅λλ€.
- λ€μν μμ€μ μ μ¬ν λ μ΄μ΄λ₯Ό λ μ μ μμ λ μ΄μ΄λ‘ ν΅ν©νμ΅λλ€.
- CSS κ°μ¬ λꡬλ₯Ό μ¬μ©νμ¬ μ±λ₯ λ¬Έμ λ₯Ό μλ³νκ³ μμ νμ΅λλ€.
κ²°κ³Ό: νμ΄μ§ λ‘λ μκ°μ΄ 20% ν₯μλμκ³ λ©λͺ¨λ¦¬ μ¬μ©λμ΄ 10% κ°μνμ΅λλ€.
κ²°λ‘
CSS μΊμ€μΌμ΄λ λ μ΄μ΄λ CSS νΉμμ± λ° κ΅¬μ‘°λ₯Ό κ΄λ¦¬νλ κ°λ ₯ν λ°©λ²μ μ 곡ν©λλ€. κ·Έλ¬λ μ μ¬μ μΈ μ±λ₯ μν₯μ μΈμ§νκ³ μ μΈκ³ μ¬μ©μμκ² λΉ λ₯΄κ³ ν¨μ¨μ μΈ μΉ κ²½νμ 보μ₯νκΈ° μν΄ μ¬μ©μ μ΅μ ννλ κ²μ΄ μ€μν©λλ€. μ μ¬μ μΈ ν¨μ μ μ΄ν΄νκ³ , λΆμμ μν μ μ ν λꡬ λ° κΈ°μ μ μ¬μ©νκ³ , ν¨κ³Όμ μΈ μ΅μ ν μ λ΅μ ꡬνν¨μΌλ‘μ¨ μ±λ₯μ ν¬μνμ§ μκ³ @layerμ μ΄μ μ νμ©ν μ μμ΅λλ€. νμ νλ‘νμΌλ§νκ³ λ³κ²½ μ¬νμ μν₯μ μΈ‘μ νμ¬ μ΅μ νκ° μ€μ λ‘ μ±λ₯μ κ°μ νκ³ μλμ§ νμΈνμμμ€. CSS λ μ΄μ΄μ νμ νμ©νλ, μ μΈκ³ μ¬μ©μλ₯Ό μν μ±λ₯μ΄ λ°μ΄λκ³ μ μ§ κ΄λ¦¬ κ°λ₯ν μΉ μ ν리μΌμ΄μ
μ λ§λ€κΈ° μν΄ νλͺ
νκ² μ¬μ©νμμμ€.