CSS min은 min(a, b, ...)
의 방식으로 사용하며 인자로 받은 값들 중 가장 작은 값을 값으로 취하는 함수이다.
.container {
width: min(50%, 200px)
}
위와 같이 사용한다면, .container
의 width 는 50%와 200px 중 작은 것을 골라 적용하게 된다. 내가 작성한 예시를 기준으로 한다면 위의 값은
.container {
width: 50%;
max-width: 200px;
}
과 같다고 볼 수 있다.
max 역시 이와 마찬가지로 max(a, b, ...)
의 방식처럼 사용하며, 인자로 받은 값들 중 가장 큰 값을 적용하게 된다.
.container {
width: max(50%, 200px)
}
위와 같이 사용한다면, .container
의 width는 50%와 200px 중 큰 것을 골라 적용하게 된다. 이를 역시나 다르게 작성해본다면,
.container {
width: 50%;
min-width: 200px;
}
과 같다고 볼 수 있다.
CSS clamp는 clamp(최솟값, 선호값, 최대값)
형식으로 작성된다. 일반적으로 사용할때에는 선호값이 지정되며, 최솟값 미만, 최대값 초과의 값은 지정되지 않는다.
.container {
width: clamp(50% , 200px, 70%);
}
위와 같이 clamp를 작성한다고 했을때,
350px
이 된다. 380px
일때200px
이 된다.200px
일때140px
이 된다.위의 함수들을 사용할때 주의해야 할 점은 다른 단위를 사용하는 경우에 사용가능하다는 것이다. (ex. min(20px, 100vh))