[CSS] 사용자 지정 변수(Variable) 사용하기

CSS에서도 사용자 지정 변수를 사용할 수 있는데,

이는 JS 같은 곳과 마찬가지로 문서 전반적으로 재사용할 임의의 값을 변수에 담아 사용하는 것과 동일하다.

 

CSS에서 변수를 사용하는것도 처음부터 가능했던 건 아니라, CSS preprocessor(전처리기)의 등장으로 변수를 많이들 사용하다 보니까 이게 CSS 표준으로 들어오게 된 것이다.

 

아마 추후에는 전처리기에서 사용하는 기능들이 하나씩 표준으로 들어오지 않을까 생각된다.

이제 예제를 통해 사용법을 하나씩 알아보자.

---

1. 기본 사용법

사용자 지정 변수는 두 개의 붙임표(--)로 시작하는 속성의 이름과 함께, 유효한 CSS 값이라면 아무거나 그 값으로 지정해 선언한다.

<div id="div-0">Here is id div-01</div>
<div id="div-1">
  <span>Here is class div-03</span>
</div>
<div class="div-2">Here is class div-03</div>

:root {
  --main-bg-color: brown;
  --sub-bg-color: #5f5f5f;
  --main-font-color: white;
}

#div-0 {
  background-color: var(--main-bg-color);
  color: var(--main-font-color);
}

.div-2 {
  background-color: var(--sub-bg-color);
}

이런 식으로 변수를 지정해서 사용할 수 있는데, 일반적으로 많이 사용하는 패턴은 :root 의사 클래스에 선언해서 HTML 문서 어디에서나 사용자 지정 변수에 접근할 수 있도록 구성하는 패턴을 많이 사용한다.

 

여기서 하나 주의할 점은 변수는 대소문자를 구별하기 때문에 main-bg-color와 main-Bg-color를 다르게 인식한다.

진짜 말 그대로 javascript 변수라고 생각하면 좋을 거 같다.

 

2. CSS 변수의 유효 범위와 상속

변수는 말 그대로 전역 변수와 지역변수가 있는데, 이러한 개념이 CSS에서도 동일하다.

그리고 지역변수의 경우 선택자에 따라 변수를 상속해서 사용할 수 있는 특징을 가지고 있다.

<div class="one">
  <div class="two">
    <div class="three"></div>
    <div class="four"></div>
  </div>
</div>

.two {
  --test: 10px;
  font-size: var(--test); /* 10px */
}

.three {
  --test: 2em;
  font-size: var(--test); /* 2em */
}

.four {
  font-size: var(--test); /* 10px (상속) */
}

1번 기본 사용법에서 설명한 것처럼 :root에 지정한 것은 보통 전역 변수라 생각하고 HTML 문서 어디에서든 사용이 가능하지만, 위 예제처럼 특정 선택자 안에 선언된 변수는 지역변수라 생각하면 된다.

 

여기서 더 나아가. four의 경우 --test가 선언이 되어있지 않지만 사용 가능한 이유는. two의 자식 요소 이기 때문이며. two에 선언된 --test 변수를 상속받아 사용이 가능하다. (물론. three처럼 정의해서 사용해도 상관없다.)

 

3. CSS 변수 대안 값

CSS 변수가 정의되지 않았을 때, var()를 이용하여 여러 개의 대체 변수를 정의할 수 있다.

.two {
  color: var(--my-var, red); 
  /* --my-var가 정의되지 않았을 경우 red로 표시됨 */
}

.three {
  background-color: var(--my-var, var(--my-background, pink)); 
  /* my-var와 --my-background가 정의되지 않았을 경우 pink로 표시됨 */
}

.three {
  background-color: var(--my-var, --my-background, pink); 
  /* 유효하지 않음: "--my-background, pink" */
}

 

4. 유효하지 않은 CSS 변수 처리

만일 브라우저가 유효하지 않은 var() 구문을 만나게 되면, 그 속성의 초기값이나 상속된 값이 사용된다.

<p>This paragraph is initial black.</p>

:root { --text-color: 16px; }
p { color: blue; }
p { color: var(--text-color); }

color에 16px이라는 속성은 유효한 값이 아니며, 이럴 경우 브라우저는 두 단계로 처리하게 된다.

1. color 속성이 상속되었는지를 확인한다. 확인, 그런데 <p>가 color 속성과 연관된 부모 엘리먼트가 없다. 그렇다면 다음 단계로 넘어간다.
2. 값을 default initial value, (초기 설정 디폴트 값) 즉, black 으로 처리한다.

 

5. JavaScript에서의 CSS 변수 접근

// 인라인 스타일에서 변수 얻기
element.style.getPropertyValue("--my-var");

// 어느 곳에서나 변수 얻기
getComputedStyle(element).getPropertyValue("--my-var");

// 인라인 스타일에 변수 설정하기
element.style.setProperty("--my-var", jsVar + 4);

---

추가적으로 해당 CSS 변수를 좀 더 잘 사용하고 싶다면 아래 블로그에서 상세하게 다뤘으니 참고해보길 바란다.

(https://fresh-mint.tistory.com/entry/css-variable-변수-총-정리)

---

참고: https://developer.mozilla.org/ko/docs/Web/CSS/Using_CSS_custom_properties

사용자 지정 CSS 속성 사용하기 (변수) - CSS: Cascading Style Sheets | MDN