방대한 양의 코드를 사용하다보면, 반복되는 코드들이 있다.
예를 들면, 위 예시처럼 background-color 라는 property에서 wheat, tomato 등으로 이름이 정해진 경우에는 상관 없지만,
rgb(252, 201, 65) 처럼 다른 표현을 이용하여 색을 나타낸다면?
코드도 지저분해지고 귀찮아진다.
이럴 때 var()를 활용한다.
:root{ } 에 사용할 변수를 정의하고(변수명 앞에 -- 를 붙여야 한다.), 이 변수명을 var( ) 안에 넣어 활용하면 된다.
참고)
https://developer.mozilla.org/ko/docs/Web/CSS/var
'Front-end > CSS' 카테고리의 다른 글
| CSS) [BEM 방식] 클래스 명명법으로 코드 간결화 (0) | 2022.10.08 |
|---|---|
| CSS) [Google Fonts / Icons] CSS로 무료 폰트와 아이콘 이용하기 (0) | 2022.10.08 |
| CSS) [Reset.css] 브라우저의 기본 CSS 요소를 제거하려면 (0) | 2022.10.08 |
| CSS) Transition, Transform, Animation (+ Aminista 사용법) (0) | 2022.10.04 |
| CSS) Selector 정리 (Basic, Combinators, Pseudo) (0) | 2022.10.04 |