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

<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>

CSS

:root {
  --color-white: #ffffff;
  --color-light-grey: #7c7979;
  --color-grey: #616161;
  --color-dark-grey: #4d4d4d;
  --color-black: #000000;
  --font-large: 48px;
  --font-medium: 28px;
  --font-regular: 18px;
  --weight-bold: 700;
  --weight-semi-bold: 600;
  --weight-regular: 400;
  --size-border-radius: 4px;
}
h1 {
  font-size: var(--font-large);
  font-weight: var(--weight-bold);
  color: var(--color-black);
}
h2 {
  font-size: var(--font-medium);
  font-weight: var(--weight-semi-bold);
  color: var(--color-black);
}
h3 {
  font-size: var(--font-regular);
  font-weight: var(--weight-regular);
  color: var(--color-black);
}
@media screen and (max-width: 700px) {
  body {
    background-color: var(--color-black);
  }
  h1 {
    color: var(--color-white);
  }
  h2 {
    color: var(--color-white);
  }
  h3 {
    color: var(--color-white);
  }
}