CSS 변수 사용하기

 

자주 사용하는 색상이나, 넓이, 높이가 있다면, 그리고 전체적으로 변경해야 할 때,

JS변수를 만들어서 사용하는 것처럼 CSS에서도 변수를 만들어서 사용할 수 있다.

 

 

CSS 변수 설정하기

:root{
	--font-size: 16px;
    	--text-color: black;
    	--base-bg-color: white;
}

 

CSS 변수는 최고 부모 위치인 root에서 지정을 하면

모든 자식 요소에서 접근이 가능하다.

선언할 때는 위의 예시처럼 변수명 앞에 --을 붙여서 사용하고

쓸 때는 아래와 같이 var를 붙여서 사용한다.

 

 

 

 

CSS 변수 사용하기

.textBox{
	font-size: var(--font-size);
	color: var(--text-color);
  }

 

 

 

 

 

정의된 것이 없다면 아래와 같이 기본값을 바로 정의 가능하지만

테스트를 해본 결과 재사용은 되지 않았다.

이렇게는 거의 사용하지 않을 것 같다.

.div{
	background-color: var(--bg-color, blue);
}

 

 

 

 

 

CSS 변수는 어디에, 어떻게 유용하게 쓸 수 있는 걸까?

:root {
    --bg-color: yellow;
    --sq-size: 400px;
}

@media screen and (min-width:768px) {
    :root {
        --padd: 10px;
        --bg-color: pink;
        --sq-size: 600px;
    }
}

.parret {
    width: var(--sq-size);
    height: var(--sq-size);
    background-color: var(--bg-color);
    padding: var(--padd);
}

.child {
    width: var(--sq-size);
    height: var(--sq-size);
    background-color: red;
}

 

 

 

 

 

 

기본 설정은 왼쪽과 같이

--bg-color(background-color)는 yellow

--sq-size(square-size)를 400px로 설정하고

 

 

 

@media only all and (조건문) {실행문}

미디어 쿼리를 통하여 사용자 해상도 768px 이상일 때는

--bg-color는 pink,

--sq-size를 600px,

--padd(padding)을 10px로 설정하면

 

왼쪽과 같이 해상도가 768px로 넘어가는 순간,

기본 background 컬러가 변하고 padding이 생기는 걸 볼 수 있다.

왼쪽 캡쳐로는 확인이 안되겠지만 박스사이즈도 커졌다.

 

 

 

CSS변수에 대한 간단한 정리

- 미디어 쿼리와 같이 쓰면, 하나하나 따로 설정하지 않고도 사이즈에 맞는 기본값 설정을 할 수 있다.

- CSS 변수는 기본이 되는 주 컬러, 주 사이즈 등을 root에서 정한 후 사용하기에

root에서 하나의 코드만 수정하면, 적용된 부분을 전체 수정할 수 있는 용이한 장점이 있다.