💡 사용자 지정 속성이란? (CSS 변수)
- CSS 저작자가 정의하는 개체로, 문서 전반적으로 재사용할 임의의 값을 담는다.
- 전용 표기법을 사용해 정의한다. (
--main-color: black;) var()함수를 사용해 접근할 수 있다. (color: var(--main-color);)
💡 사용자 지정 속성 왜 쓰나요?
- 첫번째 이유. 복잡한 웹사이트는 어마어마한 양의 CSS를 가지고 있는데, 종종 많은 값을 반복적으로 사용한다. 사용자 지정 속성을 사용하지 않는다면 여러 곳에 중복된 색상을 변경하기 위해 모든 CSS 파일에서 검색 및 바꾸기를 수행해야 한다.
- 두번째 이유. 의미를 가지는 식별자를 사용하기 때문에 특히 같은 색을 다른 맥락에서 사용할 때 유용하다.
#00ff00보다는--main-text-color가 이해하기 쉬울 것이다.
💡 변수 선언 및 호출
두 개의 붙임표로 시작하는 속성의 이름과 함께 유효한 CSS 값이라면 무엇이든지 그 값으로 지정해서 선언한다.
:root {
--main-bg-color: brown;
}사용자 지정 속성의 값을 사용할 때에는 일반적인 값의 자리에 var() 함수를 지정하고, 그 매개변수로는 사용자 지정 속성의 이름을 제공한다.
element {
background-color: var(--main-bg-color);
}💡 :root CSS pseudo-class
- 문서 트리의 루트 요소를 선택한다.
- HTML의 루트 요소는
<html>요소이므로,:root의 specificity가 더 높다는 점을 제외하면html선택자와 똑같다. :root는 전역 CSS 변수 선언에 유용하게 사용할 수 있다.
💡 예시 코드
:root {
--main-bg-color: brown;
}
.one {
color: white;
background-color: var(--main-bg-color);
margin: 10px;
width: 50px;
height: 50px;
display: inline-block;
}
.two {
color: white;
background-color: black;
margin: 10px;
width: 150px;
height: 70px;
display: inline-block;
}
.three {
color: white;
background-color: var(--main-bg-color);
margin: 10px;
width: 75px;
}
.four {
color: white;
background-color: var(--main-bg-color);
margin: 10px;
width: 100px;
}
.five {
background-color: var(--main-bg-color);
}참고 자료
Frontend Developer