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)와 같이 단독으로 사용하거나 font-size: max(calc(0.5vw - 1em), 2rem)와 같이 calc()와 함께 사용하거나 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 트릭 도움말
• Ahmad Shadeed의 min(), max(), clamp() 개요