[CSS] 사용자 지정 속성, 변수, Variables 사용하기
2022. 6. 14. 11:20
Web Front-end/CSS
CSS에서 자주 사용하는 값은 변수에 저장해놓고 사용하자. 기본적인 문법 div { --default-font-color: red; } p { color: var(--default-font-color); } div에서 변수를 선언하고, p에서 변수를 사용한다. 이때, 변수의 범위는 변수를 선언한 그 자신과 하위 요소로 제한된다. 첫 번째 단락 두 번째 단락 즉 이러한 문서가 있을 때, 첫 번째 단락은 변수가 적용되어 빨간색으로 나오지만, 두 번째 단락은 변수가 적용되지 않아 기본 색상으로 표시된다. p { color: var(--default-font-color, blue); } 변수가 적용되지 않을 것을 대비해 대체 값을 지정할 수도 있다. 사용법 :root { --default-font-color: ..