Study/HTML&CSS

[HTML/CSS] css :root(가상선택자)를 통해 css 변수 선언 해보자!

Rajin 2021. 12. 10. 17:41
728x90

보통 CSS문서에서 사이트 구축을 할 때나, 유지보수 작업을 하다보면 여러 곳을 임의로 바꿔야하고,

공통적으로 들어가는 부분들이 있다.

CSS에서 이를 간단하게 변수를 선언하여 사용하면 좀 더 쉽게 작업을 할 수 있게 하기위한 방법을 알아보려한다.

​

1. :root 의사 클래스

:root는 문서 트리의 루트 요소를 선택하며, HTML의 루트 요소는 <html>요소이므로, :root와 html은 같다.

​

2. CSS 변수(사용자 지정 속성)

CSS:root를 이용해 가상선택자를 이용해 재사용할 값을 담아줄 변수를 만들어 저장해준다.

보통 웹사이트 하나를 만들면, 기본적으로 reset.css, common.css, sub.css 등 많은 양의 CSS를 가지고 있다.

유지보수를 하다보면 임의로 값을 변경하거나 컬러변경 등 한꺼번에 많은 양을 수정해야하는 경우가 생기는데,

이를 편하게 관리하기 위해서는 CSS 변수를 이용하여 CSS 전반에 걸쳐 사용되는 임의의 값을 변수에 저장하고

해당 값이 필요한 곳에 대입하여 사용해 주면 된다.

​

변수의 이름을 지정할 때에는 변수 맨 앞에 '--'를 붙여주어야한다.

또한, 지정한 변수를 사용할 때에는 var(변수명) 형식으로 사용한다.

:root{
    /* color */
    --white-color: #fff;
    --black-color: #140a00;
    --blue-color: #045fd4;
    --red-color: #ff0000;
    --grey-dark-color: #909090;
    --grey-light-color: #e0e0e0;

    /* Size */
    --padding: 12px;

    /* Font Size */
    --font-large: 18px;
    --font-medium: 14px;
    --font-small: 12px;
    --font-micro: 10px;
}

이렇게 CSS에서 :root 안에 자주 사용될 값들을 변수를 지정하여 값을 저장한 뒤에

아래의 코드처럼 사용하는 클래스에 var(--변수명)으로 불러주면된다.

.header {display: flex; justify-content: space-between; padding: var(--padding); background-color: var(--black-color); color: var(--white-color);}
.header .logo {font-size: var(--font-large);}
.header .logo i {color: var(--red-color);}

 

참고로 :root의 경우 웹표준화로 하였을 때 ie8버전에서 먹히지 않는다.

그 점을 유의하고 사용하면 좋은 코드를 만들 수 있을 것 같다.