• 이용 문의
  • 회원가입
  • 로그인

[func] CSS3 - 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>

 

결과보기

 

 

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

이름
비밀번호
자동등록방지

방문자 수

오늘 356
어제 626
최대 728
전체 484,961
Since 2012