CSS 변수는 스타일 시트에서 재사용 가능한 값을 저장하고 참조할 수 있는 강력한 기능입니다. 이러한 변수를 사용하면 색상, 여백, 폰트 크기 등과 같은 값을 중복해서 정의하지 않고 한 번에 유지보수할 수 있습니다.

변수 정의

CSS 변수는 -- 접두사를 사용하여 정의됩니다. 예를 들어, 다음과 같이 색상 변수를 정의할 수 있습니다.

:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
}

위의 코드에서 :root 선택자는 HTML 문서의 루트 요소를 의미하며, 전역 범위에서 사용할 수 있는 변수를 정의합니다.

변수 사용

정의된 변수를 사용하려면 var() 함수를 사용하여 해당 변수를 참조합니다. 예를 들어, 배경색을 변수로 지정하는 경우:

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

정적 변수

CSS 변수는 동적으로 작동하며, 런타임에 변경될 수 있습니다. 그러나 특별한 경우에는 런타임 중에 변경되지 않는 정적 변수를 정의할 수도 있습니다. 이러한 변수는 상수로 사용되며 어디서든 접근 가능합니다.

:root {
  --site-width: 960px; /* 정적 변수 */
}

위의 예에서 --site-width 변수는 런타임에 변경될 필요가 없는 사이트 전체의 너비를 나타냅니다.

결론

CSS 변수를 사용하여 스타일 시트에서 정적으로 사용되는 값을 정의하고 참조하는 것은 코드 유지보수성과 가독성을 향상시키는 데 도움이 됩니다. 이를 통해 쉽게 변경할 수 있는 중요한 값을 한 곳에 모아둘 수 있으며, 코드 중복을 방지할 수 있습니다.

참고 문헌: MDN Web Docs

위의 내용은 CSS 변수와 정적 변수에 대한 간단한 소개입니다. CSS 변수의 사용 및 장점을 더 자세히 알고 싶다면 참고 문헌에서 더 많은 정보를 확인해보세요.