이 페이지는 Cloud Translation API를 통해 번역되었습니다.

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

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

Una Kravets

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

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

브라우저 지원

`min()`

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

소스

`max()`

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

소스

`clamp()`

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

소스

사용

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

</ph> <ph type="x-smartling-placeholder">

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

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

</ph> <ph type="x-smartling-placeholder">

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

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

</ph> <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> <ph type="x-smartling-placeholder">

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

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

</ph> <ph type="x-smartling-placeholder">

</ph> min() 함수를 사용하여 최대 너비를 설정합니다.

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

</ph> <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> <ph type="x-smartling-placeholder">

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

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

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

추가 리소스

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