:root 가상 선택자의 특징
1. <html> 보다 명시도가 낮다.
2. global 하다.
3. var()과 함께 자주 쓰인다.
4. :root 선택자 안에서 변수명을 선언한다. 반드시 "--"를 앞에 쓰고 변수명을 지정해야 한다. (ex: --변수이름)
주의!! 일반 선택자 안에서도 "--변수이름"을 선언할 수 있지만. 해당 선택자와 그 자식들 안에서만 적용된다. 그렇기 때문에 일반 선택자 안에서는 변수를 선언하지 않는다.
var함수를 활용해 선언된 변수값을 사용할 수 있다.
var(변수, 새로운 값)의 형태로 변수값을 "override(덮어쓰기)"할 수 있다. [fallback]
ㄴ보통 이 방법은 선언된 변수에 값이 제대로 작동되지 않았을 경우를 대비위함인데, 애초에 :root에 값이 제대로 적용되었는지 확인하자.
CSS variables trick
1. --변수명: calc(var(--변수명) * 2);
ㄴcalc와 var의 결합.
2. redefine(재정의)
ㄴ:root에서 값을 global하게 정의하였다고 해도 값을 재정의하여 특정한 요소만 다르게 customize해서 사용할 수 있다.
'HTML 태그 & CSS 속성' 카테고리의 다른 글
| nth-child( ) (0) | 2020.12.15 |
|---|---|
| CSS의 신기한 선택자 모음들 (0) | 2020.12.07 |
| 명시도(Css cascading 결정하는 요소) (0) | 2020.10.08 |
| 퍼블리셔가 알아야 할 필수 사이트 11선 (0) | 2020.08.01 |
| Smooth Scrolling(제이쿼리 플그인, css속성) (0) | 2020.08.01 |
댓글