12.clamp(),min(),max()

1. min()

min() 함수는 하나 이상의 쉼표로 구분된 연산을 포함하며 최소값을 지정한다. 보통 최대값 설정시 사용한다.

[미리보기]

.element {
  width: min(50%, 500px);
}

브라우저는 뷰포트 너비에 따라 두 값(50%, 500px) 중에서 가장 작은 값을 선택한다.

2. max()

max() 함수는 하나 이상의 쉼표로 구분된 연산 중 가장 큰 값을 나타낸다. 보통 최소값을 설정할 때 사용한다.

[미리보기]

.element {
  width: max(50%, 500px);
}

3. clamp()

MDN

클램프 함수는 요소의 크기에 최소,최대 범위를 지정할수 있는 함수이다.

clamp() 함수의 기본 사용 구문 clamp(min, prefered, max)

prefered 값이 가장 중요하다. 기본 사용값이며 “선호하는 값”이라고도 한다.

부모 요소를 기준으로 하는 상대 크기, 또는 상대 단위 값을 사용해야 한다. px와 같은 절대 단위를 사용하면 clamp() 함수의 기능을 할 수 없다.

상대 크기로 가변이지만 min 값보다는 작아질 수 없고, max 값보다는 커질 수 없다.

3.1. 기본문법

최소값, 기본값, 최대 허용값의 세 가지 매개 변수가 필요하다.

clamp(1rem, 10vw, 2rem)

clamp(min, val, max)

• min(최소값) 최소값은 가장 작은(가장 음수인) 값이다. 이는 허용되는 값 범위의 하한값이다. 기본값이 이 값보다 작으면 최소값이 사용된다.

• val(기본값) 기본값은 결과가 최소값과 최대값 사이에 있는 한 값이 사용되는 표현식이다.

• max(최대값) 최대값은 기본값이 이 상한값보다 큰 경우 속성 값이 할당될 가장 큰(가장 양수인) 표현식 값이다.

3.2. 예제

• 화면의 너비가 440px 일때 5vw => 440x 0.05 =22px [미리보기]

.title {
  font-size: clamp(16px, 5vw, 50px);
}

<h1 class="title">타이틀타이틀타이틀타이틀</h1>

[미리보기]

<h1>Simple responsive test</h1>
html {