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

이론/CSS

millfeel1298 2021. 11. 9. 08:49

사용자 지정 속성은 두 개의 붙임표로 시작하는 속성의 이름과 함께, 유효한 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)의 결과는 다음과 같다.

[기본 지식]

[공부 좌표]