[CSS] :root 가상 클래스로 CSS 변수 다루기

Html로 골격을 잡고 CSS로 디자인을 할 때, 

폰트 크기나 폰트 컬러 등 여러 부분에 웹페이지의 통일성을 위해서  

하나의 같은 변수를 여러 번 사용하는 경우가 많다.

 

수정을 해야할 때, 요소들을 하나하나 찾아서 수정을 해야 하는데

요소의 수가 많으면 시간이 걸릴 뿐 아니라 정확성도 보장할 수 없다.

 

이럴 때  :root 가상 클래스를 사용하게 되면 유지보수를 손쉽게 할 수 있다. 

 

그러면 가상 클래스는 무엇이고, :root 가상 클래스는 어떻게 사용하는 것일까?

 

---

가상 클래스(pseudo-class)란?

Id 선택자나 class 선택자로 사용할 수 없는 요소들을 선택하는 선택 자다.
가상 클래스(pseudo-class)는 요소의 속성 값, 상태, 상대적 위치 등을 이용하여 요소를 선택할 수 있다.

 

Ex) :hover / :active / :nth-child(n) 

 

developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes

의사 클래스 - CSS: Cascading Style Sheets | MDN

 

구조적 가상 클래스(structural pseudo-class)란?

웹 문서 구조에서 특정 위치에 있는 요소를 선택하는 가상 클래스이다.

Ex) :root / :nth-child(n)

 

---

:root 가상 클래스

웹 문서 구조에서 특정 위치에 있는 요소를 선택하는 가상 클래스이다.

:root 선택자는 웹 문서 구조에서 가장 상위 요소를 선택할 때 사용한다.

 

즉, html에서 root은 항상 html을 가리킨다.

그러나 html보다 :root 가상 클래스의 스타일 적용 우선순위가 더 높다.

문서 전반적으로 재사용할 임의가 있는 값을 작성한다.

 

:root을 이용해 최상위 요소에 변수를 선언하면 모든 요소에서 이 변수를 사용할 수 있다.

이렇게 :root을 사용하여 변수를 사용하게 되면 한 번에 수정이 용이하다.

 

CSS :root 변수 선언

웹 문서에서 공통으로 사용될 속성을 미리 변수에 선언한다.

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

 

:root {

  /* color */
  --color-black: #3f454d;
  --color-white: #ffffff;
  --color-yellow: #fbbe28;

  /* size */
  --base-space: 8px;
  --size-button: 60px;
  --size-border: 4px;
  --font-size: 18px;
}

 

CSS :root 변수 사용

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

 

.colorBtn {
  font-size: var(--font-size);
  padding: calc(var(--base-space) * 1.8);
  border-radius: var(--size-border);
}

.item {
  background-color: var(--color-white);
  display: flex;
  align-items: center;
  padding: var(--base-space);
  margin-bottom: var(--base-space);
}