CSS 변수 완벽 가이드 – 사용자 지정 CSS 속성 사용하기

CSS 변수란 무엇인가?

CSS 변수란 CSS에서 사용할 수 있는 변수입니다.
사용자 지정 CSS 속성(CSS Custom Properties)이라고도 불리는 CSS 변수는 자바스크립트나 PHP와 같은 프로그래밍 언어에서 널리 사용되는 변수 개념을 CSS에 도입한 것입니다. CSS 변수를 도입함으로써, 변수 사용의 장점을 CSS에서도 활용할 수 있게 되었습니다.

CSS 변수를 활용하면 CSS 코드를 재사용하고 유지 관리하기 쉽기 때문에 CSS를 다루는 웹 개발자들은 CSS 변수를 많이 활용합니다. 먼저 CSS 변수 사용의 필요성을 살펴본 후, CSS 변수 사용법, CSS 변수 값 변경 등에 대해 알아보겠습니다.

CSS 변수 사용의 필요성

변수는 값을 저장하고 재사용하기 위한 도구로, 자바스크립트나 PHP와 같은 프로그래밍 언어에서 널리 사용됩니다.
CSS에서도 변수를 도입함으로써 변수 사용의 장점을 활용할 수 있게 되었습니다.

변수를 사용하면 같은 값을 여러 번 사용해야 할 때 편리합니다.

예를 들어, 웹사이트의 주된 색상으로 짙은 보라색(#8B008B)을 사용한다고 가정합시다.
텍스트의 색상을 웹사이트의 주된 색상인 짙은 보라색으로 지정하려면 다음과 같이 CSS 코드를 작성할 수 있습니다.

하지만 웹사이트의 주된 색상인 짙은 보라색를 여러 번 지정해야 한다면 동일한 CSS 코드를 반복적으로 사용해야 합니다.

이때 번번이 짙은 보라색을 의미하는 #8B008B를 여러 번 사용해서 코드에 삽입해야 합니다.

그런데, 만약에 웹사이트의 주된 색상인 짙은 보라색을 단순한 변심이나 혹은 정책으로 인해서 짙은 회색(#A9A9A9)으로 변경해야 한다고하면 코드를 어떻게 바꿔야 할까요?

물론, 하나하나 바꾸면 됩니다. 아래와 같이 바꾸면 됩니다.

하지만 위 예제처럼 몇 개의 코드만 바꿔야 하지 않고 바꿔야 할 색상코드가 100개 혹은 200개라면 어떨까요?

편집기로 쉽게 한 번에 바꿀 수도 있지만, 이러한 반복적인 수정은 무척이나 번거롭고 실수를 유발할 수 있기 때문에 비효율적이라고 할 수 있습니다. 그리고 위 예제에서 볼 수 있듯이 색상코드가 사람의 눈으로 보기에는 다른 코드와 구별해서 보기도 불편합니다.

다음의 예제코드는 CSS 변수를 사용하여 웹사이트의 주된 색상인 짙은 보라색을 지정한 것입니다. 아직은 CSS 변수 사용법을 모르더라도 코드를 보면 대략 짐작이 갈 것입니다.

CSS CSS 변수를 사용한 예제입니다.

:root {
    --primary-color: #8B008B;
    /* 웹사이트의 주된 색상으로 짙은 보라색(#8B008B)을 --primary-color라는 변수 이름으로 저장한다. */
}
p {
    color: var(--primary-color);
    /* var(변수이름)를 이용해서 --primary-color 변수의 값이 필요한 곳에 삽입한다. */
}
h1 {
    background-color: var(--primary-color);
    /* var(변수이름)를 이용해서 --primary-color 변수의 값이 필요한 곳에 삽입한다. */
}
div {
    border-color: var(--primary-color);
    /* var(변수이름)를 이용해서 --primary-color 변수의 값이 필요한 곳에 삽입한다. */
}
...

CSS :root 가상 클래스 선택자

CSS 변수를 활용해서 웹사이트의 주된 색상인 짙은 보라색을 단순한 변심이나 혹은 정책으로 인해서 짙은 회색(#A9A9A9)으로 변경해 보겠습니다.

CSS CSS 변수를 사용한 예제입니다.

:root {
    --primary-color: #A9A9A9; /* 보라색(#8B008B)을 짙은 회색(#A9A9A9)으로 변경함 */
}
p {
    color: var(--primary-color);
}
h1 {
    background-color: var(--primary-color);
}
div {
    border-color: var(--primary-color);
}
...

위 예제 코드에서 알 수 있듯이 CSS 변수를 사용하지 않았을 경우와 비교해 볼 때 CSS 변수를 사용하면 같은 값을 여러 번 사용해야 할 때 --primary-color: #8B008B; 를 --primary-color: #A9A9A9;로 단 한 번의 변경만으로 사용할 수 있어서 매우 편리합니다. CSS 변수는 CSS 코드를 재사용하고 유지 관리하기 쉽게 만들 수 있는 유용한 기능입니다.

잠시만! CSS 변수는 CSS 속성(CSS Custom Properties)이라는 이름으로 2015년에 도입되었고, 2017년에 CSS Cascading and Inheritance Level 3 (CSS 3)의 일부로 공식 표준화되었습니다.

그럼 CSS 변수 사용법에 대해 알아보겠습니다.

CSS 변수의 기본 사용법

CSS 변수(또는 사용자 지정 CSS 속성)는 다음과 같은 구문과 서식으로 정의하고 사용할 수 있습니다.

CSS 변수 정의하기

CSS CSS 변수 정의하기

selector { /* 선택자는 변수가 적용되는 범위를 결정하는데 사용함 */
    --primary-color: #8B008B;
    /* --변수명: 값 */
}

selector: 선택자는 변수가 적용되는 범위를 결정하는데 사용됩니다. 만약에 문서 전체에서 사용할 변수를 설정한다면 선택자는 :root 나 body 로 사용하면 됩니다. 만약에 .container라는 클래스 내부의 자손 요소에서만 사용할 변수라면 선택자로 .container를 사용하면 됩니다.
--primary-color: 사용할 변수이름을 지정한 것입니다. 변수이름은 -- 기호 뒤에 사용할 변수 이름을 사용해야 하는 규칙이 있습니다.
#8B008B: 변수의 값입니다.

정의한 변수는 변수를 정의할 때 사용한 선택자나 그 자손 요소에서 var(정의한 변수이름) 형태의 함수 형식으로 원하는 속성의 값으로 사용할 수 있습니다. 이 속성의 값은 정의한 변수의 값이 됩니다. 위 CSS 변수 정의하기 예제에서 정의한 변수 --primary-color를 사용할 경우에 var(--primary-color)는 #8B008B와 동일합니다. 아래의 CSS 변수 사용하기 예제를 통해 살펴보겠습니다.

CSS 변수 사용하기

CSS CSS 변수 사용하기

p { /* 이 선택자는 변수를 정의한 선택자의 하위 요소 즉 자손 요소이어야 함 */
    color: var(--primary-color); /* color: #8B008B;와 동일함 */
    /* var(정의한 변수이름) 형식으로 --primary-color 변수의 값이 필요한 곳에 삽입한다. */
}
h1 { /* 이 선택자는 변수를 정의한 선택자의 하위 요소 즉 자손 요소이어야 함 */
    background-color: var(--primary-color); /* background-color: #8B008B;와 동일함 */
    /* var(정의한 변수이름) 형식으로 --primary-color 변수의 값이 필요한 곳에 삽입한다. */
}
div { /* 이 선택자는 변수를 정의한 선택자의 하위 요소 즉 자손 요소이어야 함 */
    border-color: var(--primary-color); /* border-color: #8B008B;와 동일함 */
    /* var(정의한 변수이름) 형식으로 --primary-color 변수의 값이 필요한 곳에 삽입한다. */
}

위 예시는 selector 내에서 --primary-color라는 변수를 정의하고 이를 사용한 것입니다. selector 내부에서만 --primary-color 변수를 사용할 수 있습니다.

CSS 변수의 상속과 CSS 변수 값의 변경 (Overriding)

CSS 변수도 상속 대상이 됩니다. 그러므로 특정 요소에 사용자 지정 속성 값을 설정하지 않은 경우, 그 부모의 값을 사용합니다. 다음의 HTML 코드를 예제를 살펴보겠습니다.

아래의 CSS 코드를 적용할 것입니다.

그러면, fon-size: var(--test);의 결과는 다음과 같습니다.

class="two" 요소의 font-size: 10px
class="three" 요소의 font-size: 2em
class="four" 요소의 font-size: 10px (부모로부터 상속)
class="one" 요소의 font-size: 유효하지 않음.

위 예제에서 알 수 있듯이 CSS 변수는 변수의 선택자 범위 내에서만 상속됩니다.
변수의 범위 내에서 값을 변경하면 값을 변경한 선택자의 내에서는 변경된 값이 상속됩니다.

반응형 웹(미디어 쿼리)에서 CSS 변수 값 변경하기

반응형 웹을 구현하는 미디어 쿼리 내에서도 CSS 변수의 값을 변경할 수 있습니다.

위 예제 코드를 실행하면 뷰포트가 1024px 이하에서는 <p> 요소의 font-size가 13px이 됩니다. 이를 통해 알 수 있듯이 미디어 쿼리 내에서 CSS 변수의 값을 변경할 수 있습니다.

뷰포트(viewport)는 웹 브라우저 용어로, 현재 창(또는 전체 화면 모드로 문서를 보고 있는 경우 화면)에 표시되는 문서의 부분으로 웹 페이지가 보여지는 영역을 의미합니다.

CSS 변수의 대체값 (혹은 기본값) 사용하기

CSS 변수의 대체값(또는 fallback value)은 변수가 정의되지 않았을 때 사용되는 기본값을 지정하는 선택적인 값입니다. 이렇게 함으로써, 변수가 정의되지 않은 경우에도 스타일이 무너지지 않고 기본값을 설정할 수 있습니다.

CSS 변수의 대체 값은 var() 함수의 두 번째 인자로 사용됩니다. var() 함수의 구문은 다음과 같습니다.

여기서 대체 값은 변수가 정의되지 않았을 때 사용될 값입니다. 선택적으로 사용할 수 있습니다. 예를 들어, 다음과 같이 CSS 변수에 대체 값을 설정한 경우를 살펴보겠습니다.

CSS

:root {
    --primary-color: #00a0e9;
}
.container {
    color: var(--primary-color, #1a1aff);
    background-color: var(--secondary-color, #3333ff);  /* --secondary-color 변수는 정의되어 있지 않음 */
}

위의 코드 예제에서 .container의 color 속성에 사용된 var(--primary-color, #1a1aff) 변수는 :root 선택자에 정의되어 있는 --primary-color 변수가 있기 때문에 그 값인 #00a0e9가 사용됩니다.

하지만, .container의 background-color 속성에 사용된 var(--secondary-color, #3333ff) 변수는 정의되어 있지 않은 변수입니다. 이렇게 변수가 정의되어 있지 않으면, 즉 정의되어 있지 않는 변수를 사용 경우에는 대체 값으로 #3333ff가 사용됩니다.

대체 값을 사용하면 웹 페이지의 스타일을 안정적으로 유지할 수 있으며, 예기치 못한 에러를 방지할 수 있습니다.

참고로 대체 값은 CSS 변수로도 사용할 수 있습니다. 대체 값을 CSS 변수로 사용할 경우 아래와 같이 사용할 수도 있습니다.

CSS

.container {
    background-color: var(--my-var, var(--my-background, pink));
    /* my-var와 --my-background가 정의되지 않았을 경우 pink로 표시됨 */
}
.container {
  background-color: var(--my-var, --my-background, pink);
  /* 유효하지 않음: "--my-background, pink" */
}
.container {
    background-color: var(--my-var, --my-primary-background);
    /* 유효하지 않음(대체 값이 없는 변수는 대체 값으로 사용할 수 없음) : "--my-primary-background" */
}

주의하세요!
CSS 변수의 대체 값은 정적인 값이 있어야만 사용 가능합니다. CSS 변수의 대체값은 일반적으로 CSS 변수가 정의되지 않았을 때 기본값을 제공하기 위해 사용하는 것이기 때문입니다.

자바스크립트로 CSS 변수 제어하기

CSS 변수을 자바스크립트로 접근하고 설정하는 방법은 간단합니다. CSS 변수를 사용하면 자바스크립트로 값을 동적으로 변경하여 스타일을 조작할 수 있습니다.

자바스크립트로 CSS 변수 제어하기

브라우저 호환성

CSS 변수에 대한 브라우저 호환성
속성	데스크탑 Chrome	데스크탑데스크탑 Edge	데스크탑 Firefox	Safari
`--*`	49	15	31	9.1
`var()`	49	15	31	9.1

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

CSS 변수에 대한 명세서
명세서 사양
`CSS 변수`	CSS Custom Properties for Cascading Variables Module Level 1 #defining-variables

참고문헌

같이 보기

CSS rem과 em 단위 - 올바른 이해와 사용 방법