gradient 밖의 CSS 수학

우리는 gradient를 꽤 자세히 봤습니다. 그런데 CSS 안의 수학은 gradient에서 끝나지 않습니다.

CSS는 겉으로는 선언형 스타일 언어지만, 안쪽에는 제약식, 보간, 거리 함수, 합성 함수가 계속 등장합니다. 이걸 알고 있으면 Figma to CSS 변환도 훨씬 덜 감으로 하게 됩니다.

layout 수학: calc, min, max, clamp

CSS layout은 제약식을 많이 씁니다.

width: calc(100% - 48px);
font-size: clamp(14px, 2vw, 20px);
grid-template-columns: minmax(160px, 1fr);

calc()는 길이 식이고, min(), max(), clamp()는 범위를 제한합니다.

clamp(min, preferred, max) = min(max(preferred, min), max)

이건 Figma의 min/max size, fill container, responsive resize를 CSS로 옮길 때 자주 쓰입니다.

shape 수학: radius, clip-path, aspect-ratio

border-radius는 단순히 corner를 둥글게 하는 값처럼 보이지만, 반지름이 box 크기를 넘으면 브라우저가 비율을 맞춰 줄입니다. 즉 radius normalization이 있습니다.

if sum of adjacent radii > edge length:
  scale radii down proportionally

clip-path: polygon(...)은 점 목록으로 만든 도형이고, hit testing을 정확히 하려면 point-in-polygon이 필요합니다. aspect-ratio는 width / height 비율 제약입니다.

pixel 수학: filter, opacity, blend

opacity는 alpha compositing입니다.

out = src * alpha + dst * (1 - alpha)

filter: blur(...)는 주변 픽셀을 섞는 연산에 가깝고, brightness, contrast, saturate 같은 filter는 색 벡터를 바꿉니다. mix-blend-mode는 위 레이어와 아래 레이어 색을 어떤 공식으로 합칠지 정합니다.

이런 속성은 selection bounds나 export 이미지 품질에도 영향을 줍니다. shadow와 blur가 geometry 밖으로 퍼지기 때문입니다.

time 수학: transition과 easing

CSS transition은 시간에 대한 보간입니다.

value(t) = mix(start, end, easing(t))

cubic-bezier(...) easing은 우리가 본 bezier curve와 연결됩니다. 단지 여기서는 x축이 시간이고 y축이 진행률입니다.

데모에서 볼 것

데모에서는 CSS 수학 개념들을 카드처럼 훑어보며, 어떤 에디터 기능과 연결되는지 확인합니다.

오늘의 핵심은 이겁니다. CSS는 “값을 적으면 브라우저가 예쁘게 해주는 마법”이 아닙니다. 브라우저가 대신 풀어주는 수학 모델의 모음입니다. 그 모델을 알면 Figma to CSS 변환이 훨씬 단단해집니다.