CSS 변수

CSS 변수

var() 함수는 CSS 변수의 값을 삽입합니다.

CSS 변수는 DOM을 접근할 수 있으므로, 지역 또는 전역 범위의 변수를 생성할 수 있으며, 자바스크립트를 사용하여 변수를 변경하고, 미디어 쿼리를 기반으로 변수를 변경할 수 있습니다.

CSS 변수를 사용하는 좋은 방법은 디자인의 색상을 포함합니다. 그들을 변수에 두고, 같은 색상을 반복적으로 복사 및 붙여넣지 않아도 됩니다.

전통적인 방법

아래 예제는 스타일 시트에서 일부 색상을 정의하는 전통적인 방법을 보여줍니다(각 특정 요소에 사용할 색상을 정의하여):

예제

body { background-color: #1e90ff; }
h2 { border-bottom: 2px solid #1e90ff; }
.container {
  color: #1e90ff;
  background-color: #ffffff;
  padding: 15px;
}
button {
  background-color: #ffffff;
  color: #1e90ff;
  border: 1px solid #1e90ff;
  padding: 5px;
}

직접 시도해 보세요

var() 함수의 문법

var() 함수는 CSS 변수의 값을 삽입합니다.

var() 함수의 문법은 다음과 같습니다:

var(name, value)
값 설명
name 필수. 변수 이름(두 개의 연결선으로 시작)
value 선택 사항. 변수를 찾지 못했을 때 사용할 백그라운드 값.

비고:변수 이름은 두 개의 연결선(--)으로 시작해야하며, 대소문자를 구분합니다!

var()가 어떻게 작동하는지

먼저: CSS 변수는 전역 또는 지역 범위를 가질 수 있습니다.

전역 변수는 전체 문서에서 접근/사용할 수 있으며, 지역 변수는 선언된 선택자 내에서만 사용할 수 있습니다.

전역 범위의 변수를 생성하려면, :root 선택자에서 선언하세요. :root 선택자는 문서의 루트 요소를 매칭합니다.

지역 범위의 변수를 생성하려면, 사용할 예정인 선택자에서 선언하세요.

아래의 예제는 위의 예제와 동일하지만, 이번에는 var() 함수를 사용합니다.

먼저, 두 개의 전역 변수(--blue와 --white)를 선언합니다. 그런 다음, var() 함수를 사용하여 나중에 스타일 시트에 변수의 값을 삽입합니다:

예제

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}
body { background-color: var(--blue); }
h2 { border-bottom: 2px solid var(--blue); }
.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}
button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

직접 시도해 보세요

var()의 장점은 다음과 같습니다:

  • 코드를 더 쉽게 읽을 수 있도록 합니다(이해하기 쉬워집니다)
  • 색상 값을 변경하는 것이 더 쉬워지도록 합니다

보다 부드러운 파란색과 흰색으로 변경하려면, 단 두 가지 변수 값을 수정하면 됩니다:

예제

:root {
  --blue: #6495ed;
  --white: #faf0e6;
}
body { background-color: var(--blue); }
h2 { border-bottom: 2px solid var(--blue); }
.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}
button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

직접 시도해 보세요

브라우저 지원

표中的数字表示了完全支持该属性的首个浏览器版本。

함수
var() 49.0 15.0 31.0 9.1 36.0

CSS var() 함수

함수 설명
var() CSS 변수의 값을 삽입하세요。