[func] CSS - var() 함수 ★★ - 속성・속성값 CSS사용자정의 (= CSS속성정의 = var함수 = 변수함수 = 바함수)

목차

• var() 예제
• var() 정의
• var() 구문

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>

 

결과보기

예제: https://codepen.io/sinbi/pen/VNgLMP

var() 정의

 

속성과 속성값을 사용자가 정의 후 사용.

 

---

 

1.

:root 선택자를 이용해 속성과 속성값을 정의 후,

var() 함수 이용해 정의해둔 속성을 불러와 사용.

2.
여러 선택자를 제어해야 할 때 아주 유용.

3.
CSS3

4.
주요 최신 브라우저 모두 지원

단, IE 지원 X 

 

var() 구문

 

:root {

    custom-property-name: custom-property-value;  

}  

 

선택자 {

    속성:var(custom-property-name, value);

}

 

---

[매개변수]

 

custom-property-name
필수. 사용자 정의 속성명 
※ 속성명은 반드시 -- (더블대시)로 시작해야 함.

 
value 

선택. 사용자 정의 속성이 유효하지 않은 경우 대비값

※ 참고

속성 정의하는 root 부분이 아래 쪽에 와도 무관.

다만, 가독성 위해 되도록이면 위처럼 위에 정의.

PS.

 

모질라 var() 함수 강의

https://developer.mozilla.org/ko/docs/Web/CSS/Using_CSS_custom_properties