[func] CSS - var() 함수 ★★ - 사용자정의 속성/속성값 변수 호출 (= var함수 = 바함수) ※ :root 선택자 (= 루트선택자)

목차

1. var() 예제 - 사용자정의 속성/속성값 변수 호출
2. var() 정의
3. var() 구문
4. :root 선택자 선언 예제

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() 함수로 정의해 둔 속성을 불러와 사용.
• CSS 변수는 반드시 :root 선택자 안에 정의할 필요는 없음, 동일요소나 조상요소에 정의하면 해당 요소 범위 안에서 불러와 사용 가능함.
• 여러 선택자 제어 시 유용.

2.
CSS3

3.

IE 제외한 주요 최신 브라우저 지원.

 

4. MDN 예제보기

https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

 

var() 구문

 

:root {

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

}  

 

selector {

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

}

 

---

[매개변수]

 

custom-property-name
필수. 사용자 정의 속성명 

• 반드시 더블대시(--) 기호로 시작해야 함.

 
value 

선택. 사용자 정의 속성이 유효 안 할 경우 대비값.

※ 참고

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

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

:root 선택자 선언 예제

 

:root {

    --blue: #007bff;

    --indigo: #6610f2;

    --purple: #6f42c1;

    --pink: #e83e8c;

    --red: #dc3545;

    --orange: #fd7e14;

    --yellow: #ffc107;

    --green: #28a745;

    --teal: #20c997;

    --cyan: #17a2b8;

    --white: #fff;

    --gray: #6c757d;

    --gray-dark: #343a40;

    --primary: #007bff;

    --secondary: #6c757d;

    --success: #28a745;

    --info: #17a2b8;

    --warning: #ffc107;

    --danger: #dc3545;

    --light: #f8f9fa;

    --dark: #343a40;

    --breakpoint-xs: 0;

    --breakpoint-sm: 576px;

    --breakpoint-md: 768px;

    --breakpoint-lg: 992px;

    --breakpoint-xl: 1200px;

    --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";

    --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;

}