현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

CSS 변수는 문서 전반적으로 재사용할 어떠한 특정 값을 포함하는, CSS 작성자가 정의한 엔터티이다.  이 변수는 사용자 정의 속성 표기법 (예 :--main-color: black;)을 사용하여 설정되며 var () 함수를 이용하여 엑세스할 수 있다. (예 : color: var(--main-color);).

복잡한 웹사이트들은 어마 어마한 양의 CSS 를 가지고 있고, 종종 반복되는 속성 값들을 가진다. 예를 들어, 수백군데의 곳에서 같은 색상이 사용되고, 해당 색상의 변경이 필요하면 전역 검색을 한 뒤 수정해야 한다. CSS변수는 한 영역에 값을 저장해 놓고 여러 다른 공간에서 참조해 사용할 수 있다. 추가적인 장점은 의미론적 식별자라는 것이다. 예를 들어  --main-text-color 는 코드로 작성된 #00ff00보다 훨씬 이해하기가 쉬운데, 특히 동일한 색상이 다른 영역에서 사용되는 경우, 이 색상이 가진 특징을 바로 이해할 수 있을 것이다.

CSS 변수는 종속되며, 부모로부터 값을 상속받는다.

Basic usage

변수 선언:

element {
  --main-bg-color: brown;
}

변수의 사용:

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

Note: 사용자 속성 프리픽스는 이전 스팩에서 var- 로 사용되었지만, 최근에 --으로 변경되었다.  파이어폭스 31과 상위 버전은 새로운 스팩을 적용하고 있다. (bug 985838)

First steps with CSS Variables

아래의, 동일한 색상을 가지고 있는 서로 다른 클래스의 요소에 색상을 변경하는 간단한 CSS와 함께 시작해보자:

.one {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}

.two {
  color: white;
  background-color: black;
  margin: 10px;
  width: 150px;
  height: 70px;
  display: inline-block;
}
.three {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 75px;
}
.four {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 100px;
}

.five {
  background-color: brown;
}

이것을 HTML에 적용해 보자:

<div>
  <div class="one">1:</div>
  <div class="two">2: Text <span class="five">5 - more text</span></div>
  <input class="three">
  <textarea class="four">4: Lorem Ipsum</textarea>
</div>

결과물은 아래와 같다:


CSS 반복에 주목해 보자. 배경 색상은 여러 곳에서 brown 으로 설정되었다. 일부 CSS 선언의 경우 케스케이드에서 더 높은 곳에 선언하고, CSS 상속을 통해 이 문제를 자연스럽게 해결할 수도 있다. 하지만 중요한 프로젝트의 경우에는 이런 방식으로도 해결이 안될 수 있다.  :root 가상 클래스에 변수를 선언해 놓고, CSS 작성자가 해당 변수를 사용한다면 위와 같이 반복적으로 속성값을 추가하지 않아도 된다.

:root {
  --main-bg-color: brown;
}

.one {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}

.two {
  color: white;
  background-color: black;
  margin: 10px;
  width: 150px;
  height: 70px;
  display: inline-block;
}
.three {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 75px;
}
.four {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 100px;
}

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

<div>
    <div class="one"></div>
    <div class="two">Text <span class="five">- more text</span></div>
    <input class="three">
    <textarea class="four">Lorem Ipsum</textarea>
</div>

이전 예제와 동일한 결과물을 얻게 되지만, 원하는 속성을 넣기 위해 한 개의 표준 선언이 추가되었다.

Inheritance of CSS Variables

사용자 지정 속성은 상속을 받는다. 즉, 주어진 요소에 사용자 속성을 위한 값을 지정해 놓지 않으면, 해당 부모의 속성 값이 적용된다:

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

CSS는 다음과 같다 :

.two {
  --test: 10px;
}

.three {
  --test: 2em;
}

이 경우,  var(--test) 의 결과 값은 다음과 같다:

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

이것들은 실제 CSS변수가 아니라 사용자 지정 속성이라는 것을 염두해 두자. 이 값들은 다른 규칙에서 사용하기 위해 따로 저장되는 것이 아니라, 필요할 때만 계산된다. 예를 들어, 요소의 속성을 설정하거나, 형제의 자손 규칙에서 이 요소를 검색할 수는 없다. 이 속성은 일반적인 CSS와 같이, 선택자가 일치하거나 해당 선택자의 하위 항목일 경우에만 설정된다.

Custom Property fallback values

주어진 변수가 아직 정의되지 않았을 때, var() 를 이용하여 여러 개의 대체 변수를 정의할 수 있다. 이는 사용자 정의 요소(Custom Element)및 섀도우 돔(Shadow DOM)으로 작업할 때 유용하게 쓸 수 있다.

함수에 있어서의 첫번째 논쟁은 대체될 사용자 속성의 이름이다. 두번째는 아래와 같이 잘못된 사용자 속성을 참조하였을 때 대신 사용할 수 있는 대체 변수이다:

.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" */
}

사용자 속성같은 대체 구문은 쉼표를 허용한다. 예를 들어, var(--foo, red, blue)는 빨강, 파랑의 fallback을 정의하고 있다; 즉, 첫번째 쉼표와 함수 마지막 사이에 있는 값들은 모두 대체 변수로 간주한다.

하지만 이 방법은 성능 문제를 야기시킬 수 있다. 변수들을 찾아 분석하는데 시간이 걸리기 때문에 브라우저는 평소보다 더 느리게 페이지를 랜더링할 것이다.

Validity and values

각 속성과 연관된 기본 CSS 개념의 유효성은 사용자 지정 속성과 관련하여 별로 유용하지 않다. 사용자 속성 값을 분석할 때, 브라우저는 그것들이 어디서 사용되는지 모르기 때문에 거의 모든 값을 유효한 것으로 간주할 수 밖에 없다.

불행히도, 이 유효한 값들은 var()  함수 표현을 통하여 이해할 수 없는 문맥 안에서도 사용될 수 있다. 속성 및 사용자 변수로 인해 유효하지 않은 CSS 선언문이 만들어지면 계산된 시간에 유효한 새로운 개념이 생기게 된다.

Values in JavaScript

자바스크립트로 사용자 속성값을 사용하는 것은 표준 속성을 사용하는 것과 같다. 

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

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

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

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

  
Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 49.0 (Yes) 42 (42) No support 36.0 9.1
  
Feature Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Basic support (Yes) 29 (29) ? ? 9.1 49.0

 

See also

문서 태그 및 공헌자

이 페이지의 공헌자: springday1023, stitchworkingonthecode
최종 변경: springday1023,