[CSS] min, max, clamp

1. CSS min/max 사용법

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;
}

과 같다고 볼 수 있다.

2. CSS clamp

CSS clamp는 clamp(최솟값, 선호값, 최대값)형식으로 작성된다. 일반적으로 사용할때에는 선호값이 지정되며, 최솟값 미만, 최대값 초과의 값은 지정되지 않는다.

• 예시

.container {
	width: clamp(50% , 200px, 70%);
}

위와 같이 clamp를 작성한다고 했을때,

• .container의 parent width가 700px 일때
  .container 의 width는 350px이 된다.
• .container의 parent width 가 380px일때
  .container의 width는 200px이 된다.
• .containerdml parent width가 200px일때
  .container의 값은 140px이 된다.

*주의!!!

위의 함수들을 사용할때 주의해야 할 점은 다른 단위를 사용하는 경우에 사용가능하다는 것이다. (ex. min(20px, 100vh))