CSS 변수란 무엇인가?
CSS 변수(사용자 정의 속성, Custom Properties)는 웹 페이지에 원하는 값을 저장하고 재사용할 수 있게 해주는 기능입니다. 자주 사용하는 색상, 크기, 간격 등의 값을 변수 이름으로 정의해 두면, 여러 곳에서 동일한 값을 손쉽게 불러와 사용할 수 있습니다.
변수를 활용하면 디자인 변경 시 한 곳만 수정하면 되므로 코드의 유지보수성이 크게 향상되며, 테마 전환이나 다크 모드 구현에도 매우 유용합니다.
변수 선언과 사용 방법
CSS 변수는 항상 두 개의 하이픈(--)으로 시작하는 이름으로 선언합니다. 일반적으로 :root 선택자에 정의하면 문서 전체 어디서든 접근할 수 있습니다.
- 선언: --변수-이름: 값; 형태로 작성합니다.
- 사용: var(--변수-이름) 함수를 통해 값을 불러옵니다.
예제: 배경색과 글자색 변경하기
다음 예제는 CSS 변수를 사용하여 요소의 배경색과 글자색을 지정하는 방법을 보여줍니다. 직접 실행해 보면서 결과를 확인해 보세요.
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--my-bg-color: blue;
--my-color: white;
}
#demo {
background-color: var(--my-bg-color);
color: var(--my-color);
}
</style>
</head>
<body>
<h1>Heading One</h1>
<div id = "demo">This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text.
</div>
<br>
</body>
</html>코드 설명
- :root 선택자: 문서의 최상위 요소(html)를 대상으로 하며, 여기에 선언된 변수는 전역적으로 사용할 수 있습니다.
- --my-bg-color: blue; 파란색 배경값을 저장하는 변수입니다.
- --my-color: white; 흰색 글자색을 저장하는 변수입니다.
- var() 함수: #demo 요소에서 각 변수를 불러와 background-color와 color 속성에 적용합니다.
마무리
CSS 변수를 사용하면 반복되는 스타일 값을 한 곳에서 중앙 집중식으로 관리할 수 있습니다. 프로젝트 규모가 커질수록 그 효과는 더욱 커지므로, 색상 팔레트나 공통 간격 값은 변수로 정의해 사용하는 습관을 들이는 것이 좋습니다.