[CSS] :root 클래스로 css 변수 만들기

CSS를 작성하다 보면 같은 값들이 반복되는 경우가 있다.
이런 경우 변수를 만들어서 사용하면 관리가 쉬워진다.

CSS 변수 사용법

root클래스 안에 변수를 선언하면 사용할 수 있다.

:root {
    --main-bg-color: pink;
}

body{
    background-color: var(--main-bg-color);
}

동일한 값을 사용하는 곳에 변수를 사용해서 적용하면 된다.

대체 변수 사용하기

변수가 정의되지 않았을 때, 대체 변수를 사용할 수 있다.

body{
    background-color: var(--main-bg-color, red); /*--main-bg-color가 정의되지 않은 경우 red가 적용된다.*/
}

참고자료

사용자 지정 CSS 속성 사용하기