CSS :root

Css로 스타일링을 할 때 폰트 크기나 다른 여러 부분에 웹페이지의 통일성을 위해 같은 변수를 여러번 사용하는 경우가 많다.

수정을 해야할 때 하나 하나 찾아서 수정을 해야하는 번거로움 때문에 유지보수를 손쉽게 할 수 있는 가상 클래스 :root를 사용해보자

---

:root 가상 클래스

:root선택자는 웹 문서 구조에서 가장 상위 요소를 선택할 때 사용한다.
html에서 root는 항상 html을 가리키지만 html보다 :root 가상 클래스의 스타일 적용 우선 순위가 더 높다.

:root를 이용해 변수를 선언하면 모든 요소에서 선언한 변수를 사용할 수 있다. 그래서 :root를 사용하여 변수를 사용하게 되면 유지보수에 용이하다.

CSS:root 변수 선언

--(하이픈 2개)다음 속성 이름을 정해주고 :(클론)뒤에 속성값을 적어준다.

:root {
  /* color */
  --color-black: ##0D0D0D;
  --color-red: ##BF2642;
  --color-blue: ##3B67BF;

  /* size */
  --size-button: 36px;
  --size-border: 2px;
  --font-size: 12px;
}

CSS:root 변수 사용

var로 변수를 선언, 소괄호 안에 속성값을 입력한다

.colorBtn {
  font-size: var(--font-size);
  border-radius: var(--size-border);
}

.item {
  background-color: var(--color-white);
  display: flex;
  align-items: center;
}