CSS Variable 적용하기

임재희·2022년 2월 4일

study

목록 보기

2/10

사용자 지정 속성(CSS 변수, 종속 변수)은 CSS 저작자가 정의하는 개체로, 문서 전반적으로 재사용할 임의의 값을 담습니다. - MDN Web Docs
즉, CSS에도 변수를 선언할 수 있다라는 점입니다.
*IE에서는 지원이 안된다.

-- 뒤에 사용하고 싶은 변수명을 적어준다.
보통은 kebab-case를 사용한다.

:root {
  --test-name : white
}

var() 괄호 안에 사용하고 싶은 변수명을 적어준다.

.box {
  background-color: var(--test-name)
}

정답은 아니다
변수는 해당 엘리먼트의 자식까지 상속된다.
해당 엘리먼트를 벗어날 경우엔 다음과 같이 대체값을 지정해줄 수 있다.

<body>
   <div class="parent">
      <p class="child">chlid</p>
   </div>    
   <p class="other">other</p>
</body>

위와같이 parent에 변수를 지정해줄 경우 other는 변수의 영향을 받지 못한다.

.parent {
    --font-color: coral;
}

.child {
    color: var(--font-color); /*coral*/
}

.other {
    color: var(--font-color,green); /*green*/
}

때문에 다음과 같이 쉼표 뒤에 대체값을 지정해준다.
여기서 대체값을 지정해주지 않을 경우 해당 변수는 적용되지 않는다.

하루하루는 성실하게 인생 전체는 되는대로✏️