# 13.var

css

# 목차

1. 개요
2. 기본문법
3. 예제
- 3.1. 작은 화면에서 다크모드로 변경

# 1. 개요

MDN

https://developer.mozilla.org/ko/docs/Web/CSS/var

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

# 2. 기본문법

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

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

# 3. 예제

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

미리보기

https://qwerewqwerew.github.io/source/css/13-var

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

Code

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

: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);
	}
}

css var 변수