CSS 변수 - var() 함수
CSS 변수
이 var()함수는 CSS 변수의 값을 삽입하는 데 사용됩니다.
CSS 변수는 DOM에 액세스할 수 있습니다. 즉, 로컬 또는 전역 범위로 변수를 만들고 JavaScript로 변수를 변경하고 미디어 쿼리를 기반으로 변수를 변경할 수 있습니다.
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)
| 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
선택기 내부에서 변수를 선언합니다. 선택기 는 :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()기능을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
| Function | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
CSS var() 함수
| Property | Description |
|---|---|
| var() | Inserts the value of a CSS variable |