CSS 변수 calc 계산 기준
커스텀 속성은 재사용 값을 보관하고 calc는 서로 다른 단위를 한 선언 안에서 계산한다.
| 도구 | 맡는 일 | 대표 사용 | 주의점 |
|---|---|---|---|
| Custom property | 반복 값을 이름으로 저장 | --space:16px | 이름이 의미를 설명하는가 |
| Scope | 상속과 범위 제어 | :root, component | 전역 값과 지역 값을 혼동 |
| Fallback | 값이 없을 때 대체값 제공 | var(--x, 1rem) | 누락 시 스타일이 깨짐 |
| calc() | 고정값과 유동값 계산 | calc(100% - 2rem) | 단위와 공백 규칙 오류 |
| Token | 색, 간격, radius 규칙화 | --color-primary | 한 번 쓰는 값까지 변수화 |
CSS 변수는 “짧게 쓰기”가 아니라 디자인 의도를 이름으로 보관하고 계산식을 안전하게 반복하는 장치다.