[CSS] CSS 변수 규칙

💬 패캠 실시간 강의(실무 CSS 레이아웃)를 듣고 새롭게 알게 된 내용을 기록합니다.🙌

 

📑 CSS를 공부할 때는..

속성들의 기본 값을 알아두는 것이 중요하다.

예로 flex에서 flex-shrink는 1이 기본값이다. 그래서 따로 기본 값을 정해주지 않으면 화면이 줄어들 때 요소도 같이 줄어든다. 이처럼 속성의 기본 값을 알아두면 내 의도와는 다르게 동작하는 CSS에 대해 좀 더 빠르게 파악할 수 있다.

 

📑 CSS 변수

JavaScript에서 데이터를 변수에 담아 재사용하는 것처럼 css도 속성 값들을 변수에 담아 전역적으로 사용할 수 있다. 

:root는 html을 의미하는데, 선택자 우선순위에 따라 적용되는 순서가 다르기 때문에 :root를 더 많이 사용하는 것 같다. (가상 클래스 우선순위가 태그 선택자 우선순위보다 높기 때문!)

:root {
  --color-primary: royalblue;
  --color-secondary: darkorange;
}

⚠️ CSS 변수의 유효범위

css 변수는 변수가 선언된 선택자와 일치하는 요소의 하위 요소 내에서만 사용이 가능하다. 그래서 모든 요소가 변수를 사용하고자 할 때는 root(html)에 선언을 해주는 것이 중요하다.

 

변수 사용하기

변수를 사용하려면 var() 안에 원하는 css 변수명을 적어주자.

body {
  background-color: var(--color-primary);
}

 

---

참고

[실시간 강의/패캠] 실무 CSS 레이아웃 - 박영웅 강사님

 

💬 본 포스팅은 공부 기록용으로 정확하지 않은 정보가 존재할 수 있습니다. 발견하신다면 알려주세요!