• 1:1 문의
  • 회원가입
  • 로그인

[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 부분이 아래 쪽에 와도 상관 없음.

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

 

즐겨찾기 (= 북마크) : Ctrl + D
홈페이지 제작
유지보수 관리

분류 제목
intro CSS - 정의와 장점 + CSS 기본 문법
intro CSS - 발전사 (CSS1 → .01 → CSS3)
intro CSS - 적용 방법 3가지 ★★★ - (인라인 스타일 / 내부 스타일 / 외부 스타일) 적용 순서 + 속…
selector CSS - 선택자 (Selector) 종류
selector CSS - 아이디(id) , 클래스(class) 선택자 ★★★★★
selector CSS - 전체선택자 (*)
selector CSS - 요소선택자 (요소)
selector CSS - 병렬선택자 (요소,요소) ★ - 요소 여러개 나열
selector CSS - 자손선택자 (요소 요소) ★ - 특정 요소 아래의 모든 자손 요소
목록

방문자 수

오늘 111
어제 557
최대 583
전체 439,515
Since 2012