By aPOST in CSS — 2023년 12월 23일

CSS 변수 - 변수(Variable) 사용 기초

1. CSS 변수(Variable)의 이해

변수는 프로그래밍 언어에서 사용하는 변할 수 있는 값을 담은 저장소입니다.

고유의 이름을 가지며, 연산이나 프로그램 로직에 반복적으로 사용할 수 있습니다.

CSS도 변수를 지원합니다.

지원한지는 오래되었지만, 국내에서는 적용하는 경우가 극히 드물었습니다.

이유는 인터넷 익스플로러에서 지원이 안되기 때문입니다.

변수만 사용해도 CSS 작성이 훨씬 유연해지고 간결해지는데도, 인터넷 익스플로러 호환성에 발목이 잡혀서 적용하기가 쉽지 않았습니다. 그동안 꾸준히 IE11 사용자가 줄어들면서 인터넷 익스플로러를 더 이상 지원하지 않는 사이트들이 꾸준히 늘어왔지만 2021년 8월에 IE11의 지원이 중단되면 완전히 퇴출되게 되기 때문에 드디어 CSS에도 변수를 사용할 수 있는 환경이 온전하게 갖추어지게 됩니다.

CSS는 반복되는 속성 값들이 상당히 많기 때문에 CSS 변수는 이런 반복되는 속성 값들을 변수에 담아 관리함으로써 관리를 편리하게 할 수 있습니다.

더 나아가서 SASS나 LESS와 같은 프리프로세서를 사용하면 스크립트를 작성하듯이 CSS를 작성할 수 있기 때문에 반복되는 CSS 작성 코드양을 상당히 줄일 수도 있습니다.

다만, 이런 프리프로세서는 컴파일을 해서 최종적으로 CSS를 생성해야 하기 때문에 작성한 스크립트 자체만으로는 사용할 수 없습니다.

이런 프리프로세서는 스크립트 언어 수준의 간단한 코드 작성을 하는 방식으로 CSS 를 구현하기 때문에 프로그래밍적인 지식을 필요로 합니다.

프로그래밍 코드나 스크립팅에 익숙하지 않은 디자이너에게 이런 프리프로세서는 너무 어려운 접근 방법입니다.

이런 어려운 접근 방법을 대신해 CSS 안에 변수를 사용하는 것만으로도 CSS 작성과 유지보수가 상당히 편리해집니다.

2. CSS 변수 정의

CSS 변수는 바(-) 2개를 붙여서 다음과 같이 표시합니다.

--red: #a00;

이렇게 CSS 속성을 정의하는 방법과 유사하게 표시하면 "--red" 변수명에 "#a00" 이라는 속성 값이 적용된 것입니다.

CSS 변수는 CSS 안의 CSS 를 정의하는 클래스/아이디 안이면 아무 곳에나 속성을 선언하는 것처럼 선언할 수 있습니다.

변수 선언 또한 속성을 상속하는 CSS의 특성을 그대로 이어받기 때문에 스코프 개념 또한 그대로 유지됩니다.

.content{
	--newcolor: #000;
}

이렇게 선언한 "--newcolor" 변수는 ".content" 하위로 정의한 CSS 에서만 사용할 수 있습니다.

예를 들어 ".content .menu" 클래스에서는 "--newcolor" 변수를 사용할 수 있지만, ".menu" 와 같이 하위가 아닌 클래스에서는 "--newcolor" 변수는 인식되지 않습니다.

전역으로 사용하기 위한 변수(들)은 다음과 같이 ":root" 가상 클래스에 정의합니다.

변수를 사용하는 기본 방법의 하나이므로 ":root" 가상 클래스에 변수를 정의한다고 기본적으로 생각을 하고 CSS 변수를 사용하는 것을 추천합니다.

:root{
  --red: #a00;
  --dark: #404040;
  --light: #c0c0c0;
}

이렇게 루트 가상 클래스에 정의한 변수는 CSS 파일 안에서 전역으로 사용할 수 있습니다.

3. 변수의 사용

선언한 CSS 변수 사용은 간단합니다.

변수 값을 적용할 속성 값 위치에 "var()"로 변수명을 감싸서 표시하면 됩니다.

예를 들어

color: var(--red);

와 같이 표시합니다. CSS 파싱을 할 때 "--red" 변수는 실제 값으로 치환되어 속성 값으로 적용됩니다.

공통적으로 사용하는 컬러, 글자 크기 등을 ":root"에 정의한 후, CSS 전체에 변수를 적용하면, 테마를 관리하듯이 CSS 속성을 관리할 수 있게 됩니다.

정의되지 않은 변수를 사용하는 경우 해당 속성은 무시됩니다.

4. 변수 기본값 설정(폴백)

CSS 변수 사용시 변수가 정의되지 않은 경우 해당 속성은 무시되기 때문에, 원하지 않는 속성 값이 적용되는 문제가 생길 수 있습니다. 이런 경우를 위해 변수를 적용할 때 변수가 정의되지 않은 경우 기본 값을 설정할 수 있도록 배려를 하고 있습니다.

속성 적용시 다음과 같이 2번째 파라메터로 속성 값을 설정하면 변수가 정의되지 않았을 때 기본 값이 적용되도록 할 수 있습니다.

color: var(--red, black);

5. 자바스크립트에서 CSS 변수의 접근

선언한 변수는 자바스크립트에서도 접근할 수 있습니다. CSS 속성을 접근하는 것과 동일한 방법으로 접근할 수 있으며, 변수 값을 변경하는 것도 가능합니다.

예를 들어 앞의 예에서 루트 가상 클래스(":root")에 선언한 변수를 읽어서 값을 변경하는 방법은 다음과 같습니다.

let theme = document.querySelector(':root');
let styles = getComputedStyle(theme);
console.log(styles.getPropertyValue('--hover')); // 변수 값 얻기
theme.style.setProperty('--hover', 'green'); // 변수 값 변경

단 자바스크립트로 변수 값을 변경하는 경우 HTML 코드에 인라인으로 CSS가 선언되기 때문에 "<style></style>" 태그, 또는 별도의 CSS 파일로 선언한 CSS 속성보다 우선 순위가 있기 때문에 변수를 중복 선언한 경우 자바스크립트로 선언한 변수 값이 최 우선 순위를 가지게 됩니다.