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

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

Una Kravets

반응형 디자인이 더 세밀해짐에 따라 CSS는 작성자에게 더 많은 제어권을 제공하기 위해 끊임없이 진화하고 있습니다. 이제 모든 최신 브라우저에서 지원되는 min(), max(), clamp() 함수는 웹사이트 및 앱 작성을 더 동적이고 반응적으로 만드는 최신 도구 중 하나입니다. 이러한 함수를 사용하여 요소 크기 조정 및 크기 조절을 제어하고 요소 간 간격을 유지하며 유연하고 유연한 서체를 만들 수 있습니다.

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

CSS 값 및 단위 수준 4

브라우저 지원

min()

브라우저 지원

  • 79
  • 79
  • 75
  • 11.1

소스

max()

브라우저 지원

  • 79
  • 79
  • 75
  • 11.1

소스

clamp()

브라우저 지원

  • 79
  • 79
  • 75
  • 13.1

소스

사용량

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

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

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

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

clamp()를 사용하려면 최솟값, 이상적인 계산 값, 최댓값의 3가지 값을 입력합니다.

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)) 할 수 있습니다.

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

완벽한 너비

Robert Bringhurst의 The Elements of Typographic Style에 따르면 "45~75자(영문 기준)는 텍스트 크기로 서 있는 텍스트 페이스로 설정된 단일 열 페이지의 만족스러운 줄 길이로 널리 인식됩니다."

텍스트 블록의 너비를 45~75자(영문 기준) 사이로 유지하려면 clamp() 및 ch(0폭 문자 고급) 단위를 사용합니다.

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

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

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

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

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

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

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);
}
max() 함수를 사용하여 구성요소의 최소 패딩을 설정합니다. Codepen 데모를 참고하세요.

유동적인 서체

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

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

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

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

추가 리소스

Unsplash에 등록된 @yer_a_wizard의 커버 이미지입니다.