Custom Properties + calc()

값을 이름 붙이고, 필요한 자리에서 계산하기

CSS 변수는 디자인 토큰을 공유하고, calc()는 고정 여백과 유동 폭을 한 선언 안에서 맞춥니다.

  1. 1 토큰 선언 :root에 색상, 간격, 기본 크기를 저장합니다.
  2. 2 스코프 조정 컴포넌트 안에서 필요한 변수만 다시 정의합니다.
  3. 3 계산 결합 calc()로 gap, padding, width의 관계를 표현합니다.
  4. 4 일괄 변경 변수 하나를 바꾸면 연결된 스타일이 함께 따라옵니다.
--space: 16px;
width: calc(100% - var(--space) * 2);
레이아웃 의도 보존 컨테이너가 변해도 좌우 여백을 뺀 실제 콘텐츠 폭이 명확하게 유지됩니다.