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

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

Una Kravets

반응형 디자인이 점점 더 세분화됨에 따라 CSS는 작성자가 더 많은 제어 권한을 갖도록 지속적으로 발전하고 있습니다. 이제 모든 최신 브라우저에서 지원되는 min(), max(), clamp() 함수는 웹사이트와 앱을 더 동적이고 응답성이 높은 작성 도구로 만드는 최신 도구 중 하나입니다. 이러한 함수를 사용하여 요소 크기 및 크기 조절을 제어하고, 요소 간 간격을 유지하며, 유연하고 유동적인 서체를 만들 수 있습니다.

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

CSS 값 및 단위 수준 4

브라우저 지원

min()

max()

clamp()

사용

적절한 경우 CSS 표현식의 오른쪽에 min(), max(), clamp()를 사용할 수 있습니다. min() 및 max()의 경우 값의 인수 목록을 제공하면 브라우저에서 가장 작거나 가장 큰 값을 결정합니다. 예를 들어 width: min(1rem, 50%, 10vw)의 경우 브라우저는 이러한 상대 단위 중 가장 작은 단위를 계산하고 요소의 너비에 이 값을 사용합니다.

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

clamp()를 사용하려면 최솟값, 계산할 이상적인 값, 최대값이라는 세 가지 값을 입력합니다.

<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자(영문 기준)는 텍스트 크기의 세리프 텍스트 서체로 설정된 단일 열 페이지에 적합한 줄 길이로 널리 간주됩니다.'

텍스트 블록의 너비가 45~75자(영문 기준) 사이가 되도록 하려면 clamp() 및 ch(0바이트 문자 전진) 단위를 사용합니다.

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

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

min() 또는 max()만 사용하여 이를 분할할 수도 있습니다. 요소의 너비가 항상 50%이고 더 큰 화면에서 너비가 75ch를 초과하지 않도록 하려면 width: min(75ch, 50%);를 사용하여 최대 크기를 설정하세요.

마찬가지로 width: max(45ch, 50%);에서와 같이 max() 함수를 사용하여 읽기 쉬운 텍스트의 최소 크기를 설정할 수 있습니다. 여기서 브라우저는 더 큰 값을 선택합니다. 즉, 요소는 45ch 이상이어야 합니다.

패딩 관리

max()를 사용하여 최소 패딩 크기를 설정할 수도 있습니다. 이 예는 CSS Tricks에서 가져온 것으로, 여기에서 독자 Caluã de Lacerda Pataca는 다음과 같은 아이디어를 공유했습니다. 요소에 더 큰 화면 크기에서는 추가 패딩을 적용하고 작은 화면 크기에서는 최소 패딩을 유지합니다. 이렇게 하려면 calc() 또는 max()를 사용하고 요소의 양쪽(calc((100vw - var(--contentWidth)) / 2) 또는 max(2rem, 50vw - var(--contentWidth) / 2))에서 최소 패딩을 뺍니다. 스타일 시트에서 다음과 같이 표시됩니다.

footer {
  padding: var(--blockPadding) max(2rem, 50vw - var(--contentWidth) / 2);
}

유동적인 서체

유동적인 서체를 사용 설정하기 위해 마이크 리트뮬러는 clamp() 함수를 사용하여 최소 글꼴 크기와 최대 글꼴 크기를 설정하고 이러한 크기 간에 크기 조정을 허용하는 기법을 대중화했습니다.

clamp(), 이전에는 글꼴 크기 조정을 디자인하려면 복잡한 스타일 문자열이 필요했습니다. 이제 브라우저가 자동으로 처리하도록 할 수 있습니다. 허용되는 최소 글꼴 크기 (예: 제목의 경우 1.5rem), 최대 크기 (예: 3rem), 이상적인 크기 (예: 5vw)를 설정합니다. 이제 코드를 거의 사용하지 않고도 제한된 최솟값과 최댓값에 도달할 때까지 페이지의 표시 영역 너비에 따라 서체가 조정됩니다.

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

추가 리소스

• MDN의 CSS 값 및 단위
• CSS 값 및 단위 수준 4 사양
• 내부 요소 너비에 관한 CSS 트릭 도움말
• min(), max(), clamp() 개요: Ahmad Shadeed

Unsplash의 @yer_a_wizard의 표지 이미지