[html / css] css에서 색상값을 변수로 지정하기

색상값.. #fffff 뭐 이런식으로 되어있거나 rgb로 되어있거나 외우기 힘든건 똑같다..

 

어처피 자주 사용할 색상값이면 이름을 붙여주고 그 이름만 쓰면 얼마나 편한가?

게다가 이렇게 하면 나중에 컬러 조합을 바꾸고싶을때 그 변수이름에 해당하는 색상값만 살짝 바꿔주면 된다.

짱편함

 

 

1. 색상값 변수로 지정하기

:root {
  --maincolor : #f29191;
}

 

css파일에서 이렇게 지정한다

 

 

2. 활용하기

 

이제 각 색상들을 아래 변수 이름으로 사용할 수 있다.

var(--maincolor)

 

(1) css 에서 활용

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

 

(2) JavaScript 에서 사용

<a style={{color:"var(--maincolor)"}}>Move to Profile</a>

const Card = styled.div`
    background-color : var(--maincolor);
`