CSS 변수와 calc 설계 흐름
CSS 변수는 반복되는 값을 이름으로 관리하고, calc()는 고정 값과 유동 값을 함께 계산해 레이아웃을 유연하게 만든다.
| 흐름 | 하는 일 | 예시 | 실패 신호 |
|---|---|---|---|
| Name | 반복 값에 의미 있는 이름 부여 | --gap, --sidebar | 값 이름이 색상 숫자만 설명 |
| Scope | 필요 범위에 변수 선언 | :root 또는 컴포넌트 | 지역 변경이 전체 UI에 영향 |
| Use | 속성에서 var로 참조 | padding:var(--gap) | 동일 값이 여러 곳에 직접 입력 |
| Calculate | 남는 공간을 수식으로 계산 | calc(100% - var(--sidebar)) | 고정 폭 때문에 overflow |
| Theme | 테마와 상태별 값 교체 | dark mode token | 색상 변경이 코드 전체에 흩어짐 |
변수와 calc는 복잡한 CSS를 숨기는 도구가 아니라 변경될 값과 계산될 값을 분리하는 설계 방식이다.