가상 클래스(pseudo-class)란

css 의사클래스, (가상 클래스) 는 선택자에 추가하는 키워드로,

선택한 요소가 특별한 상태여야 만족할수 있다.

즉 id 선택자나 class 선택자로 사용할 수 없는 요소들을 선택하는 선택자다.

가상 클래스는 요소의 속성 값, 상태, 상대적 위치 등을 이용하여 요소를 선택할 수 있다.

ex) :hover, :active, :nth-child(n)

CSS 변수 (사용자 지정 속성)

CSS 변수는 재사용할 값을 담는다.

--(변수명) 의 형식으로 선언하고

var(--변수명) 으로 불러온다.

하위 엘리먼트로 상속된다.

:root 가상 클래스

웹 문서 구조에서 특정 위치에 있는 요소를 선택하는 가상 클래스이다.
:root 선택자는 웹 문서 구조에서 가장 상위 요소를 선택할 때 사용한다.

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

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

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

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

:root를 사용하여 변수를 사용하게 되면 한 번에 요소 조작하는데 용이하다.

CSS :root 변수 선언

웹 문서에서 공통으로 사용될 속성을 미리 변수에 선언한다.
-- 다음 속성이름을 정해주고 : (콜론) 뒤에 속성 값을 적어준다.

:root {
 --company-identity-color : #333333;
}

• css에서 선언된 변수는 자신의 부모엘리먼트에 선언된 변수에만 접근할 수 있다.

그래서 모든 엘리먼트에서 변수를 사용할 수있도록 :root 가상선택자를 이용하는 것이 일반적이다.

html에서 최상위 엘리먼트는 html 태그를 의미하는데,

html 태그를 선택자로 쓰면 우선수위에서 1점이 가산되지만,

:root 가상 선택자는 class로 간주되어 10점이 가산된다.

CSS :root 변수 사용

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

.item{
	border-color : var(--company-identity-color, #ffffff);
    &:hover{
    	background-color : var(--company-identity-color, #ffffff);
    }
}

var root 변수 다음 값을 넣어주면 변수가 없을 때 기본값을 넣어 줄 수 있다.

var( root 변수, root변수가 없을 때 기본값 )

만약 변수 값이 유효하지 않을 때 다른 변수를 적용하고자 한다면,

var ( --color1, var(--color2, #ffffff)); 과 같이 사용할 수 있다.

css 변수사용 지원 브라우저

React에서 가변적 :root 변수 사용

프로젝트에서 company color 값을 받아 동적으로 할당 해야하는 경우가 생겼다.

그래서 app.js 에서 styled component의 global style을 이용해서

전역선언을 한 뒤

global style에 값을 props로 전달해서 동적할당하였다.