11. var
1. 개요
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);
}
}