CSS μ€μ½ν κ·μΉ, μ€νμΌ μΊ‘μν κΈ°λ², κ·Έλ¦¬κ³ νλ μΉ κ°λ°μμ μ€νμΌ κ΄λ¦¬λ₯Ό μν λͺ¨λ² μ¬λ‘λ₯Ό μ΄ν΄λ³΄μΈμ. CSS μΆ©λμ λ°©μ§νκ³ μ μ§λ³΄μμ νμ₯μ΄ μ©μ΄ν μ ν리μΌμ΄μ μ ꡬμΆνλ λ°©λ²μ μμ보μΈμ.
CSS μ€μ½ν κ·μΉ: μ€νμΌ μΊ‘μν ꡬν μ¬μΈ΅ λΆμ
νλ μΉ κ°λ°μμ CSS μ€νμΌμ ν¨κ³Όμ μΌλ‘ κ΄λ¦¬νλ κ²μ μ μ§λ³΄μ λ° νμ₯μ΄ μ©μ΄ν μ ν리μΌμ΄μ μ ꡬμΆνλ λ° λ§€μ° μ€μν©λλ€. νλ‘μ νΈκ° 볡μ‘ν΄μ§μλ‘ CSS μΆ©λ λ° μλμΉ μμ μ€νμΌ μ¬μ μμ μνμ΄ ν¬κ² μ¦κ°ν©λλ€. CSS μ€μ½ν κ·μΉμ λ€μν μ€νμΌ μΊ‘μν κΈ°λ²κ³Ό ν¨κ» μ΄λ¬ν λ¬Έμ μ λν ν΄κ²°μ± μ μ 곡ν©λλ€. μ΄ μ’ ν© κ°μ΄λμμλ CSS μ€μ½νμ κ°λ , λ€μν ꡬν μ κ·Ό λ°©μ, κ·Έλ¦¬κ³ ν¨κ³Όμ μΈ μ€νμΌ μΊ‘μνλ₯Ό λ¬μ±νκΈ° μν λͺ¨λ² μ¬λ‘λ₯Ό μ΄ν΄λ΄ λλ€.
CSS μ€μ½ν μ΄ν΄νκΈ°
CSS μ€μ½νλ CSS κ·μΉμ μν₯μ μΉ νμ΄μ§μ νΉμ λΆλΆμΌλ‘ μ ννλ κΈ°λ₯μ μλ―Έν©λλ€. μ μ ν μ€μ½ν μμ΄λ μ ν리μΌμ΄μ μ ν λΆλΆμμ μ μλ μ€νμΌμ΄ λ€λ₯Έ λΆλΆμ μ€μλ‘ μν₯μ λ―Έμ³ μκΈ°μΉ μμ μκ°μ λΆμΌμΉμ λλ²κΉ μ μ΄λ €μμ μ΄λν μ μμ΅λλ€. CSSμ μ μμ μΈ νΉμ±μ μ μΈλ λͺ¨λ μ€νμΌ κ·μΉμ΄ κΈ°λ³Έμ μΌλ‘ μμΉλ λ¬Έλ§₯μ κ΄κ³μμ΄ νμ΄μ§μ λͺ¨λ μΌμΉνλ μμμ μ μ©λλ€λ κ²μ μλ―Έν©λλ€.
μ μ CSSμ λ¬Έμ μ
νμ΄μ§μ λ κ°μ λ
립μ μΈ μ»΄ν¬λνΈκ° μκ³ , κ°κ° κ³ μ ν μ€νμΌ μΈνΈλ₯Ό κ°μ§κ³ μλ μλ리μ€λ₯Ό μκ°ν΄λ³΄μμμ€. λ§μ½ λ μ»΄ν¬λνΈκ° λμΌν ν΄λμ€ μ΄λ¦(μ: .button)μ μ¬μ©νλ€λ©΄, ν μ»΄ν¬λνΈμ μ€νμΌμ΄ λ€λ₯Έ μ»΄ν¬λνΈμ μ€νμΌμ μλμΉ μκ² μ¬μ μνμ¬ μκ°μ κ²°ν¨κ³Ό λΆμΌμΉλ₯Ό μ΄λν μ μμ΅λλ€. μ΄ λ¬Έμ λ μ½λλ² μ΄μ€μ κΈ°μ¬νλ μ¬λ¬ κ°λ°μκ° μλ λκ·λͺ¨ νλ‘μ νΈμμλ λμ± μ¬κ°ν΄μ§λλ€.
λ¬Έμ λ₯Ό μ€λͺ νκΈ° μν κ°λ¨ν μμλ λ€μκ³Ό κ°μ΅λλ€:
/* μ»΄ν¬λνΈ Aμ μ€νμΌ */
.button {
background-color: blue;
color: white;
padding: 10px 20px;
}
/* μ»΄ν¬λνΈ Bμ μ€νμΌ */
.button {
background-color: green;
color: black;
padding: 12px 24px;
}
μ΄ κ²½μ°, μ»΄ν¬λνΈ Bμμ .buttonμ λν΄ μ μλ μ€νμΌμ΄ μ»΄ν¬λνΈ Aμμ μ μλ μ€νμΌμ μ¬μ μνμ¬ μ»΄ν¬λνΈ Aμ λ²νΌμ΄ μλν λͺ¨μμ κΉ¨λ¨λ¦΄ μ μμ΅λλ€.
CSS μ€μ½νλ₯Ό λ¬μ±νκΈ° μν κΈ°λ²λ€
CSS μ€μ½νλ₯Ό λ¬μ±νκ³ μ€νμΌμ ν¨κ³Όμ μΌλ‘ μΊ‘μννλ λ° μ¬μ©ν μ μλ λͺ κ°μ§ κΈ°λ²μ΄ μμ΅λλ€. μ¬κΈ°μλ λ€μμ΄ ν¬ν¨λ©λλ€:
- CSS λ€μ΄λ° 컨벀μ (BEM, SMACSS, OOCSS): μ΄ λ°©λ²λ‘ λ€μ CSS ν΄λμ€μ ꡬ쑰μ λͺ©μ μ λ°μνλ λ°©μμΌλ‘ μ΄λ¦μ μ§μ νλ κ°μ΄λλΌμΈμ μ 곡νμ¬ μ΄λ¦ μΆ©λ κ°λ₯μ±μ μ€μ λλ€.
- CSS λͺ¨λ: CSS λͺ¨λμ κ° CSS νμΌμ λν΄ κ³ μ ν ν΄λμ€ μ΄λ¦μ μλμΌλ‘ μμ±νμ¬ μ€νμΌμ΄ μν μ»΄ν¬λνΈλ‘ λ²μκ° νμ λλλ‘ λ³΄μ₯ν©λλ€.
- Shadow DOM: Shadow DOMμ μΉ μ»΄ν¬λνΈ λ΄μ μ€νμΌμ μΊ‘μννλ λ°©λ²μ μ 곡νμ¬ μ€νμΌμ΄ μΈλΆλ‘ μ μΆλμ΄ νμ΄μ§μ λλ¨Έμ§ λΆλΆμ μν₯μ λ―ΈμΉλ κ²μ λ°©μ§ν©λλ€.
- CSS-in-JS: CSS-in-JS λΌμ΄λΈλ¬λ¦¬λ₯Ό μ¬μ©νλ©΄ JavaScript μ½λμ μ§μ CSS μ€νμΌμ μμ±ν μ μμΌλ©°, μ’ μ’ λ΄μ₯λ μ€μ½ν λ©μ»€λμ¦μ μ 곡ν©λλ€.
CSS λ€μ΄λ° 컨벀μ
CSS λ€μ΄λ° 컨벀μ μ CSS ν΄λμ€ μ΄λ¦ μ§μ μ λν ꡬ쑰νλ μ κ·Ό λ°©μμ μ 곡νμ¬ κ° ν΄λμ€μ λͺ©μ κ³Ό λ¬Έλ§₯μ λ μ½κ² μ΄ν΄ν μ μκ² ν©λλ€. μΌλ°μ μΈ μ»¨λ²€μ μ λ€μκ³Ό κ°μ΅λλ€:
- BEM (Block, Element, Modifier): BEMμ CSS ν΄λμ€μ λͺ¨λμ±κ³Ό μ¬μ¬μ©μ±μ κ°μ‘°νλ μΈκΈ° μλ λ€μ΄λ° 컨벀μ μ λλ€. μ΄λ λΈλ‘(λ 립μ μΈ μ»΄ν¬λνΈ), μ리먼νΈ(λΈλ‘μ μΌλΆ), κ·Έλ¦¬κ³ λͺ¨λνμ΄μ΄(λΈλ‘ λλ μ리먼νΈμ λ³ν)μ μΈ λΆλΆμΌλ‘ ꡬμ±λ©λλ€.
- SMACSS (Scalable and Modular Architecture for CSS): SMACSSλ CSS κ·μΉμ κΈ°λ³Έ κ·μΉ, λ μ΄μμ κ·μΉ, λͺ¨λ κ·μΉ, μν κ·μΉ, ν λ§ κ·μΉ λ± λ€μν μ νμΌλ‘ λΆλ₯νλ©°, κ° μ νλ§λ€ κ³ μ ν λ€μ΄λ° 컨벀μ μ΄ μμ΅λλ€.
- OOCSS (Object-Oriented CSS): OOCSSλ μ¬λ¬ μμμ μ μ©ν μ μλ μ¬μ¬μ© κ°λ₯ν CSS κ°μ²΄λ₯Ό λ§λλ λ° μ€μ μ λ‘λλ€. ꡬ쑰μ μ€ν¨μ λΆλ¦¬λ₯Ό μ₯λ €νμ¬ κΈ°λ³Έ ꡬ쑰μ μν₯μ μ£Όμ§ μκ³ κ°μ²΄μ λͺ¨μμ λ³κ²½ν μ μμ΅λλ€.
BEM μμ
λ€μμ BEMμ μ¬μ©νμ¬ λ²νΌ μ»΄ν¬λνΈμ CSS ν΄λμ€ μ΄λ¦μ μ§μ νλ μμμ λλ€:
/* λΈλ‘: button */
.button {
background-color: blue;
color: white;
padding: 10px 20px;
}
/* μ리먼νΈ: button__label */
.button__label {
font-size: 16px;
}
/* λͺ¨λνμ΄μ΄: button--primary */
.button--primary {
background-color: green;
}
μ΄ μμμμ .buttonμ λΈλ‘μ΄κ³ , .button__labelμ λ²νΌ λ΄μ μ리먼νΈμ΄λ©°, .button--primaryλ λ²νΌμ λͺ¨μμ λ³κ²½νλ λͺ¨λνμ΄μ΄μ
λλ€.
μ₯μ :
- ꡬνμ΄ λΉκ΅μ κ°λ¨ν©λλ€.
- CSS ꡬμ±κ³Ό κ°λ μ±μ ν₯μμν΅λλ€.
λ¨μ :
- μ νν 컨벀μ μ λν κ·μ¨κ³Ό μ€μκ° νμν©λλ€.
- ν΄λμ€ μ΄λ¦μ΄ κΈΈμ΄μ§ μ μμ΅λλ€.
- νΉν λκ·λͺ¨ νλ‘μ νΈμμλ μ΄λ¦ μΆ©λμ μνμ μμ ν μ κ±°νμ§λ λͺ»ν©λλ€.
CSS λͺ¨λ
CSS λͺ¨λμ κ° CSS νμΌμ λν΄ κ³ μ ν ν΄λμ€ μ΄λ¦μ μλμΌλ‘ μμ±νλ μμ€ν μ λλ€. μ΄λ₯Ό ν΅ν΄ μ€νμΌμ΄ μν μ»΄ν¬λνΈλ‘ λ²μκ° νμ λμ΄ μ΄λ¦ μΆ©λκ³Ό μλμΉ μμ μ€νμΌ μ¬μ μλ₯Ό λ°©μ§ν©λλ€. CSS λͺ¨λμ μΌλ°μ μΌλ‘ Webpackμ΄λ Parcelκ³Ό κ°μ λΉλ λꡬμ ν¨κ» μ¬μ©λ©λλ€.
μμ
λ€μ CSS νμΌμ κ°μ§ μ»΄ν¬λνΈλ₯Ό μκ°ν΄λ³΄μμμ€ (Button.module.css):
.button {
background-color: blue;
color: white;
padding: 10px 20px;
}
μ΄ CSS νμΌμ΄ CSS λͺ¨λμ μΈμνλ λΉλ λꡬμ μν΄ μ²λ¦¬λλ©΄ .buttonμ λν κ³ μ ν ν΄λμ€ μ΄λ¦μ΄ μμ±λ©λλ€. μλ₯Ό λ€μ΄, ν΄λμ€ μ΄λ¦μ _Button_button_12345μ κ°μ΄ λ³νλ μ μμ΅λλ€. κ·Έλ¬λ©΄ μ»΄ν¬λνΈλ CSS νμΌμ κ°μ Έμμ μμ±λ ν΄λμ€ μ΄λ¦μ μ¬μ©ν μ μμ΅λλ€:
import styles from './Button.module.css';
function Button() {
return ;
}
μ₯μ :
- CSS μ΄λ¦ μΆ©λμ μ κ±°ν©λλ€.
- μ»΄ν¬λνΈ λ΄μ μ€νμΌμ μΊ‘μνν©λλ€.
- κΈ°μ‘΄ CSS ꡬ문과 ν¨κ» μ¬μ©ν μ μμ΅λλ€.
λ¨μ :
- CSS λͺ¨λμ μ²λ¦¬νκΈ° μν΄ λΉλ λκ΅¬κ° νμν©λλ€.
- μμ±λ ν΄λμ€ μ΄λ¦ λλ¬Έμ λλ²κΉ μ΄ λ μ΄λ €μμ§ μ μμ΅λλ€ (νμ§λ§ λΉλ λꡬλ λ³΄ν΅ μμ€ λ§΅μ μ 곡ν©λλ€).
Shadow DOM
Shadow DOMμ μΉ μ»΄ν¬λνΈ λ΄μ μ€νμΌμ μΊ‘μννλ λ°©λ²μ μ 곡νλ μΉ νμ€μ λλ€. Shadow DOMμ μ¬μ©νλ©΄ μ»΄ν¬λνΈμ λν λ³λμ DOM νΈλ¦¬λ₯Ό λ§λ€ μ μμΌλ©°, μ¬κΈ°μλ μ체 μ€νμΌκ³Ό λ§ν¬μ μ΄ ν¬ν¨λ©λλ€. Shadow DOM λ΄μ μ μλ μ€νμΌμ ν΄λΉ DOM νΈλ¦¬λ‘ λ²μκ° νμ λλ©° νμ΄μ§μ λλ¨Έμ§ λΆλΆμ μν₯μ λ―ΈμΉμ§ μμ΅λλ€.
μμ
class MyComponent extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({ mode: 'open' });
const wrapper = document.createElement('div');
wrapper.setAttribute('class', 'wrapper');
const style = document.createElement('style');
style.textContent = `
.wrapper {
background-color: #f0f0f0;
padding: 20px;
}
p {
color: red;
}
`;
const p = document.createElement('p');
p.textContent = 'μ΄κ²μ Shadow DOM λ΄λΆμ λ¨λ½μ
λλ€.';
wrapper.appendChild(p);
shadow.appendChild(style);
shadow.appendChild(wrapper);
}
}
customElements.define('my-component', MyComponent);
μ΄ μμμμ <style> μμ λ΄μ μ μλ μ€νμΌμ <my-component> μμμ Shadow DOMμΌλ‘ λ²μκ° νμ λ©λλ€. Shadow DOM μΈλΆμμ μ μλ μ΄λ€ μ€νμΌλ Shadow DOM λ΄λΆμ μμμ μν₯μ λ―ΈμΉμ§ μμΌλ©°, κ·Έ λ°λλ λ§μ°¬κ°μ§μ
λλ€.
μ₯μ :
- κ°λ ₯ν μ€νμΌ μΊ‘μνλ₯Ό μ 곡ν©λλ€.
- CSS μΆ©λ λ° μλμΉ μμ μ€νμΌ μ¬μ μλ₯Ό λ°©μ§ν©λλ€.
- μΉ νμ€μ μΌλΆμ΄λ©° μ΅μ λΈλΌμ°μ μμ μ§μλ©λλ€.
λ¨μ :
- λ€λ₯Έ κΈ°μ λ³΄λ€ κ΅¬νμ΄ λ 볡μ‘ν μ μμ΅λλ€.
- Shadow DOMκ³Ό λ©μΈ DOM κ°μ ν΅μ λ°©λ²μ μ μ€νκ² κ³ λ €ν΄μΌ ν©λλ€ (μ: μ¬μ©μ μ μ μ΄λ²€νΈ λλ μμ± μ¬μ©).
- ꡬν λΈλΌμ°μ μμλ μμ ν μ§μλμ§ μμ΅λλ€ (ν΄λ¦¬ν νμ).
CSS-in-JS
CSS-in-JSλ CSS μ€νμΌμ JavaScript μ½λμ μ§μ μμ±νλ κΈ°μ μ λ§ν©λλ€. CSS-in-JS λΌμ΄λΈλ¬λ¦¬λ μΌλ°μ μΌλ‘ κ³ μ ν ν΄λμ€ μ΄λ¦μ μμ±νκ±°λ μΈλΌμΈ μ€νμΌμ μ¬μ©νλ κ²κ³Ό κ°μ λ΄μ₯λ μ€μ½ν λ©μ»€λμ¦μ μ 곡νμ¬ μ€νμΌμ΄ μ»΄ν¬λνΈ λ΄μ μΊ‘μνλλλ‘ λ³΄μ₯ν©λλ€. μΈκΈ° μλ CSS-in-JS λΌμ΄λΈλ¬λ¦¬λ‘λ Styled Components, Emotion, JSS λ±μ΄ μμ΅λλ€.
Styled Components μμ
import styled from 'styled-components';
const Button = styled.button`
background-color: blue;
color: white;
padding: 10px 20px;
font-size: 16px;
&:hover {
background-color: darkblue;
}
`;
function MyComponent() {
return ;
}
μ΄ μμμμ styled.button ν¨μλ μ§μ λ μ€νμΌμ κ°μ§ μ€νμΌλ§λ λ²νΌ μ»΄ν¬λνΈλ₯Ό μμ±ν©λλ€. Styled Componentsλ ν΄λΉ μ»΄ν¬λνΈμ λν΄ κ³ μ ν ν΄λμ€ μ΄λ¦μ μλμΌλ‘ μμ±νμ¬ ν΄λΉ μ»΄ν¬λνΈμλ§ μ€νμΌμ΄ μ μ©λλλ‘ λ³΄μ₯ν©λλ€.
μ₯μ :
- κ°λ ₯ν μ€νμΌ μΊ‘μνλ₯Ό μ 곡ν©λλ€.
- JavaScript λ‘μ§μ μ¬μ©νμ¬ λμ μΌλ‘ μ€νμΌμ μμ±ν μ μμ΅λλ€.
- μ’ μ’ ν λ§ μ€μ λ° μ»΄ν¬λνΈ κ΅¬μ±κ³Ό κ°μ κΈ°λ₯μ ν¬ν¨ν©λλ€.
λ¨μ :
- μ½λλ² μ΄μ€μ 볡μ‘μ±μ μ¦κ°μν¬ μ μμ΅λλ€.
- λΌμ΄λΈλ¬λ¦¬μ APIλ₯Ό μ΄ν΄νλ λ° νμ΅ κ³‘μ μ΄ νμν μ μμ΅λλ€.
- μ€νμΌμ λμ μμ±μΌλ‘ μΈν΄ λ°νμ μ€λ²ν€λκ° λ°μν μ μμ΅λλ€.
- κ΄μ¬μ¬ λΆλ¦¬(HTML, CSS, JavaScript) μμΉμ κΉ¨κΈ° λλ¬Έμ λ Όλμ μ¬μ§κ° μμ μ μμ΅λλ€.
μ¬λ°λ₯Έ μ κ·Ό λ°©μ μ ννκΈ°
CSS μ€μ½νλ₯Ό λ¬μ±νκΈ° μν μ΅μμ μ κ·Ό λ°©μμ νλ‘μ νΈμ νΉμ μꡬμ¬νμ λ°λΌ λ€λ¦ λλ€. κ²°μ μ λ΄λ¦΄ λ λ€μ μμλ₯Ό κ³ λ €νμμμ€:
- νλ‘μ νΈ κ·λͺ¨ λ° λ³΅μ‘μ±: μκ·λͺ¨ νλ‘μ νΈμ κ²½μ° CSS λ€μ΄λ° 컨벀μ μΌλ‘ μΆ©λΆν μ μμ΅λλ€. λ ν¬κ³ 볡μ‘ν νλ‘μ νΈμ κ²½μ° CSS λͺ¨λ, Shadow DOM λλ CSS-in-JSκ° λ μ ν©ν μ μμ΅λλ€.
- ν κ·λͺ¨ λ° κ²½ν: νμ΄ νΉμ κΈ°μ (μ: React)μ μ΄λ―Έ μ΅μνλ€λ©΄ ν΄λΉ κΈ°μ κ³Ό μ ν΅ν©λλ CSS-in-JS λΌμ΄λΈλ¬λ¦¬λ₯Ό μ±ννλ κ²μ΄ λ μ¬μΈ μ μμ΅λλ€.
- μ±λ₯ κ³ λ €μ¬ν: CSS-in-JSλ λ°νμ μ€λ²ν€λλ₯Ό μ λ°ν μ μμΌλ―λ‘ μ΄ μ κ·Ό λ°©μμ μ¬μ©ν λμ μ±λ₯ μν₯μ κ³ λ €νλ κ²μ΄ μ€μν©λλ€.
- λΈλΌμ°μ νΈνμ±: Shadow DOMμ ꡬν λΈλΌμ°μ μμ μμ ν μ§μλμ§ μμΌλ―λ‘ νΈνμ±μ 보μ₯νκΈ° μν΄ ν΄λ¦¬νμ μ¬μ©ν΄μΌ ν μλ μμ΅λλ€.
- κ°μΈμ μ νΈλ: μΌλΆ κ°λ°μλ CSS λ€μ΄λ° 컨벀μ μ λ¨μν¨μ μ νΈνλ λ°λ©΄, λ€λ₯Έ κ°λ°μλ CSS-in-JSμ μ μ°μ±κ³Ό κ°λ ₯ν¨μ μ νΈν©λλ€.
λ€μμ κ°λ΅ν μμ½ νμ λλ€:
| κΈ°λ² | μ₯μ | λ¨μ |
|---|---|---|
| CSS λ€μ΄λ° 컨벀μ | λ¨μν¨, κ΅¬μ± κ°μ | κ·μ¨ νμ, μΆ©λμ μμ ν λ°©μ§νμ§ λͺ»ν μ μμ |
| CSS λͺ¨λ | μΆ©λ μ κ±°, μ€νμΌ μΊ‘μν | λΉλ λꡬ νμ, λλ²κΉ μ΄ λ μ΄λ €μΈ μ μμ |
| Shadow DOM | κ°λ ₯ν μΊ‘μν, μΉ νμ€μ μΌλΆ | λ 볡μ‘ν¨, μ μ€ν ν΅μ νμ |
| CSS-in-JS | κ°λ ₯ν μΊ‘μν, λμ μ€νμΌ | 볡μ‘μ± μ¦κ°, λ°νμ μ€λ²ν€λ, κ΄μ¬μ¬ λΆλ¦¬ λ Όμ |
CSS μ€μ½νλ₯Ό μν λͺ¨λ² μ¬λ‘
μ΄λ€ κΈ°μ μ μ ννλ ν¨κ³Όμ μΈ CSS μ€μ½νλ₯Ό 보μ₯νκΈ° μν΄ λ°λΌμΌ ν λͺ κ°μ§ λͺ¨λ² μ¬λ‘κ° μμ΅λλ€:
- μΌκ΄λ λ€μ΄λ° 컨벀μ μ¬μ©: CSS λ€μ΄λ° 컨벀μ (μ: BEM, SMACSS, OOCSS)μ μ ννκ³ νλ‘μ νΈ μ λ°μ κ±Έμ³ μΌκ΄λκ² μ¬μ©νμΈμ.
- μΌλ°μ μΈ ν΄λμ€ μ΄λ¦ μ¬μ© νΌνκΈ°: μμμ λͺ©μ κ³Ό λ¬Έλ§₯μ λ°μνλ ꡬ체μ μΈ ν΄λμ€ μ΄λ¦μ μ¬μ©νμΈμ. μΆ©λμ λ°©μ§νλ μ€μ½ν λ©μ»€λμ¦μ μ¬μ©νμ§ μλ ν
.button,.title, λλ.containerμ κ°μ μΌλ°μ μΈ μ΄λ¦ μ¬μ©μ νΌνμΈμ. - !important μ¬μ© μ΅μν:
!importantμ μΈμ μ€νμΌμ μ¬μ μνκΈ° μ΄λ ΅κ² λ§λ€κ³ μκΈ°μΉ μμ λμμ μ λ°ν μ μμ΅λλ€. κΌ νμν κ²½μ°κ° μλλ©΄!importantμ¬μ©μ νΌνμΈμ. - λͺ μμ±μ νλͺ νκ² μ¬μ©: μ€νμΌ κ·μΉμ μμ±ν λ CSS λͺ μμ±μ μ μνμΈμ. μ§λμΉκ² ꡬ체μ μΈ μ νμλ μ€νμΌμ μ¬μ μνκΈ° μ΄λ ΅κ² λ§λ€ μ μμΌλ―λ‘ μ¬μ©μ νΌνμΈμ.
- CSS νμΌ μ 리: νλ‘μ νΈμ λ§λ λ°©μμΌλ‘ CSS νμΌμ μ 리νμΈμ. κ° μ»΄ν¬λνΈκ° μ체 CSS νμΌμ κ°λ λͺ¨λμ μ κ·Ό λ°©μμ κ³ λ €νμΈμ.
- CSS μ μ²λ¦¬κΈ° μ¬μ©: Sassλ Lessμ κ°μ CSS μ μ²λ¦¬κΈ°λ λ³μ, λ―Ήμ€μΈ, μ€μ²©κ³Ό κ°μ κΈ°λ₯μ μ 곡νμ¬ λ μ μ§λ³΄μνκΈ° μ½κ³ νμ₯ κ°λ₯ν CSSλ₯Ό μμ±νλ λ° λμμ μ€ μ μμ΅λλ€.
- CSS μ² μ ν ν μ€νΈ: λ€μν λΈλΌμ°μ μ μ₯μΉμμ CSSλ₯Ό ν μ€νΈνμ¬ λͺ¨λ νλ«νΌμμ μΌκ΄λκ² λ³΄μ΄λμ§ νμΈνμΈμ.
- CSS λ¬Έμν: κ° μ€νμΌ κ·μΉμ λͺ©μ κ³Ό μ¬μ© λ°©λ²μ μ€λͺ νκΈ° μν΄ CSS μ½λλ₯Ό λ¬ΈμννμΈμ.
μ μΈκ³μ μμ
λ€μν λ¬Ένμ λμμΈ νΈλ λλ μΉ κ°λ°μμ CSSκ° μ¬μ©λκ³ λ²μκ° μ§μ λλ λ°©μμ μν₯μ λ―ΈμΉ μ μμ΅λλ€. λͺ κ°μ§ μμλ λ€μκ³Ό κ°μ΅λλ€:
- μΌλ³Έ: μΌλ³Έ μΉμ¬μ΄νΈλ μ’ μ’ μ 보 λ°λκ° λκ³ μκ°μ κ³μΈ΅ ꡬ쑰μ μ€μ μ λ‘λλ€. CSSλ κ°λ μ±κ³Ό μ¬μ©μ±μ κ°μ‘°νλ©° μ½ν μΈ λ₯Ό μ μ€νκ² κ΅¬μ±νκ³ μ°μ μμλ₯Ό μ νλ λ° μ¬μ©λ©λλ€.
- λ μΌ: λ μΌ μΉμ¬μ΄νΈλ λ§€μ° κ΅¬μ‘°μ μ΄κ³ μΈλΆ μ§ν₯μ μΈ κ²½ν₯μ΄ μμ΅λλ€. CSSλ μ λ°ν λ μ΄μμμ λ§λ€κ³ λͺ¨λ μμκ° μ¬λ°λ₯΄κ² μ λ ¬λκ³ κ°κ²©μ΄ μ μ§λλλ‘ νλ λ° μ¬μ©λ©λλ€.
- λΈλΌμ§: λΈλΌμ§ μΉμ¬μ΄νΈλ μ’ μ’ μμν μμκ³Ό λλ΄ν νμ΄ν¬κ·ΈλνΌλ₯Ό νΉμ§μΌλ‘ ν©λλ€. CSSλ λΈλΌμ§ λ¬Ένμ μλμ§μ μ°½μμ±μ λ°μνλ μκ°μ μΌλ‘ λ§€λ ₯μ μΈ λμμΈμ λ§λλ λ° μ¬μ©λ©λλ€.
- μΈλ: μΈλ μΉμ¬μ΄νΈλ μ’ μ’ μ ν΅μ μΈ λͺ¨ν°νμ ν¨ν΄μ ν΅ν©ν©λλ€. CSSλ μ΄λ¬ν μμλ₯Ό νλμ μΈ λμμΈ μμΉκ³Ό νΌν©νμ¬ μκ°μ μΌλ‘ λ§€λ ₯μ μ΄λ©΄μ λ¬Ένμ μΌλ‘λ κ΄λ ¨μ± μλ μΉμ¬μ΄νΈλ₯Ό λ§λλ λ° μ¬μ©λ©λλ€.
- λ―Έκ΅: λ―Έκ΅ μΉμ¬μ΄νΈλ μ’ μ’ λ¨μμ±κ³Ό μ¬μ©μ κ²½νμ μ°μ μν©λλ€. CSSλ νμνκΈ° μ¬μ΄ κΉ¨λνκ³ μ λλ λ μ΄μμμ λ§λλ λ° μ¬μ©λ©λλ€.
κ²°λ‘
ν¨κ³Όμ μΈ CSS μ€μ½νλ μ μ§λ³΄μ λ° νμ₯μ΄ μ©μ΄ν μΉ μ ν리μΌμ΄μ μ ꡬμΆνλ λ° νμμ μ λλ€. μ μ CSSμ λ¬Έμ μ μ μ΄ν΄νκ³ μ μ ν μ€νμΌ μΊ‘μν κΈ°λ²μ ꡬνν¨μΌλ‘μ¨ CSS μΆ©λμ λ°©μ§νκ³ μ½λ ꡬμ±μ κ°μ νλ©° λ κ²¬κ³ νκ³ μμΈ‘ κ°λ₯ν μ¬μ©μ μΈν°νμ΄μ€λ₯Ό λ§λ€ μ μμ΅λλ€. CSS λ€μ΄λ° 컨벀μ , CSS λͺ¨λ, Shadow DOM λλ CSS-in-JS μ€ λ¬΄μμ μ ννλ λͺ¨λ² μ¬λ‘λ₯Ό λ°λ₯΄κ³ νλ‘μ νΈμ νΉμ μꡬμ λ§κ² μ κ·Ό λ°©μμ μ‘°μ ν΄μΌ ν©λλ€.
μ μΈκ³ κ°λ°μλ€μ CSS μ€μ½νμ λν μ λ΅μ μ κ·Ό λ°©μμ μ±νν¨μΌλ‘μ¨ μ μ§λ³΄μ, νμ₯ λ° νμ μ΄ λ μ¬μ΄ μΉμ¬μ΄νΈμ μ ν리μΌμ΄μ μ ꡬμΆνμ¬ λͺ¨λμκ² λ λμ μ¬μ©μ κ²½νμ μ 곡ν μ μμ΅λλ€.