[CSS] 커스텀 속성

작성자가 직접 정의하는 속성
작성자가 이름과 속성값을 임의대로 지정할 수 있다.

1. 예 )
:root {
--test: #fff;
}

:root --> 최상위 엘리먼트(html 전체)
--test --> 커스텀 속성 이름
#fff --> 속성값

2. 사용법)
.box {
background : var(--test);
}
var() 함수 안에 정의한 속성명을 사용한다.

미디어쿼리:
:root {
--media: 1rem;
@media (min-width: 40em) {
--media: 1.5rem;
}
@media (min-width: 70em) {
--media: 2rem;
}
}
div {
padding: var(--media);
}
h2 {
margin-bottom: var(--media);
}

참고사이트 : https://velog.io/@kim-jaemin420/CSS-Custom-PropertiesCSS-%EC%BB%A4%EC%8A%A4%ED%85%80-%EC%86%8D%EC%84%B1