Custom-Properties

개요 CSS 사용자 지정 속성(CSS Variables, Custom Properties)은 재사용 가능한 값을 선언하고 문서 전반에서 참조하기 위한 메커니즘 반복되는 색상, 간격, Z-index 같은 값을 의미 있는 이름으로 관리해 전역 치환 리스크를 줄이고 테마 전환 같은 요구에 유연하게 대응 가능 사용자 지정 속성은 일반 CSS 규칙에 포함되어 캐스케이딩과 상속의 영향을 받음 핵심 개념 표기 규칙: 이름은 두 개의 대시로 시작, 예) –main-color 대소문자 구분: –my-color와 –My-color는 서로 다른 속성 참조 방식: var(–name) 형태로 값 참조 기본값 지원: var(–name, fallback) 형태로 값이 없을 때 대체값 지정 가능 속성 값 위치에서만 사용 가능, 선택자나 미디어 쿼리 조건, 속성 이름에는 사용 불가 동작 원리와 스코프 사용자 지정 속성은 선언된 규칙의 선택자 범위에만 유효 상속 특성 보유, 상위에서 선언하면 하위에서 참조 가능 :root에 선언하면 문서 전역 범위의 기본값으로 동작 동일한 변수 이름을 더 구체적인 선택자나 조건에서 재정의하면 캐스케이드에 따라 해당 범위에서 우선 적용 사용법과 짧은 예시 전역 선언과 기본 참조 ...