CSS 변수는 CSS 스타일 시트에서 재사용 가능한 값을 정의하고 저장하는 데 사용됩니다.

변수 선언

CSS 변수를 선언하는 방법은 다음과 같습니다.

:root {
  --primary-color: #FF5733;
  --secondary-color: #6C5CE7;
}

이 예제에서는 :root 선택자 안에서 --primary-color 및 --secondary-color와 같은 변수를 선언했습니다. :root는 문서의 최상위 요소를 가리키는 가상 선택자입니다.

변수 사용

이제 선언된 변수를 다음과 같이 사용할 수 있습니다.

.element {
  color: var(--primary-color);
  background-color: var(--secondary-color);
}

변수의 장점

CSS 변수의 주요 장점으로는 아래와 같은 것들이 있습니다:

• 코드의 재사용성 향상
• 일관된 스타일을 쉽게 유지 보수
• 전역 스타일 값의 쉬운 관리

브라우저 호환성

CSS 변수는 현대 브라우저에서 잘 지원됩니다. 그러나 IE11 및 구형 브라우저에서는 지원되지 않을 수 있으므로 이를 고려해야 합니다.

CSS 변수의 사용법에 대해 간단하게 소개해보았습니다. 이를 통해 CSS의 유연성과 효율성을 높일 수 있으며, 코드 유지보수를 쉽게 할 수 있습니다.

참고문헌:

• MDN Web Docs - CSS Custom Properties