[CSS] 변수 Custom Properties

 

CSS 변수

CSS 변수는 기존의 정적인 CSS 스타일링에서 벗어나 동적이고 유연한 스타일 관리를 가능하게 한다. 장점은 코드의 재사용성과 유지보수성을 크게 향상시킨다는 점이다. 단순히 값을 반복해서 작성하는 대신, 한 곳에서 정의하고 전체 스타일에 적용할 수 있다.

 

변수를 선언하는 기본 문법은 대시 두 개(--) 로 시작한다. 예를 들어 --main-color: #3498db; 처럼 정의할 수 있다. 이 변수는 var() 함수를 통해 호출할 수 있고 전역 변수는 주로 :root 선택자에서 정의한다. 이는 문서 전체에서 접근 가능한 변수를 만드는 방법이다.

 

예시

:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --font-size-base: 16px;
}

 

로컬변수의 경우

.card {
  --card-padding: 20px;
  padding: var(--card-padding);
}

 

미디어쿼리 내

:root {
  --container-width: 100%;
}

@media (min-width: 768px) {
  :root {
    --container-width: 750px;
  }
}

 

다크모드 변수

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

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

 

fallback 설정, 기본값 설정

.element {
  color: var(--custom-color, black);
}

 

javascript와 활용

document.documentElement.style.setProperty('--primary-color', '#ff0000');

 

 

주의사항

브라우저 호환성은 대부분의 최신 브라우저에서 잘 지원된다. 다만 오래된 브라우저에서는 주의가 필요하다. Internet Explorer에서는 완전히 지원되지 않으므로, 폴백(fallback) 스타일을 반드시 준비해야 한다.

 

성능 측면에서도 주의가 필요하다. 너무 많은 CSS 변수를 선언하면 렌더링 성능에 미세한 영향을 줄 수 있다. 꼭 필요한 변수만 선언하고, 과도한 중첩은 피해야 한다.

 

스코프와 상속에 대해서도 명확히 이해해야 한다. 변수는 상속되지만, 상속 과정에서 값이 예상치 못하게 변경될 수 있다. 특히 미디어 쿼리나 다른 선택자에서 재정의할 때 주의해야 한다.