English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

CSS 참조 설명서

CSS @규칙(RULES)

CSS 속성 전체

CSS var() 함수

var() 함수는 요소의 모든 속성 값으로 사용될 수 있습니다. var() 함수는 속성 이름, 선택자 또는 속성 값 외의 어떤 것도 사용할 수 없습니다. (이렇게 하면 문법 오류나 변수와 관련없는 값이 발생할 수 있습니다).

CSS 함수

온라인 예제

이름이 "--main-bg-color" 속성을 정의한 후 var() 함수를 사용하여 해당 속성을 호출하면 됩니다:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>기본 강의(oldtoolbag.com)</title>
<style>
:root {
　　--main-bg-color: coral;　　
}
#div1　{
　　background-color: var(--main-bg-color);
　　padding:　5px;　　
}
#div2　{
　　background-color: var(--main-bg-color);
　　padding:　5px;
}
#div3　{
　　background-color: var(--main-bg-color);
　　padding:　5px;
}
</style>
</head>
<body>
<h1>var() 함수</h1>
<div id="div1">기본 강의oldtoolbag.com　-　기본을 잘 배우면 더 멀리 갈 수 있습니다!‹/div>
<br>
<div id="div2">기본 강의oldtoolbag.com　-　기본을 잘 배우면 더 멀리 갈 수 있습니다!‹/div>
<br>
<div id="div3">기본 강의oldtoolbag.com　-　기본을 잘 배우면 더 멀리 갈 수 있습니다!‹/div>
</body>
</html>
시험해보기 ‹/›

정의와 사용법

var() 함수는 사용자 정의 속성 값을 삽입하는 데 사용되며, 하나의 속성 값이 여러 곳에서 사용될 때 이 방법이 매우 유용합니다.

지원 버전: CSS3

브라우저 호환성

표의 숫자는 이 함수를 지원하는 첫 번째 브라우저 버전 번호를 나타냅니다.

함수




var()49.015.031.09.136.0

CSS 문법

var(custom-property-name, value)
값설명
custom-property-name필수. 사용자 정의 속성 이름, 필수로 시작해야 합니다. -- 　시작.
value선택 사항. 대체 값, 속성이 존재하지 않을 때 사용.

더 많은 예제

온라인 예제

사용 var() 함수로 여러 가지 정의된 값 호출하기:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>기본 강의(oldtoolbag.com)</title>
<style>
: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);
}
#div3　{
　　background-color: var(--main-bg-color);
　　color: var(--main-txt-color);
　　padding: var(--main-padding);
}
</style>
</head>
<body>
<h1>var() 함수</h1>
<div id="div1">기본 강의oldtoolbag.com　-　기본을 잘 배우면 더 멀리 갈 수 있습니다!‹/div>
<br>
<div id="div2">기본 강의oldtoolbag.com　-　기본을 잘 배우면 더 멀리 갈 수 있습니다!‹/div>
<br>
<div id="div3">기본 강의oldtoolbag.com　-　기본을 잘 배우면 더 멀리 갈 수 있습니다!‹/div>
</body>
</html>
시험해보기 ‹/›

CSS 함수

CSS @charset 규칙CSS 함수(Function)