var () 함수 기본예제
<style>
:root {
--hz-bg-color: yellow;
--hz-txt-color: red;
--hz-padding: 20px;
}
div {
margin:30px 0;
background-color: var(--hz-bg-color);
color: var(--hz-txt-color);
padding: var(--hz-padding);
}
</style>
<div>홈짱닷컴 Homzzang.com</div>
결과보기
var () 정의 및 사용법
1.
속성과 속성값을 사용자가 정의 후 사용
2.
:root 선택자를 이용해 속성과 속성값을 정의 후,
var() 함수 이용해 정의해둔 속성을 불러와 사용.
3.
여러 선택자를 제어해야 할 때 아주 유용.
4.
CSS3
5.
IE 15 이상 주요 최신 브라우저 모두 지원
var () 구문
:root {
custom-property-name: custom-property-value;
}
선택자 {
속성:var(custom-property-name, value);
}
[매개변수]
custom-property-name
필수. 사용자 정의 속성명
※ 속성명은 반드시 -- (더블대시)로 시작해야 함.
value
선택. 사용자 정의 속성이 유효하지 않은 경우 대비값
※ 참고
속성 정의하는 root 부분이 아래 쪽에 와도 상관 없음.
다만, 가독성을 위해서 되도록이면 위처럼 위에 정의.
예제
https://codepen.io/sinbi/pen/VNgLMP
즐겨찾기 (= 북마크) :
Ctrl +
D
