[CSS 함수] min(), max(), clamp()

min() 사용법

min() 함수는 하나이상의 인자값을 사용할 수 있으며, 그 중 가장 작은 값을 반환한다.

보통 우리가 흔히 사용하는 width, max-width 와 비슷하다

 

일반적으로 컨테이너가 1280px 이상으로 커지지 않기를 원할 경우

아래와 같이 스타일을 사용한다면

.container {
	width: 100%;
    max-width: 1280px;
}

 

아래와 같이 min() 함수를 이용할 수 있다.

.container {
	width: min(100%, 1280px);
}

 

반응형 마크업 시 padding 또는 margin 에 사용하면 편하다.

 

max() 사용법

max() 함수는 하나이상의 인자값을 사용할 수 있으며, 그 중 가장 큰 값을 반환한다.
보통 우리가 흔히 사용하는 width, min-width 와 비슷하다

컨테이너가 1280px 이하로 작아지지 않기를 원할 경우
아래와 같이 스타일을 사용한다면

.container {
	width: 100%;
    min-width: 1280px;
}

 

아래와 같이 max()를 이용할 수 있다

.container {
	width: max(100%, 1280px);
}

 

clamp() 사용법

clamp(최소값, 선호값, 최대값)

clamp() 함수는 같이 제공된 인자값으로 최소값과 최대값 사이의 선호값으로 자동 선택해준다.

.title {
	width: clamp(100px, 50%, 1280px);
}

위와 같이 사용시 최소값은 100px, 최대값은 1280px 이며 기본적으로 선호값인 50%로 width 가 설정된다

즉 해당 요소의  width가 50%로 설정되지만 100px ~ 1280px 사이에서만 설정된다

 

나 같은 경우엔 font-size에 많이 사용한다.

일반적으로 브라우저가 10px 이하의 폰트 사이즈를 구현하지 못하기 때문에

반응현 구현 시 아래와 같이 사용한다.

.title {
	font-size: clamp(10px, 12vw, 30px);
}

모바일 환경에서 적용하기 좋다

 

현재 지원가능한 브라우저는 아래와 같다.

min(), max(), clamp() : can i use