2021.11.11

css

custom properties

반복해서 사용하는 수치 -> 상수로 정해서 쓰는 것이 좋음

(하드 코딩은 왠만하면 피하자 유지보수에도 좋지 않음)

<style>
        .first-list{
            background-color : thistle;
            color: whitesmoke;
            margin-left: 8px;
            --font-size : 32px;
            font-size: var(--font-size); // 어쨌든 변수니까 var로 선언해줘야한다.
        }

        .second-list{
            background-color : thistle;
            color: whitesmoke;
            margin-left: 16x;
        }

    </style>

css properties에서 선언한 변수는 해당 박스와 그 안의 자식 요소들에게 적용한다.

 

위의 경우에는전역 변수는 아니므로 다른 박스에 css로 먹히지 않음

 

실제로는 root에서 선언한다고 함

 

media 쿼리 사용할 때 삶의 질을 급상승 시켜준다고 함

@media screen and (max-width: 768px){
    :root{
    --font-size : 32px;
    --background-color : rgb(121, 138, 160);
    --base-space : 8px;
    }
}

이렇게 한번만 선언해주면 언제든지 쓸 수 있으니까!!

 

만약에 변수 선언이 안돼 있다면????

margin-left: var(--base-space, 8);

기본값을 설정해 줄 수 있다.