CSS 변수는 웹 개발자가 재사용 가능한 값을 정의하고 스타일 시트 전체에서 사용할 수 있도록 하는 강력한 기능입니다. 이러한 변수를 사용하면 스타일을 중앙 집중화하고 유지보수를 용이하게 할 수 있습니다.

CSS 변수의 정의

CSS 변수를 사용하려면 -- 접두사를 사용하여 정의해야 합니다. 예를 들어, 다음과 같이 변수를 정의할 수 있습니다.

:root {
  --primary-color: #ff0000;
  --secondary-color: #00ff00;
}

이렇게 정의된 변수는 :root 선택자 내에서 전역으로 사용할 수 있습니다.

변수 사용하기

정의된 변수를 사용하려면 var() 함수를 사용해야 합니다. 예를 들어, 다음은 변수를 사용하여 요소의 배경 색상을 정의하는 예시입니다.

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

동적 변수

동적 변수는 JavaScript를 사용하여 CSS 변수 값을 동적으로 변경하는 것을 말합니다. 이를 통해 사용자 인터랙션 또는 다양한 이벤트에 따라 스타일을 변경할 수 있습니다.

예를 들어, 다음은 JavaScript를 사용하여 CSS 변수 값을 변경하는 예시입니다.

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

결론

CSS 변수를 사용하면 페이지의 스타일을 보다 유연하게 관리할 수 있으며, JavaScript를 통해 변수 값을 동적으로 변경함으로써 다양한 상황에 적응할 수 있습니다. 이를 통해 웹 애플리케이션의 사용자 경험을 향상시키는 데 도움이 될 수 있습니다.

참고 자료:

• MDN Web Docs - CSS Variables
• CSS-Tricks - A strategy guide for adding dynamic content to static sites with Gatsby
• Codecademy - Learn CSS: Variables