css 변수 사용

변수는 사용자가 정의하는 속성과 값입니다.

공통으로 사용되는 값에 css변수를 설정하여 코드의 반복 사용 줄일 수 있습니다.

- 변수 설정 방법

• 전역
  :root 태그 안에 --사용자 지정 이름: 값; 으로 작성합니다. (-를 사용해 띄어쓰기)
• 지역
  지정 요소 안에 --사용자 지정 이름: 값; 으로 작성합니다.
  지정된 요소와 하위 요소에서만 적용됨.

전역 변수
<style>
:root { --variable-name: value; }
:root { --variable: value; }
</style>

지역 변수 예시
<style>
ul { --variable-name: value; }
.container { --variable: value; }
</style>

ex)
<style>
:root{
--main-bg-color: lightblue;
--color:maroon;
}
</style>

- 변수 사용 방법

• 속성에 var(--사용자 지정 이름); 으로 사용합니다.
  fallback: 변수가 적용되지 않았을 때를 대비해 추가로 값을 작성하는 값. 생략 가능

<style>
body{
background-color: var(--variable-name, fallback);
color: var(--variable-name, fallback);
}
</style>

ex)
<style>
body{
background-color: var(--main-bg-color, orange);
color: var(--color, orange);
}
</style>

으로 작성하면 body의 배경색이 하늘색으로 적용되고, 폰트 색상이 마룬으로 설정됩니다.
변수가 적용되지 않으면 fallback값 orange로 설정됩니다