Min, Max와 Clamp 함수

CSS 비교 함수를 사용하면 JavaScript 없이도 조건부 크기 지정을 표현할 수 있습니다. 즉, “이 크기를 사용하되 이 범위보다 작거나 크지 않게 하세요”라고 지정할 수 있습니다. 이는 현대적인 유동형 반응형 디자인의 핵심입니다.

min()은 쉼표로 구분된 값 목록에서 가장 작은 값을 반환합니다. 브라우저는 현재 뷰포트 크기에서 가장 작은 값을 선택합니다.

max()는 가장 큰 값을 반환합니다. 크기가 커지면서도 최소 크기를 설정할 때 유용합니다.

clamp(min, preferred, max)는 값을 최솟값과 최댓값 사이로 제한합니다. 선호 값은 일반적으로 vw와 같은 유동적인 값입니다.

clamp()를 사용한 유동적 타이포그래피를 적용하면 여러 미디어 쿼리 글꼴 크기 재정의를 지정할 필요가 없습니다:

같은 패턴을 간격에도 적용하여 여백과 안쪽 여백을 자연스럽게 반응형으로 만들 수 있습니다:

최대 너비를 절대 초과하지 않고 가로 스크롤도 만들지 않는 안전한 컨테이너 패턴입니다:

복잡한 표현식을 만들기 위해 비교 함수를 중첩할 수 있습니다:

두 크기 사이를 정확하게 유동적으로 보간하려면 clamp() 안에서 calc()를 사용합니다:

CSS에는 키워드로 지정하는 크기 값도 있습니다:

• min-content: 넘침 없이 가능한 가장 작은 크기
• max-content: 콘텐츠에 필요한 만큼의 공간을 차지하는 크기
• fit-content(): max-content와 같지만 지정한 한도에서 제한되는 크기

min(), max(), clamp()는 모든 최신 브라우저에서 지원됩니다. 접두사는 필요하지 않습니다. 길이, 빈도, 시간 또는 숫자 값이 필요한 모든 곳에서 사용할 수 있습니다.

min()은 가장 작은 값을 선택하고 max()는 가장 큰 값을 선택합니다. clamp(min, preferred, max)는 유동적인 값을 지정된 범위 안으로 제한합니다. 이러한 함수는 최신 유동적 타이포그래피와 간격을 구현하며, 여러 미디어 쿼리 재정의가 필요한 경우를 줄여 줍니다.