사용자 지정 속성

CSS 변수

변수를 이용해 자주 사용하는 요소를 관리할 수 있다. 즉, 재사용이 가능하다.
(재사용할 임의의 값을 var()를 이용해 변수를 설정한다.)

• --가 변수 선언의 키워드
• var()을 통해 사용 가능하다.

:root

:root{ --글자 : 속성값; }

:root{
	--color1: white;
    --color2: black;
    --bigfont: 40px;
    --middlefont: 25px;
    --smallfont: 14px;
}
.bg {
	background-color: var(--color1);
}
h1 {
	color: var(--color2);
}
:root를 주로 사용한다.
(무조건 :root를 사용해야하는 것은 아니다.)

css에서
위와 같은 방식으로 :root{ --글자 : 속성값; } 으로작성하여
div{ color:var(--color1);} 와 같은 방식으로 적용시킨다.

---

변수의 유효 범위

아래와 같이 특정 요소 내에서 변수가 선언된 경우, 그 변수는 해당 요소 안에서만 사용가능하다. 즉, 해당 요소에서 유효범위를 갖는다.

html{}의 {}안의 영역에 --를 통해 변수를 선언할 수 있다.
html{}대신 :root를 사용할 수도 있다.
차이점: :root의 경우 가상클래스 선택자로 명시도가 더 높다.

 <div class="group1">
    <p class="test"></p>
  </div>

  <div class="group2">
    <p class="test"></p>
  </div>

변수에 default값 지정

• defalt값을 지정해 변수로 사용을 할 수도 있다.
• 해당 변수에 적용되는 스타일이 있다면 그 스타일이 적용되고, 그렇지 않다면 기본값이 적용된다.

// html == :root
html {
  --default: lightblue;
}
.test {
  width: 1000px;
  height: 100vh;
  background-color: var(--default); 
}

.group1 {
  --default: lightblue;
  --color1: black;
}
.test {
  width: 300px;
  height: 80px;
  background-color: var(--color1, red);