3 var

1. 개요

MDN

var()함수는 사용자지정 속성(—*)을 값으로 지정할 때 사용된다. 사용자 지정 속성을 사용하면 반복되는 경우 사용자 지정속성을 변경함으로써 Var()함수를 이용해 지정한 속성의 값을 한번에 변경할 수 있다.

2. 기본문법

var(custom-property-name>, <declaration-value>)

예시: root { --main-bg-color: pink; } body { background-color: var(--main-bg-color); }

3. 예제

3.1. 작은 화면에서 다크모드로 변경

[미리보기]

미디어쿼리를 사용해서 반응형 웹을 적용할 경우 컬러와 글꼴, 글자두께 등 통일성있게 사용되어야 하는 요소를 사용자지정 속성으로 지정하고 var()함수를 사용해서 효율적으로 관리할 수 있다.

• HTML
• CSS