css 커스텀 프로퍼티

 

사용법

:root {
  --mainBgColor: gold;
}
body {
  background: var(--mainBgColor);
}
/*
대소문자를 구분함
 MainBgColor !== mainBgColor
*/

 

이 변수는 js에서도 읽어들일 수 있습니다.

 

const myBg = getComputedStyle(document.documentElement).getPropertyValue("--mainBgColor")

 

nuxt3 처음에 나오는 페이지도 비슷하게 구현해볼 수 있다.

 

 

 

https://jsfiddle.net/hyuckjin/k16tego4/9/

Edit fiddle - JSFiddle - Code Playground