CSS Extendμ κ°λ ₯ν μ€νμΌ μ¬μ¬μ© λ° μμ κΈ°λ₯μ μ΄ν΄λ³΄μΈμ. νμ₯ κ°λ₯νκ³ μ μ§ κ΄λ¦¬ κ°λ₯ν λμμΈμ μν΄ CSSλ₯Ό ꡬννκ³ μ΅μ ννλ λ°©λ²μ μμ보μΈμ.
CSS Extendλ‘ ν¨μ¨μ± λμ΄κΈ°: νμ₯ κ°λ₯ν λμμΈμ μν μ€νμΌ μμ λ§μ€ν°νκΈ°
λμμμ΄ μ§ννλ μΉ κ°λ° μΈκ³μμ ν¨μ¨μ μ΄κ³ μ μ§ κ΄λ¦¬ κ°λ₯ν CSSλ₯Ό μμ±νλ κ²μ λ§€μ° μ€μν©λλ€. νλ‘μ νΈμ 볡μ‘μ±μ΄ μ¦κ°ν¨μ λ°λΌ μ€νμΌμ κ΄λ¦¬νκΈ° μν κ°λ ₯ν μμ€ν μ νμμ±μ΄ μ μ λ μ€μν΄μ§κ³ μμ΅λλ€. CSS λ¬΄κΈ°κ³ μ κ°λ ₯ν λꡬ μ€ νλλ μ€νμΌ μμμ μ©μ΄νκ² νκ³ μ½λ μ¬μ¬μ©μ±μ μ΄μ§νλ "Extend" κ°λ μ λλ€. μ΄ κΈ°μ¬μμλ CSS Extend κ·μΉμ μμΈν μ΄ν΄λ³΄κ³ ꡬν, μ΄μ , νμ₯ κ°λ₯νκ³ μ μ§ κ΄λ¦¬ κ°λ₯ν λμμΈμ ꡬμΆνκΈ° μν λͺ¨λ² μ¬λ‘λ₯Ό μ΄ν΄λ΄ λλ€.
CSS Extendλ 무μμ λκΉ?
CSS Extendλ μ£Όλ‘ Sass λ° Lessμ κ°μ CSS μ μ²λ¦¬κΈ°μ κ΄λ ¨λμ΄ μμΌλ©° ν μ νκΈ°μμ λ€λ₯Έ μ νκΈ°λ‘ μ€νμΌμ μμνλ λ©μ»€λμ¦μ μ 곡ν©λλ€. DOM νΈλ¦¬λ₯Ό λ°λΌ μ€νμΌμ μ μ©νλ κΈ°μ‘΄ CSS μμκ³Ό λ¬λ¦¬ Extendλ₯Ό μ¬μ©νλ©΄ CSS μ½λλ² μ΄μ€ λ΄μμ κΈ°μ‘΄ μ€νμΌ κ·μΉμ λͺ μμ μΌλ‘ μ¬μ¬μ©ν μ μμ΅λλ€. μ΄λ₯Ό ν΅ν΄ λ κΉλνκ³ μ²΄κ³μ μ΄λ©° λ°λ³΅μ±μ΄ μ μ CSSκ° λ©λλ€.
λ€μ΄ν°λΈ CSSμλ Sass λλ Less `@extend` μ§μμ΄μ μ§μ μ μΌλ‘ λμΌν κ²μ μμ§λ§ μ€νμΌ μ¬μ¬μ© λ° κ΅¬μ± μμΉμ CSS λ³μ, λ―Ήμ€μΈ(μ μ²λ¦¬κΈ°λ₯Ό ν΅ν΄) λ° μΊμ€μΌμ΄λ μ체μ κ°μ λ€λ₯Έ μλ¨μ ν΅ν΄ λ¬μ±ν μ μμ΅λλ€. μ΄λ¬ν κ°λ μ΄ Extend ν¨λ¬λ€μκ³Ό μ΄λ»κ² κ΄λ ¨λλμ§ μ΄ν΄λ³΄κ² μ΅λλ€.
CSS Extendλ₯Ό μ¬μ©νλ μ΄μ λ 무μμ λκΉ?
- μ½λ μ€λ³΅ κ°μ: Extendλ₯Ό μ¬μ©νλ©΄ κΈ°μ‘΄ κ·μΉμμ μ€νμΌμ μμνμ¬ μ€λ³΅ CSSλ₯Ό μ΅μννμ¬ μ€νμΌμνΈμ μ 체 ν¬κΈ°λ₯Ό μ€μΌ μ μμ΅λλ€.
- μ μ§ κ΄λ¦¬μ± ν₯μ: μ€νμΌμ μμ ν΄μΌ νλ κ²½μ° ν κ³³μμλ§ λ³κ²½νλ©΄ λκ³ ν΄λΉ μ€νμΌμ νμ₯νλ λͺ¨λ μ νκΈ°κ° μλμΌλ‘ λ³κ²½ μ¬νμ μμν©λλ€. μ΄λ κ² νλ©΄ μ μ§ κ΄λ¦¬κ° κ°μνλκ³ λΆμΌμΉ μνμ΄ μ€μ΄λλλ€.
- κ΅¬μ± κ°μ : μ€νμΌμ λͺ νν κ³μΈ΅ ꡬ쑰λ₯Ό λ§λ€μ΄ Extendλ CSSλ₯Ό ꡬμ±νκ³ μ΄ν΄νκ³ νμνκΈ° μ½κ² λ§λλ λ° λμμ΄ λ©λλ€.
- νμ₯μ± μ΄μ§: νλ‘μ νΈκ° 컀μ§μ λ°λΌ Extendλ₯Ό μ¬μ©νλ©΄ λͺ¨λμμ΄κ³ νμ₯ κ°λ₯ν CSS μν€ν μ²λ₯Ό ꡬμΆνμ¬ μ€νμΌμ κ΄λ¦¬νκΈ° μ½κ³ ν¨μ¨μ μΌλ‘ μ μ§ν μ μμ΅λλ€.
Sassλ₯Ό μ¬μ©ν ꡬν
Sassλ ν μ νκΈ°μ μ€νμΌμ λ€λ₯Έ μ νκΈ°λ‘ μμν μ μλ `@extend` μ§μμ΄λ₯Ό μ 곡ν©λλ€. λ€μμ κΈ°λ³Έ μμ μ λλ€.
.button {
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: #007bff;
color: white;
cursor: pointer;
}
.primary-button {
@extend .button;
background-color: #28a745;
}
μ΄ μμ μμ `.primary-button`μ `.button`μ λͺ¨λ μ€νμΌμ μμν λ€μ `background-color`λ₯Ό μ¬μ μν©λλ€. μ»΄νμΌλ CSSλ λ€μκ³Ό κ°μ΅λλ€.
.button, .primary-button {
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: #007bff;
color: white;
cursor: pointer;
}
.primary-button {
background-color: #28a745;
}
μ리 νμμ μ νκΈ°
Sassλ λν `@extend`μ ν¨κ» μ¬μ©νλλ‘ νΉλ³ν μ€κ³λ μ리 νμμ μ νκΈ°(`%`)λ₯Ό μ 곡ν©λλ€. μ리 νμμ μ νκΈ°λ λ€λ₯Έ μ νκΈ°μ μν΄ νμ₯λμ§ μλ ν CSSλ‘ μ»΄νμΌλμ§ μμ΅λλ€. μ΄λ μμμ μ§μ μ μ©νμ§ μμΌλ €λ κΈ°λ³Έ μ€νμΌμ λ§λλ λ° μ μ©ν©λλ€.
%base-heading {
font-family: sans-serif;
font-weight: bold;
}
h1 {
@extend %base-heading;
font-size: 2em;
}
h2 {
@extend %base-heading;
font-size: 1.5em;
}
Lessλ₯Ό μ¬μ©ν ꡬν
Lessλ `extend()` μμ¬ ν΄λμ€λ₯Ό μ¬μ©νμ¬ μ μ¬ν κΈ°λ₯μ μ 곡ν©λλ€. Sass μμ μ λμΌν κ²°κ³Όλ₯Ό μ»λ λ°©λ²μ λ€μκ³Ό κ°μ΅λλ€.
.button {
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: #007bff;
color: white;
cursor: pointer;
}
.primary-button:extend(.button) {
background-color: #28a745;
}
μ»΄νμΌλ CSSλ Sass μμ μ μ μ¬νλ©° `.button`κ³Ό `.primary-button`μ΄ κ³΅ν΅ μ€νμΌμ 곡μ ν©λλ€.
λμμΌλ‘μμ CSS λ³μ λ° μΊμ€μΌμ΄λ
Sass λ° Lessλ λͺ μμ μΈ Extend μ§μμ΄λ₯Ό μ 곡νμ§λ§ μ΅μ CSSλ νΉν λ κ°λ¨ν μλ리μ€μμ μ μ¬ν κ²°κ³Όλ₯Ό μ»κΈ° μν λ체 λ©μ»€λμ¦μ μ 곡ν©λλ€. CSS λ³μ(μ¬μ©μ μ§μ μμ±)μ μΊμ€μΌμ΄λμ λν κΉμ μ΄ν΄λ μ½λ μ€λ³΅μ ν¬κ² μ€μΌ μ μμ΅λλ€.
CSS λ³μ
CSS λ³μλ₯Ό μ¬μ©νλ©΄ μ€νμΌμνΈ μ 체μ μ μ©ν μ μλ μ¬μ¬μ© κ°λ₯ν κ°μ μ μν μ μμ΅λλ€. `@extend`μ κ°μ λ°©μμΌλ‘ μ€νμΌμ μ§μ μμνμ§λ μμ§λ§ 곡μ κ°μ κ΄λ¦¬νλ κ°λ ₯ν λ°©λ²μ μ 곡ν©λλ€. μλ₯Ό λ€μ΄:
:root {
--button-padding: 10px 20px;
--button-border: none;
--button-radius: 5px;
--button-background: #007bff;
--button-color: white;
}
.button {
padding: var(--button-padding);
border: var(--button-border);
border-radius: var(--button-radius);
background-color: var(--button-background);
color: var(--button-color);
cursor: pointer;
}
.primary-button {
padding: var(--button-padding);
border: var(--button-border);
border-radius: var(--button-radius);
background-color: #28a745;
color: var(--button-color);
cursor: pointer;
}
μ΄ κ²½μ° λ³μ κ°μ λ³κ²½νλ©΄ λ³μκ° μ¬μ©λ λͺ¨λ μΈμ€ν΄μ€κ° λ³κ²½λμ΄ νμ₯κ³Ό μ μ¬ν μ€μ μ§μ€μ μ μ΄ νμμ μ 곡ν©λλ€. λ€μ λ³νμ κ³ λ €νμμμ€.
:root {
--base-button-style: {
padding: 10px 20px;
border: none;
border-radius: 5px;
color: white;
cursor: pointer;
}
}
.button {
--button-background: #007bff;
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: var(--button-background);
color: white;
cursor: pointer;
}
.primary-button {
--button-background: #28a745;
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: var(--button-background);
color: white;
cursor: pointer;
}
μ΄μ μ½λλ μλνμ§ μμ΅λλ€. CSS λ³μλ μ΄μ κ°μ΄ μ¬λ¬ CSS μμ±μ 보μ ν μ μμ΅λλ€. CSS λ³μλ νλμ μμ± κ°λ§ 보μ νλ€λ μ μ κΈ°μ΅νλ κ²μ΄ μ€μν©λλ€.
μΊμ€μΌμ΄λ
μΊμ€μΌμ΄λ μ체λ μμμ ν ννμ λλ€. μ€νμΌμ μμ μμμ μ λ΅μ μΌλ‘ μ μ©νλ©΄ μμ μμμμ μμλλ κΈ°λ³Έ μ€νμΌ μΈνΈλ₯Ό λ§λ€ μ μμ΅λλ€. μ΄κ²μ CSS λ³μμ κ²°ν©λμ΄ μ μ°νκ³ μ μ§ κ΄λ¦¬ κ°λ₯ν μμ€ν μ λ§λ€ μ μμ΅λλ€.
CSS Extend μ¬μ©μ μν λͺ¨λ² μ¬λ‘
- μ리 νμμ μ νκΈ° μ¬μ©: κΈ°λ³Έ μ€νμΌμ λ§λ€ λ μ리 νμμ μ νκΈ°(Sassμ `Β %`)λ₯Ό μ¬μ©νμ¬ CSSλ‘ μ§μ μ»΄νμΌλμ§ μλλ‘ ν©λλ€.
- κ³Όλν νμ₯ λ°©μ§: μ€νμΌμ κ΄λ²μνκ² νμ₯νλ©΄ 볡μ‘νκ³ μ΄ν΄νκΈ° μ΄λ €μ΄ CSSκ° λ μ μμ΅λλ€. Extendλ₯Ό μ μ€νκ² μ¬μ©νκ³ μ μ ν κ²½μ° λ―Ήμ€μΈ λλ CSS λ³μμ κ°μ λ체 λ°©λ²μ κ³ λ €νμμμ€.
- λͺ νν κ³μΈ΅ ꡬ쑰 μ μ§ κ΄λ¦¬: CSSλ₯Ό λ Όλ¦¬μ μΈ λ°©μμΌλ‘ ꡬμ±νκ³ κΈ°λ³Έ μ€νμΌμ 맨 μμ λκ³ λ ꡬ체μ μΈ μ€νμΌμ νμ₯ν©λλ€. μ΄λ κ² νλ©΄ CSSλ₯Ό νμνκ³ μ μ§ κ΄λ¦¬νκΈ°κ° λ μ¬μμ§λλ€.
- κ΅¬μ²΄μ± μ λ : Extendλ CSS ꡬ체μ±μ μν₯μ μ€ μ μμ΅λλ€. νμ₯λ μ€νμΌμ΄ μμμΉ λͺ»ν λμμ λ°©μ§νκΈ° μν΄ μνλ ꡬ체μ±μ κ°λλ‘ ν©λλ€.
- λ―Ήμ€μΈ κ³ λ €: λ―Ήμ€μΈ(μ μ²λ¦¬κΈ°μμ μ 곡)μ νΉν λ§€κ°λ³μνλ μ€νμΌμ μ²λ¦¬ν λ λλ‘λ λ μ μ°ν μ μλ Extendμ λν λμμ μ 곡ν©λλ€.
- μ½λ λ¬Έμν: CSSλ₯Ό λͺ ννκ² λ¬Έμνν©λλ€. μ¬κΈ°μλ λ€λ₯Έ κ°λ°μ(λ° λ―Έλμ μμ )κ° μ½λλ₯Ό μ΄ν΄νκΈ° μ½λλ‘ νμ₯νλ μ νκΈ°κ° ν¬ν¨λ©λλ€.
μ μ¬μ μΈ ν¨μ λ° κ³ λ € μ¬ν
- κ΅¬μ²΄μ± λ¬Έμ : `@extend`λ μ£Όμν΄μ μ¬μ©νμ§ μμΌλ©΄ μμμΉ λͺ»ν κ΅¬μ²΄μ± λ¬Έμ λ₯Ό μΌμΌν¬ μ μμ΅λλ€. `@extend`λ₯Ό μ¬μ©ν λλ CSS ꡬ체μ±μ μ΄ν΄νλ κ²μ΄ μ€μν©λλ€. κ·μΉμ΄ λ€λ₯Έ κ·μΉμ νμ₯νλ©΄ μ νκΈ°κ° ν¨κ» κ·Έλ£Ήνλμ΄ μ¦μ λͺ ννμ§ μμ μ μλ κ·μΉμ ꡬ체μ±μ΄ λ³κ²½λ μ μμ΅λλ€. νΉν λκ·λͺ¨ νλ‘μ νΈμμλ `extend`λ₯Ό ꡬνν ν νμ μ² μ ν ν μ€νΈνμμμ€.
- νμΌ ν¬κΈ° μ¦κ°: `@extend`λ μ€λ³΅μ μ€μ΄λ κ²μ λͺ©νλ‘ νμ§λ§ νΉμ μν©μμλ μ΅μ’ CSS νμΌ ν¬κΈ°κ° *μ¦κ°*ν μ μμ΅λλ€. μ΄λ κ΄λ²μνκ² νμ₯λ μ νκΈ°κ° μ¬λ¬ μμΉμμ μ¬μ©λ λ λ°μν©λλ€. μ»΄νμΌλ¬λ μμλ μ€νμΌμ μ¬λ¬ μ νκΈ°λ‘ λ³΅μ νμ¬ μ΄κΈ° μ κ° ν¨κ³Όλ³΄λ€ ν° μ€λ³΅μ μ΄λν©λλ€. `@extend`κ° μ€μ λ‘ νμΌ ν¬κΈ°λ₯Ό μ€μ΄λμ§, λ리λμ§ νμΈνλ €λ©΄ μ»΄νμΌλ CSSλ₯Ό λΆμνμμμ€.
- μμμΉ λͺ»ν λΆμμ©: μ νκΈ°κ° νμ₯λλ©΄ ν΄λΉ μ νκΈ°λ ν΄λΉ μ νκΈ°μμ μμλλ λͺ¨λ μ νκΈ°μ μΌλΆκ° λ©λλ€. μμλ μ€νμΌμ΄ νμ₯ μ νκΈ°μ 컨ν μ€νΈμμ μ μ€νκ² κ³ λ €λμ§ μμΌλ©΄ μκΈ°μΉ μμ λΆμμ©μ΄ λ°μν μ μμ΅λλ€. νμ μ² μ ν ν μ€νΈνκ³ μ μ¬μ μΈ μ€νμΌ μΆ©λμ μ μνμμμ€.
- λλ²κΉ 볡μ‘μ±: `@extend`λ₯Ό λ§μ΄ μ¬μ©νλ CSSλ₯Ό λλ²κΉ νλ κ²μ κΈ°μ‘΄ CSSλ₯Ό λλ²κΉ νλ κ²λ³΄λ€ λ 볡μ‘ν μ μμ΅λλ€. νΉμ μ€νμΌμ μΆμ²λ₯Ό μΆμ νλ €λ©΄ μ¬λ¬ μμ€μ μμμ νμν΄μΌ νλ―λ‘ μκ°μ΄ λ§μ΄ κ±Έλ¦¬κ³ νΌλμ€λ¬μΈ μ μμ΅λλ€. λΈλΌμ°μ κ°λ°μ λꡬμ CSS μμ€ λ§΅μ ν¨κ³Όμ μΌλ‘ μ¬μ©νμ¬ λλ²κΉ μ μ§μνμμμ€.
- κ³Όμ©μΌλ‘ μΈν μ μ§ κ΄λ¦¬ λ¬Έμ : `@extend`λ μ μ νκ² μ¬μ©νλ©΄ μ μ§ κ΄λ¦¬μ±μ ν₯μμν¬ μ μμ§λ§ κ³Όλνκ² μ¬μ©νλ©΄ CSSλ₯Ό μ΄ν΄νκ³ μμ νκΈ° λ μ΄λ ΅κ² λ§λλ 볡μ‘ν μ’ μμ± μΉμ΄ μμ±λ μ μμ΅λλ€. μ½λ μ¬μ¬μ©κ³Ό λͺ νμ± κ°μ κ· νμ μ μ§νμμμ€.
Extend λ λ―Ήμ€μΈ: μ¬λ°λ₯Έ λꡬ μ ν
Extendμ λ―Ήμ€μΈ(Sass λ° Lessμ κ°μ μ μ²λ¦¬κΈ°μμ μ¬μ© κ°λ₯)μ λͺ¨λ CSS μ½λλ₯Ό μ¬μ¬μ©νλ λ°©λ²μ μ 곡νμ§λ§ μ κ·Ό λ°©μμ΄ λ€λ₯΄λ©° λ€μν μλ리μ€μ μ ν©ν©λλ€.
Extend
- λ©μ»€λμ¦: λ€λ₯Έ μ νκΈ°μμ *μ 체* μ€νμΌ μΈνΈλ₯Ό μμν©λλ€. μ»΄νμΌλ CSSμμ μ νκΈ°λ₯Ό ν¨κ» κ·Έλ£Ήνν©λλ€.
- μ¬μ© μ¬λ‘: μλ―Έμ μ°κ²°(μ: ν΅μ¬ μ€νμΌμ 곡μ νλ λ€μν μ νμ λ²νΌ)μ΄ νμν μ¬λ¬ μμμμ κΈ°λ³Έ μ€νμΌμ 곡μ νλ λ° μ΄μμ μ λλ€. μμ μμ΄ νμ₯λ ν΄λμ€μ λͺ¨λ μμ±μ μνλ κ²½μ°μ κ°μ₯ μ ν©ν©λλ€.
- μ»΄νμΌλ μΆλ ₯: μΌλ°μ μΌλ‘ μ½λ μ€λ³΅μ΄ μ κΈ° λλ¬Έμ λ―Ήμ€μΈλ³΄λ€ CSSκ° λ μκ² μμ±λ©λλ€.
λ―Ήμ€μΈ
- λ©μ»€λμ¦: λ―Ήμ€μΈ λ΄μ CSS κ·μΉ *볡μ¬λ³Έ*μ μ¬μ©λλ μ νκΈ°μ ν¬ν¨ν©λλ€. ν¬ν¨λ μ€νμΌμ μ¬μ©μ μ μνκΈ° μν λ§€κ°λ³μ(μΈμ)λ₯Ό νμ©ν©λλ€.
- μ¬μ© μ¬λ‘: μ½κ°μ λ³νμ΄ μλ μ¬λ¬ μμμ μ μ©νλ €λ μ¬μ¬μ© κ°λ₯ν μ½λ μ‘°κ°μ μ ν©ν©λλ€. 곡κΈμ 체 μ λμ¬, 볡μ‘ν κ³μ° λ° λ§€κ°λ³μνλ μ€νμΌ(μ: λ€μν 그리λ μ΄ λλΉ λ§λ€κΈ°)μ μ ν©ν©λλ€.
- μ»΄νμΌλ μΆλ ₯: νΉν λ―Ήμ€μΈμ λ§μ κ·μΉμ΄ ν¬ν¨λμ΄ μκ³ μμ£Ό μ¬μ©λλ κ²½μ° μ½λ μ€λ³΅μΌλ‘ μΈν΄ CSS νμΌμ΄ λ μ»€μ§ μ μμ΅λλ€.
μΈμ 무μμ μ¬μ©ν΄μΌ ν κΉμ?
- λ€μκ³Ό κ°μ κ²½μ° Extend μ¬μ©: μμ κ°μ μλ―Έμ κ΄κ³λ₯Ό λ§λ€κ³ μμ *μμ΄* κ³΅ν΅ κΈ°λ³Έ μ€νμΌμ 곡μ νκ³ λ μμ νμΌ ν¬κΈ°λ₯Ό μν΄ μ΅μ ννλ κ²μ΄ μ°μ μμμΈ κ²½μ°.
- λ€μκ³Ό κ°μ κ²½μ° λ―Ήμ€μΈ μ¬μ©: λ³νμ΄ μλ μ¬μ¬μ© κ°λ₯ν μ½λ μ€λν«μ ν¬ν¨νκ±°λ, 곡κΈμ 체 μ λμ¬λ₯Ό μ²λ¦¬νκ±°λ, 볡μ‘ν κ³μ°μ μννκ±°λ, λ§€κ°λ³μλ₯Ό μ¬μ©νμ¬ ν¬ν¨λ μ€νμΌμ μ¬μ©μ μ§μ ν΄μΌ νλ κ²½μ°.
κ²½μ°μ λ°λΌ Extendμ λ―Ήμ€μΈμ κ²°ν©νλ κ²μ΄ κ°μ₯ ν¨κ³Όμ μΈ μ κ·Ό λ°©μμ λλ€. μλ₯Ό λ€μ΄ Extendλ₯Ό μ¬μ©νμ¬ κΈ°λ³Έ μ€νμΌμ μ€μ ν λ€μ λ―Ήμ€μΈμ μ¬μ©νμ¬ νΉμ λ³ν λλ ν₯μ κΈ°λ₯μ μΆκ°ν μ μμ΅λλ€.
μ μ μμ λ° κ³ λ € μ¬ν
CSS Extend λ° μ€νμΌ μ¬μ¬μ© μμΉμ λ€μν μ§μ λ° λ¬ΈνκΆμμ 보νΈμ μΌλ‘ μ μ©ν μ μμ΅λλ€. κ·Έλ¬λ μ μΈκ³ μ¬μ©μλ₯Ό μν΄ λμμΈν λλ λ€μ μ¬νμ κ³ λ €ν΄μΌ ν©λλ€.
- νμ΄ν¬κ·ΈλνΌ: μΈμ΄λ§λ€ λ€λ₯Έ κΈκΌ΄ ν¨λ°λ¦¬ λ° ν¬κΈ°κ° νμν©λλ€. CSS λ³μ λλ λ―Ήμ€μΈμ μ¬μ©νμ¬ μ½ν μΈ μ μΈμ΄μ λ°λΌ νμ΄ν¬κ·ΈλνΌ μ€μ μ κ΄λ¦¬ν©λλ€. μλ₯Ό λ€μ΄ μμ΄μ μλμ΄λ₯Ό λͺ¨λ μ§μνλ μΉμ¬μ΄νΈλ κ° μ€ν¬λ¦½νΈμ μκ°μ νΉμ±μ μμ©νκΈ° μν΄ μ λͺ©μ λν΄ λ€λ₯Έ κΈκΌ΄ ν¬κΈ°λ₯Ό μ¬μ©ν μ μμ΅λλ€.
- λ μ΄μμ: μλμ΄ λ° νλΈλ¦¬μ΄μ κ°μ μΌλΆ μΈμ΄λ μ€λ₯Έμͺ½μμ μΌμͺ½(RTL)μΌλ‘ μμ±λ©λλ€. CSS λ Όλ¦¬ μμ±(μ: `margin-left` λμ `margin-inline-start`) λ° λ°©ν₯ μμ±(`dir="rtl"`)μ μ¬μ©νμ¬ λ μ΄μμμ΄ RTL μΈμ΄μ μ¬λ°λ₯΄κ² μ μ©λλλ‘ ν©λλ€. CSS Extendλ μΌλ°μ μΈ λ μ΄μμ μ€νμΌμ 곡μ νλ©΄μ RTLλ³ μ¬μ μλ₯Ό νμ©νλ λ° μ¬μ©ν μ μμ΅λλ€.
- μμ: μμμ μΈκ³ μ¬λ¬ μ§μμμ λ€λ₯Έ λ¬Ένμ μ°κ΄μ±μ κ°μ§ μ μμ΅λλ€. μΉμ¬μ΄νΈμ λν μμμ μ νν λ μ΄λ¬ν μ°κ΄μ±μ μΌλμ λμμμ€. μλ₯Ό λ€μ΄ ν°μμ μΌλΆ μμμ λ¬ΈνκΆμμ μ λλ₯Ό μλ―Ένλ λ°λ©΄ μꡬ λ¬ΈνκΆμμλ μμν¨κ³Ό μΆνλ₯Ό μλ―Ένλ κ²½μ°κ° λ§μ΅λλ€.
- μμ΄μ½: μμ΄μ½μ΄ λ¬Ένμ μΌλ‘ μ μ νκ³ λ€μν μ§μμ μ¬μ©μλ₯Ό μλμΉ μκ² λΆμΎνκ² νκ±°λ λ°°μ νμ§ μλλ‘ ν©λλ€. λ€λ₯Έ λ¬ΈνκΆμμ λ€λ₯Έ μλ―Έλ₯Ό κ°μ§ μ μλ κΈ°νΈλ μ¬μ©νμ§ λ§μμμ€.
- μ κ·Όμ±: μ κ·Όμ± μ§μΉ¨(WCAG)μ μ€μνμ¬ μ₯μ μΈμ΄ μΉμ¬μ΄νΈλ₯Ό μ¬μ©ν μ μλλ‘ ν©λλ€. μ¬κΈ°μλ μ΄λ―Έμ§μ λν λ체 ν μ€νΈ μ 곡, μ μ ν μλ―Έ μ²΄κ³ HTML μ¬μ©, ν€λ³΄λλ₯Ό μ¬μ©νμ¬ μΉμ¬μ΄νΈλ₯Ό νμν μ μλμ§ νμΈνλ κ²μ΄ ν¬ν¨λ©λλ€.
μ:
μ λ½κ³Ό μμμμμ μ νμ νλ§€νλ κΈλ‘λ² μ μ μκ±°λ νλ«νΌμ μμν΄ λ³΄μΈμ. μ΄ νλ«νΌμ CSS Extendλ₯Ό μ¬μ©νμ¬ κΈ°λ³Έ λ²νΌ μ€νμΌμ λ§λ€μ§λ§ λ―Ήμ€μΈμ μ¬μ©νμ¬ μ§μμ λ°λΌ λ²νΌ μμμ μ¬μ©μ μ μν©λλ€. μ λ½μμλ κΈ°λ³Έ λ²νΌ μμμ΄ νλμμ΄κ³ μμμμμλ λ Ήμμ΄λ©° ν΄λΉ μ§μμ λ€λ₯Έ μμ κΈ°λ³Έ μ€μ λ° μ°κ΄μ±μ λ°μν©λλ€.
// Base button style
.button {
padding: 10px 20px;
border: none;
border-radius: 5px;
color: white;
cursor: pointer;
}
// Mixin for setting button background color
@mixin button-background-color($color) {
background-color: $color;
}
// European button style
.european-button {
@extend .button;
@include button-background-color(#007bff); // Blue
}
// Asian button style
.asian-button {
@extend .button;
@include button-background-color(#28a745); // Green
}
κ²°λ‘
CSS Extendλ ν¨μ¨μ μ΄κ³ μ μ§ κ΄λ¦¬ κ°λ₯νλ©° νμ₯ κ°λ₯ν CSSλ₯Ό μμ±νκΈ° μν κ°λ ₯ν κΈ°μ μ λλ€. μμΉκ³Ό λͺ¨λ² μ¬λ‘λ₯Ό μ΄ν΄νλ©΄ λ³΄λ€ μ²΄κ³μ μ΄κ³ κ΄λ¦¬νκΈ° μ¬μ΄ CSS μ½λλ² μ΄μ€λ₯Ό λ§λ€ μ μμ΅λλ€. λ€μ΄ν°λΈ CSSλ μ§μ μ μΈ `@extend`μ ν΄λΉνμ§ μμ§λ§ CSS λ³μ λ° μ λ΅μ μΊμ€μΌμ΄λ©κ³Ό κ°μ κ°λ μ μ μ¬ν κ²°κ³Όλ₯Ό μ»λ λ° λμμ΄ λ μ μμ΅λλ€. μμ μ μ ν©ν λꡬλ₯Ό μ νν λλ νλ‘μ νΈμ νΉμ μꡬ μ¬νκ³Ό κ° μ κ·Ό λ°©μμ κ°μ κ³Ό μ½μ μ κ³ λ €νλ κ²μ μμ§ λ§μμμ€. μ μΈκ³ μ¬μ©μλ₯Ό μν΄ λμμΈν λλ νμ λ¬Ένμ μ°¨μ΄λ₯Ό μΌλμ λκ³ μΉμ¬μ΄νΈκ° λͺ¨λ μ¬μ©μμκ² μ κ·Ό κ°λ₯νκ³ ν¬κ΄μ μΈμ§ νμΈνμμμ€. CSS Extend(λλ κ·Έ λμ)μ νμ νμ©νμ¬ ν¨μ¨μ±μ λμ΄κ³ λ λμ μΉμ ꡬμΆνμμμ€.
μΆκ° μλ£
- Sass μ€λͺ μ: https://sass-lang.com/documentation/at-rules/extend
- Less μ€λͺ μ: https://lesscss.org/features/#extend-feature
- CSS λ³μμ λν MDN μΉ λ¬Έμ: https://developer.mozilla.org/en-US/docs/Web/CSS/var()
- μΉ μ κ·Όμ± μ΄λμ ν°λΈ(WAI): https://www.w3.org/WAI/