[CSS] :root 가상 선택자를 통한 css 스타일 적용

1. :root 가상 선택자

1.1 :root 가상 선택자의 개념

:root 가상 선택자는 문서의 최상위 요소를 선택할 때 사용한다.

:root를 이용해 최상위 요소에 변수를 사용하면 웹 페이지 전체에서 사용할 수 있는 전역 변수를 쉽게 정의하고 유지보수할 수 있다.

1.2 :root 가상 선택자의 사용

:root 변수의 선언

변수의 이름 앞에는 –(하이픈 2개)를 붙여준다.

/* 주로 테마 색상들은 변수로 관리 */
:root {
  --bg-header-color: #ffe194;
  --bg-card-color: bisque;
  --width: 22px;
  --height: 53px;
  --box-color: black;
  --box-font-weight: bold;
}

header {
  background-color: var(--bg-header-color);
}

1.3 :root 변수의 적용

var() 함수를 통해 소괄호 안에 적용할 변수를 입력한다.

.header  {
width: var(--width);
height: var(--height);
background-color: var(--box-color);
}

2. 참조

1. [HTML/CSS] :root를 통해 CSS에서 변수를 사용해 보자 : 가상 클래스의 활용