작성자가 직접 정의하는 속성
작성자가 이름과 속성값을 임의대로 지정할 수 있다.
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);
}