CSS 변수 지정 및 CSS에서 HTML 변수 가져오기

HTML에서 변수를 CSS로 보내고 싶다면 어떻게해야할까?

제일 쉬운방법은 inline을 사용해서 넣는것이다.

<div style='background: #000' />

 

 

하지만 가상선택자(`:hover`나 `:after` 같은거...)에서 HTML변수를 사용해야할 일이 있었다.

HTML에서 인라인으로 설정할 수 있는 방법이 없다.

 

그럴때 사용할 수 있는 방법!

HTML 인라인으로 변수이름을 정해서 보내주고 CSS에서 그 변수명 그대로 사용하면 된다.

<div style='--bg-color=#ccc' />

// react+typescript를 사용한다면 CSSProperties 타입을 사용해서 변수로 지정할 수 도 있다.
const colorInStyle = { '--bg-color': '#ccc' } as CSSProperties;
<div style={{...colorInStyle}} />

background-color: var(--bg-color);

 

 

* 참고: CSS 변수 지정하기

CSS에서도 js처럼 변수를 지정해서 사용할 수가 있다.

:root {
  --main-color: '#E24545';
  --sub-color: '#4597E2';
  --lg-size: '36px';
}

이런식으로 `:root` 에 변수를 지정해주면 된다.

네이밍룰이 있는데 무조건 처음 시작을 `--` 하이픈 두개로 해야한다는것.

불러서 사용할땐 `var(--변수이름)` 이렇게 사용하면 된다.