TIL _ CSS 변수

1. CSS 변수 사용법

2. 변수의 범위와 상속

1. CSS 변수 사용법

---

🔑 CSS 변수는 --변수명의 형태로 선언합니다.

🔑 선언된 변수는 var(변수명)으로 불러옵니다.

🔑 위 예시의 경우 --main-theme 이라는 변수에 저장된 hsl 색조값을 변경하는 것만으로 문서 전체의 테마색상을 바꿀 수 있습니다.

---

2. 변수의 범위와 상속

---

🔑 :root 는 문서 트리의 루트 요소를 선택하는 가상 선택자로서, :root에 선언된 변수는 문서 전역에서 참조할 수 있습니다.

🔑 css 변수는 상위 엘리먼트에서 하위 엘리먼트로 상속됩니다. 반대로 하위 엘리먼트에서 선언된 변수는 상위 엘리먼트에서 참조할 수 없습니다.

🔑 선언되지 않은 변수를 참조하거나 유효 범위를 벗어난 변수를 참조했을 경우 해당 속성은 무시됩니다.

🔑 var()는 두번째 인자로 대체값을 받을 수 있으며, 변수가 선언되지 않았거나 불러올 수 없는 경우에 대체값이 적용됩니다.

---

<유의사항>

---

🔑 CSS 변수는 IE에서는 사용할 수 없습니다.

---

• 참고자료
  - Rock's Easyweb 유튜브 강의,
  https://youtu.be/kQSm8xuXNfM
  - MDN 사용자 지정 CSS 속성 사용하기, https://developer.mozilla.org/ko/docs/Web/CSS/Using_CSS_custom_properties

"작성 내용 중 오류나 오타가 있다면, 댓글로 알려주시면 감사하겠습니다. 주니어 개발자에게 남겨주시는 작은 피드백이 큰 도움이 될 것 같습니다. 고맙습니다 :)"