CSS 변수 사용

leephoter·2021년 12월 22일

css 변수

CSS

목록 보기

4/5

⭐️ CSS 변수 사용하기 ⭐️

전역 변수

🔥 :root 🔥

👉🏻 모든 selector 에서 사용 가능한 변수 선언

:root {
    --(custom-name): style;
}

:root {
    --my-color-red: red;
    --length-100: 100px;
}
👉🏻 전역 변수로 선언
div {
    color: var(--my-color-red);
    height: var(--length-100);
}
👉🏻 <div> 태그에 color: red; height: 100px; 적용

선택자 범위 변수 선언

🔥 :선택자 🔥

👉🏻 해당 selector 에서만 사용 가능한 변수 선언

선택자 {
    --(custom-name): style;
}

.result {
  --margin-center: 50px;
}
👉🏻 class='result' 인 요소에만 사용 가능한 변수 선언
.result {
  margin: var(--margin-center);
}
👉🏻 selector .result 에 margin: 50px; 적용