clamp 는 영어로 '(보통 나사를 이용한)죔쇠(죄는 기구)'라는 뜻이다.
syntax
`clamp(min, val, max)`
parameters
`,`(콤마)로 분리된 3 개의 파라미터를 받는다.
- `min` 은 `val`이 계산되었을 때 가질 수 있는 최소한의 크기이다.
- `max` 는 `val`이 계산되었을 때 가질 수 있는 최대한의 크기이다.
- `val`은 기본 값을 적으면 된다. 그냥 `px` 는 의미가 없으므로 보통 rem, v*, % 등의 단위를 사용한다. `%`같은 경우는 상위 태그의 크기를 기준으로 잡게 된다. 보통 그렇다는 것이지 세 파라미터 모두 단위에 제한은 없다.
example
아래 예시를 통해 clamp 함수의 동작을 이해하도록 하자.
- `clamp(100px, 50%, 200px);` 👉 내부 박스는 최소 100px, 최대 200px까지 가질 수 있다.
- `clamp(100px, 50%, 200px);` 👉 중간값 `value`자리에 50%를 줘서 부모 컨테이너의 크기의 `50%`의 크기를 가지도록 했다.
See the Pen css-clamp by Olimjo (@OLIMJO) on CodePen.
레퍼런스
1. https://developer.mozilla.org/en-US/docs/Web/CSS/clamp
