CSS:PseudoClasses

단일 콜론(:)으로 나타내며, 요소의 특정 상태를 선택하는 데 사용.

`:root`

(CSS) :root 가상 클래스로 CSS 변수 다루기

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

:root 선택자는 웹 문서 구조에서 가장 상위 요소를 선택할 때 사용한다. 즉, html에서 :root은 항상 <code>

<html>

</code>을 가리킨다.

그러나 <code>

<html>

</code>보다 :root 가상 클래스의 스타일 적용 우선순위가 더 높다. 문서 전반적으로 재사용할 임의가 있는 값을 작성한다.

:root을 이용해 최상위 요소에 변수를 선언하면 모든 요소에서 이 변수를 사용할 수 있다. 이렇게 :root을 사용하여 변수를 사용하게 되면 한 번에 수정이 용이하다.

`: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;
}

`: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);
}