CSS의 var() 함수는 웹 페이지에 커스텀 속성(사용자 정의 변수) 값을 적용할 때 사용합니다. 커스텀 속성에는 고유한 이름을 지정하고, 그에 맞는 값을 설정할 수 있습니다.
var() 함수란?
var() 함수는 CSS 변수(Custom Property)에 저장된 값을 불러와 스타일에 적용하는 함수입니다. 일반적으로 :root 선택자에서 전역 변수를 선언한 뒤, 필요한 요소에서 호출하여 사용합니다. 색상, 크기 등 반복적으로 사용되는 값을 한 곳에서 관리할 수 있어 코드의 유지보수가 훨씬 수월해집니다.
사용 예제
아래 코드를 실행하면 var() 함수가 실제로 어떻게 동작하는지 확인할 수 있습니다.
<!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>
코드 설명
--my-bg-color와--my-color라는 두 개의 커스텀 속성을:root에 선언했습니다.#demo요소에서 var() 함수를 사용해 배경색과 글자색을 각각 지정합니다.- 변수 값만 변경하면 해당 변수를 참조하는 모든 요소의 스타일이 한 번에 업데이트됩니다.
대체 값(Fallback) 활용하기
var() 함수는 두 번째 인수로 대체 값을 지정할 수 있습니다. 변수가 정의되지 않았거나 유효하지 않은 경우 대체 값이 적용되므로, 안정적인 스타일링에 유용합니다.
color: var(--my-color, black);