CSS clamp() 함수

dev | 2024-12-08

widthheight에는 min/max 값을 지정하는 별도의 속성이 있어서 레이아웃 구성에 유용하게 사용할 수 있다. 다른 속성에도 이와 같이 최대/최소값을 적용할 수 있으면 좋겠다는 생각이 드는 경우가 있는데 이럴 때 clamp()를 사용할 수 있다.

clamp(100px, 75%, 200px)
100px
75%
200px

widthclamp(100px, 75%, 200px)를 적용한 경우다. min/max-width를 적용한 것 처럼 75%100px-200px 사이에서만 적용되는 것을 볼 수 있다. 글자 크기를 화면 크기와 연동하는 경우와 같이 값이 너무 작거나 커지지 않게 제어하는데 유용하게 사용할 수 있다.

calc()min(), max()와도 같이 사용할 수 있다. clamp(MIN, VAL, MAX)max(MIN, min(VAL, MAX))와 동일하다고 하는데 웬만한 계산은 이제 다 가능할 것 같다. 값 제어를 위해 레퍼로 감싸야 하는 경우는 거의 없어질 것으로 생각된다.

Comments

Post a comment

:

: 공개 되지 않습니다. Gravatar를 표시 합니다.

:

: HTML 태그를 사용할 수 없습니다.