CSS - Min, Max, Clamp

Min(), Max()

• CSS 함수 표기법
• 두개 이상의 대소 비교가 가능한 값이 주어졌을 때, 최소값 또는 최대값을 반환.
• 같은단위의 값을 비교하기 보단 다른 단위의 값을 비교할 때,
  상대단위와 절대단위의 값을 비교할때 사용.
• 내부에 사칙연산, calc()함수 사용가능.

min(100px, 40%)
max(5vw, calc(10% - 10px))

• 길어질 수 있는 css를 간단하게 줄일 수 있음.

div{width: 70%; max-width: 1000px;}
div{width: min(70% , 1000px);}

Clamp()

• CSS 함수 표기법
• 기본값 양 옆에 최소, 최대값 설정.

clamp(min, prefered, max)

• 최소, 최대값만 조절가능하나, 간단한 미디어쿼리 대체가능.

.layout {font-size: 2rem;}

@media screen and (max-width:1280px){
    .layout{font-size: 2.5vw;}
}

@media screen and (max-width:640px){
    .layout{font-size: 1rem;}
}


.layout {font-size: clamp(1rem, 2.5vw, 2rem);}

참고

https://developer.mozilla.org/en-US/docs/Web/CSS/min
https://developer.mozilla.org/en-US/docs/Web/CSS/max
https://developer.mozilla.org/en-US/docs/Web/CSS/clamp
https://www.daleseo.com/css-min-max/
https://blogpack.tistory.com/1006