CSS min(), max(), clamp()

잘 지원되는 CSS 함수를 사용하여 요소 크기를 제어하고 적절한 간격을 유지하며 유동적인 서체를 구현하는 방법을 알아보세요.

반응형 디자인이 더욱 섬세해짐에 따라 CSS는 끊임없이 진화하고 있으며 통제력을 높였습니다 min(), max()clamp() 함수, 오늘날 모든 최신 브라우저에서 지원되고 있으며 더욱 동적이고 반응이 빠른 웹사이트와 앱을 제작할 수 있습니다. 이러한 요소 크기 및 크기 조절을 제어하고 요소 사이의 간격을 유지하는 함수 유연하고 유연한 서체를 만들 수 있습니다.

수학 함수 calc(), min(), max(), clamp()를 사용하면 더하기 (+), 빼기 (-), 곱하기 (*), 나누기 (/)가 포함된 수학 표현식을 구성요소 값으로 사용할 수 있습니다.

CSS 값 및 단위 수준 4

브라우저 지원

min()

브라우저 지원

  • Chrome: 79 <ph type="x-smartling-placeholder">
  • Edge: 79. <ph type="x-smartling-placeholder">
  • Firefox: 75 <ph type="x-smartling-placeholder">
  • Safari: 11.1. <ph type="x-smartling-placeholder">

소스

max()

브라우저 지원

  • Chrome: 79 <ph type="x-smartling-placeholder">
  • Edge: 79. <ph type="x-smartling-placeholder">
  • Firefox: 75 <ph type="x-smartling-placeholder">
  • Safari: 11.1. <ph type="x-smartling-placeholder">

소스

clamp()

브라우저 지원

  • Chrome: 79 <ph type="x-smartling-placeholder">
  • Edge: 79. <ph type="x-smartling-placeholder">
  • Firefox: 75 <ph type="x-smartling-placeholder">
  • Safari 13.1. <ph type="x-smartling-placeholder">

소스

사용

모든 CSS의 오른쪽에서 min(), max(), clamp()를 사용할 수 있습니다. 적당한 위치에 있을 수 있습니다. min()max()의 경우 다음을 제공합니다. 인수 목록에 추가된 값을 포함하며, 브라우저는 지정할 수 있습니다. 예를 들어 width: min(1rem, 50%, 10vw)의 경우 브라우저는 이러한 상대 단위 중 가장 작은 상대 단위를 계산하고 이 값을 설정합니다.

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder"> <ph type="x-smartling-placeholder">
</ph> min() 함수는 이 함수의 옵션 목록에서 최솟값을 선택합니다. Codepen 데모.

max() 함수는 최댓값에 관해 동일한 작업을 실행합니다.

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder"> <ph type="x-smartling-placeholder">
</ph> max() 함수는 이 함수의 옵션 목록에서 값을 선택합니다. Codepen 데모.

clamp()을(를) 사용하려면 최솟값, 이상적 최대값을 계산할 수 있습니다.

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder"> <ph type="x-smartling-placeholder">
</ph> clamp() 함수는 지정된 최솟값과 자세한 내용은 이 Codepen 데모를 참고하세요.

<length>, <frequency>, <angle>, <time>, <percentage>, <number> 또는 <integer>이 허용됩니다. 나 font-size: max(0.5vw, 50%, 2rem)에서와 같이 자체적으로 사용할 수 있음 calc() (font-size: max(calc(0.5vw - 1em), 2rem)에서와 같이) 또는 구성됨 (예: font-size: max(min(0.5vw, 1em), 2rem)).

다음은 이러한 함수를 사용하는 방법의 몇 가지 예입니다.

완벽한 너비

타이포그래픽의 요소 스타일 "45자에서 75자까지는 모든 것이 영어보다 Serif 텍스트 면으로 설정된 단일 열 페이지에 대한 만족스러운 줄 길이 텍스트 크기로 표시되죠."

텍스트 블록의 너비가 45~75자(영문 기준) 사이가 되도록 하려면 clamp()ch (0 너비 문자 진행) 단위:

p {
  width: clamp(45ch, 50%, 75ch);
}

이렇게 하면 브라우저에서 단락의 너비를 결정할 수 있습니다. 너비를 다음과 같이 설정합니다. 기본값은 50% 입니다. 50% 가 45ch보다 작으면 45ch를 너비로 사용합니다. 50% 가 75ch보다 넓으면 75ch를 사용합니다.

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder"> <ph type="x-smartling-placeholder">
</ph> clamp() 함수를 사용하여 최소 및 최대 너비를 설정합니다. Codepen의 데모를 참고하세요.

min() 또는 max()만 사용하여 분할할 수도 있습니다. 이 요소의 너비가 항상 50%이고 너비가 더 큰 경우 75ch을(를) 초과하지 않아야 합니다. width: min(75ch, 50%);를 사용하여 최대 크기를 설정합니다.

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder"> <ph type="x-smartling-placeholder">
</ph> min() 함수를 사용하여 최대 너비를 설정합니다.

같은 방식으로 max()를 사용하여 읽을 수 있는 텍스트의 최소 크기를 설정할 수 있습니다. 함수를 width: max(45ch, 50%);처럼 사용합니다. 여기서 브라우저는 값이 더 큽니다. 즉, 요소가 45ch 이상이어야 합니다.

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder"> <ph type="x-smartling-placeholder">
</ph> max() 함수를 사용하여 최소 너비를 설정합니다.

패딩 관리

max()를 사용하여 최소 패딩 크기를 설정할 수도 있습니다. 이 예시는 CSS 유용한 정보 칼루아 데 라세르다 파타카 독자의 말에서는 '원소가 하나의 요소만 큰 화면 크기에서는 추가 패딩을 제공하고 작은 크기에서는 최소 패딩을 유지 화면 크기 이렇게 하려면 calc() 또는 max()를 사용하고 최솟값을 뺍니다. 요소의 양쪽에서 패딩: calc((100vw - var(--contentWidth)) / 2), 또는 max(2rem, 50vw - var(--contentWidth) / 2). 스타일 시트에서는 다음과 같습니다.

footer {
  padding: var(--blockPadding) max(2rem, 50vw - var(--contentWidth) / 2);
}
드림 <ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
max() 함수를 사용하여 구성요소의 최소 패딩을 설정합니다. Codepen의 데모를 참고하세요.

유동적인 서체

유동적인 서체를 사용 설정하려면 다음 안내를 따르세요. 마이크 리트뮬러는 기법을 대중화함 이 함수는 clamp() 함수를 사용하여 최소 글꼴 크기, 최대 글꼴 크기, 해당 크기 간 확장을 허용합니다.

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder"> <ph type="x-smartling-placeholder">
</ph> clamp()를 사용하여 유동적인 서체를 만듭니다. Codepen의 데모를 참고하세요.

clamp(), 이전에는 글꼴 크기 조정을 설계하려면 복잡한 스타일 문자열이 필요했습니다. 이제 브라우저가 알아서 처리해 줍니다. 허용되는 최소 글꼴 설정 크기 (예: 제목의 경우 1.5rem), 최대 크기 (예: 3rem) 및 이상적인 크기 (예: 5vw) 이제 페이지의 글꼴에 따라 서체가 최소 및 최대값에 도달할 때까지 표시 영역 너비를 조절합니다. 아주 작은 코드:

p {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

추가 리소스

커버 이미지 출처: @yer_a_wizard 물 튀김을 제거합니다.