CSS var() 함수

정의와 사용법

CSS의 var() CSS 변수 값을 삽입하는 함수.

실例

예제 1

먼저, --main-bg-color이라는 전역 변수를 선언한 다음, 스타일 시트에서 사용하세요: var() 변수의 값을 삽입하는 함수:

:root {
  --main-bg-color: coral;
}
#div1 {
  background-color: var(--main-bg-color);
}
#div2 {
  background-color: var(--main-bg-color);
}

직접 시험해 보세요

예제 2

또 다른 사용 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 문법

var(--name, value)
값 설명
--name 필수입니다. 변수 이름(두 개의 반쪽 기호로 시작해야 합니다).
value 선택 사항입니다. 대체 값(변수를 찾지 못했을 때 사용됩니다).

기술 세부 사항

버전： CSS3

브라우저 지원

표中的 숫자는 이 함수를 최초로 완전히 지원하는 브라우저 버전을 나타냅니다.

Chrome Edge Firefox 사파리 오페라
49 15 31 9.1 36

관련 페이지

교육:CSS 변수