오늘도 클론코딩을 하다가 모르는 명령어가 나와서 부랴부랴 찾아봅니다.
:root에 대해서 mdn 사이트를 찾으면 다음과 같이 설명되어 있습니다.
CSS :root 의사 클래스는 문서 트리의 루트 요소를 선택합니다.
HTML의 루트 요소는 <HTML>요소이므로, :root의 명시도가 더 높다는 점을 제외하면 html 선택자와 똑같습니다.
번역이 이상한건지 저같은 초보자는 무슨 말인지 잘 이해가 안갑니다.
인터넷에 뒤적거리다보니(디자이너의 기록(https://designer-ej.tistory.com/)발췌) 다음과 같이 설명이 되어 있습니다.
:root 는 웹문서 구조에서 가장 상위 요소를 선택할때 사용한다.
html에서는 root는 항상 html을 가르킨다. 그러나 html보다 :root 가상클래스의 스타일 적용 우선순위가 더 높다.
문서 전반적으로 재사용할 임의가 있는 값을 작성한다.
아. 덕분에 좀 이해가 되네요. 어쨌든 :root를 사용하면 우선순위가 높아지는군요!
그래서 어디에 쓰는건가 찾아봤더니 다음과 같은 이유에서 사용한다고 합니다. (친절한 효자손 취미생활 https://rgy0409.tistory.com/ 발췌)
웹사이트에는 엄청난 양의 CSS를 가지고 있는데, 유지보수를 하려면 한꺼번에 바꿔야 할때가 있습니다.
예를 들어서, 보라색을 좀더 밝은 보라로 바꾸고 싶을때가 있는데, color가 지정된 것을 하나씩 다 찾아 바꿔주기에 시간이 너무 오래 걸립니다.
이럴때 :root로 변수를 지정해주면 변수의 값만 바꾸면 됩니다.
예시를 봅시다.
:root {
--mood-color-1: #2d6b5f; //속성값을 여기서 수정만 해주면 전체가 다 관리가능하겠쥬?
--mood-color-2: #72e3a6;
--mood-color-3: #dff4c7;
--mood-color-4: #edbf98;
--mood-color-5: #ea3d36;
}
.mood_1 {
color: var(--mood-color-1); //이렇게 변수를 지정만 해줍니다.
}
.mood_2 {
color: var(--mood-color-2);
}
.mood_3 {
color: var(--mood-color-3);
}
.mood_4 {
color: var(--mood-color-4);
}
.mood_5 {
color: var(--mood-color-5);
}
* :root부분에 -- 이렇게 시작을 한다. 이 뒤에 변수명 입력 후에 속성값을 입력합니다.
* 적용시킬 때는 var로 변수를 선언하고 root에서 정의한 변수명을 입력하면 됩니다.
아하! 이제 좀 이해가 되네요!
'CSS' 카테고리의 다른 글
| [CSS] display : none vs visibility: hidden (0) | 2023.02.16 |
|---|---|
| [CSS] input 태그 안의 타입(type)을 선택하려면? (0) | 2023.01.24 |
| [CSS] ::after에 대해서 (1) | 2023.01.19 |
| CSS : z-index에 대해서 (0) | 2022.12.06 |
| CSS : Position에 대해서 (0) | 2022.11.30 |