[CSS] CSS에서 사용자 변수 사용하기

css에서 사용자 변수를 사용하면 반복적으로 사용되는 값을 

변수에 저장하고 이를 여러 곳에서 참조할 수 있습니다.

| 사용

1. 변수 선언

CSS에서 변수를 선언할 때는 '--'를 접두사로 사용해서

변수 이름을 정의하면 됩니다.

:root {
  --main-color: red;
}

보통 변수를 선언할 때 :root 선택자를 사용합니다.

→ :root 선택자는 HTML문서에서 최상위 요소를 나타냄

 

위에 코드에서는 :root 선택자를 사용해서 문서의 루트요소에 '--main-color'라는 변수를 선언하고

변수의 초기값을 빨간색인 red로 지정해 주었습니다.

2. 변수 사용

선언한 css변수를 사용하고 싶으면 var() 함수를 사용해 변수 이름을 참조하면 됩니다.

div {
  background-color: var(--main-color);
}