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

선언 방법

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

:root { /* 보통 이 패턴을 많이 사용한다. */
  --main-bg-color: brown;
}

div { /* 요소에서도 사용 가능하다. */
  --main-bg-color: brown;
}

---

사용 방법

var() 함수를 지정하고, 매개변수로 선언한 사용자 지정 속성의 이름을 사용한다.

/* :root로 사용했을 경우 */
:root {
  --main-bg-color: brown;
}

.header {
  background: var(--main-bg-color);
}

/* 요소에서 사용했을 경우 */
div { 
  --main-bg-color: brown;
  background: var(--main-bg-color);
}

---

상속

사용자 지정 속성은 상속 대상이다.

그러므로 특정 요소에 사용자 지정 속성 값을 설정하지 않은 경우, 그 부모의 값을 사용한다.

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

.two { --test: 10px; }
.three { --test: 2em; }

var(--test)의 결과는 다음과 같다.

• class="four" 요소: 10px (부모로부터 상속)
• class="three" 요소: 2em
• class="two" 요소: 10px
• class="one" 요소: 유효하지 않음. 모든 사용자 지정 속성의 기본값.

---

[기본 지식]

[CSS] var ()
[CSS] :root 의사 클래스

 

[공부 좌표]

사용자 지정 CSS 속성 사용하기 (변수)