CSS var() 함수
예시
먼저 "--main-bg-color"라는 전역 변수를 선언한 다음 var() 함수를 사용하여 나중에 스타일 시트에 변수 값을 삽입합니다.
:root {
--main-bg-color: coral;
}
#div1 {
background-color: var(--main-bg-color);
}
#div2 {
background-color: var(--main-bg-color);
}
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
var() 함수는 CSS 변수의 값을 삽입하는 데 사용됩니다.
버전: | CSS3 |
---|
브라우저 지원
표의 숫자는 기능을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
Function | |||||
---|---|---|---|---|---|
var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
CSS 구문
var(--name, value)
Value | Description |
---|---|
name | Required. The variable name (must start with two dashes) |
value | Optional. The fallback value (used if the variable is not found) |
더 많은 예
예시
var() 함수를 사용하여 여러 CSS 변수 값을 삽입하는 또 다른 예:
:root {
--main-bg-color: coral;
--main-txt-color: blue;
--main-padding: 15px;
}
#div1 {
background-color: var(--main-bg-color);
color: var(--main-txt-color);
padding: var(--main-padding);
}
#div2 {
background-color: var(--main-bg-color);
color: var(--main-txt-color);
padding: var(--main-padding);
}
관련 페이지
CSS 튜토리얼: CSS 변수