:root 변수

:root를 사용하는 이유는 값을 한 번에 변경할 수 있다는 점에서 유용하다.

예를 들어 유지보수 시 main컬러값이 바뀌었을 경우 한꺼번에 값 변경이 가능하다는 점이다.

현재 나는 반응형에서 :root값을 조정해 폰트 사이즈 등을 조정해 주고 있다.

IE에서는 적용이 되도록 스크립트를 넣어줘야 한다.

<script src="https://cdn.jsdelivr.net/gh/nuxodin/ie11CustomProperties@4.1.0/ie11CustomProperties.min.js">

---

변수선언방법

:root{
    /* --변수명 : 변수값; */
    --main:#B8E7E1;
    --sub:#222;
    --point:#992BF2;
    --gray:#eee;

    --font-tit:32px;
    --font-sub-tit:25px;
    --font-regular:17px;
    --font-small:14px;
}

@media screen and (max-width:1024px){
    :root{
        --font-tit:28px;
        --font-sub-tit:20px;
        --font-regular:12px;
        --font-small:9px;
    }
}

---

변수사용방법

section{
    /* var(--변수이름) */
    color: var(--main);
    font-size: var(--font-regular);
}