CSS 변수 (Custom Properties)

CSS 변수(커스텀 프로퍼티)는 재사용 가능한 값을 저장하고 활용할 수 있는 기능이야. 반복되는 색상, 크기, 간격 등을 변수로 선언하면 유지보수가 쉬워져!

CSS 변수는 --(대시 두 개)로 시작하는 이름을 사용해 정의해. var(--변수이름) 형식으로 값을 가져올 수 있어!

:root {
  --main-color: blue;
  --font-size: 18px;
}
p {
  color: var(--main-color);
  font-size: var(--font-size);
}
/* --main-color 변수에 저장된 값을 가져와서 텍스트 색상으로 사용! */

CSS 변수 선언 및 사용법

:root에서 전역 변수 선언

:root를 사용하면 모든 요소에서 변수 사용 가능!

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --text-color: #333;
}

특정 요소에서 로컬 변수 선언

특정 요소 안에서만 변수 적용 가능!

.card {
  --card-bg: lightgray; /* 이 변수는 .card 내부에서만 사용 가능! */
  background-color: var(--card-bg);
}

var(--변수명)으로 변수 사용

h1 {
  color: var(--primary-color);
}
p {
  color: var(--text-color);
}

CSS 변수의 장점

재사용 가능 : 여러 곳에서 동일한 스타일을 적용 가능
유지보수 쉬움 : 변수 값만 변경하면 전체 스타일 수정 가능
반응형 디자인 활용 가능 : calc(), media query와 함께 사용 가능

예시

다크 모드

:root {
  --bg-color: white;
  --text-color: black;
}

.dark-mode {
  --bg-color: black;
  --text-color: white;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}
/* .dark-mode 클래스를 추가하면 다크 모드 자동 적용! */

반응형 디자인

:root {
  --font-size: 16px;
}
@media (max-width: 768px) {
  :root {
    --font-size: 14px;
  }
}
p {
  font-size: var(--font-size);
}
/* 화면 크기에 따라 자동으로 폰트 크기 조절! */

calc()와 함께 사용

:root {
  --base-size: 10px;
}
.box {
  width: calc(var(--base-size) * 5); /* 50px */
}

2.1 KiB Raw Blame History