[css] clamp() 함수를 아시나요

이번 기회를 통해 알게된
css에서 사용되는 clamp() 함수를 소개하려 합니다.

🎇 clamp() 함수의 기본 사용

clamp(최소값, 가변값, 최대값)

모든 크기에서 사용할 수 있고, 가변값(ex: vw, em 등..)으로 설정이 되지만
설정해둔 최소값과 최대값은 지킵니다.
CSS의 너비를 결정하는 속성인 width, min-width, max-width와 같은 개념이라고 이해하면 빠릅니다.

예를들어
font-size: clamp(12px, 2.5vw, 18px);
이경우 기본적으로 폰트사이즈는 2.5vw를 따라가되,
12px 보다 작아지지 않고 18px 보다 커지지 않습니다. 12~18px 내의 값만 가지게 되는거죠.

🎇 비교

font-size에는 이와 비슷한 기능으로 max() 함수가 있습니다.

font-size: max(16px, 4vw);

max() 안에 들어있는 값 중, 큰 값으로 설정해줍니다. 일종의 최소값을 걸어준다고 볼 수 있습니다.
4vw > 16px일경우 4vw가 적용되고, 16px > 4vw 될 경우 무조건 16px로 설정됩니다.
둘이 같이 쓰는 경우는 드물겠지만 그래도 알아두면 좋겠죠

👓 참고문헌

• 반응형 웹을 구현하는 clamp() 함수 사용 기초 - 어포스트