반응형 크기 설정을 위한 clamp(), min(), max()

 

clamp()

 

clamp() CSS 함수는 정의된 최소값과 최대값 사이의 범위로 값을 제한하는 데 사용됩니다. 이 함수는 세 개의 매개변수를 가져옵니다: 최소값, 선호값 및 허용되는 최대값입니다.

 

글꼴 크기에 clamp()를 사용하면 미디어 쿼리가 필요하지 않고 하나의 코드 라인으로 화면 크기에 따라 글꼴 크기가 커지거나 최대 글꼴 크기를 초과하지 않고 최소 글꼴 크기를 유지하는 유동적 타이포그래피(fluid typography)와 같은 효과를 낼 수 있습니다.

 

/* Static values */
width: clamp(200px, 40%, 400px);
width: clamp(20rem, 30vw, 70rem);
width: clamp(10vw, 20em, 100vw);

/* Calculated values */
width: clamp(min(10vw, 20rem), 300px, max(90vw, 55rem));
width: clamp(100px, calc(30% / 2rem + 10px), 900px);

 

clamp(min, val, max) 함수는 세 개의 쉼표로 구분된 표현식을 매개변수로 받습니다.

 

min

기본으로 설정한 값이 min 값 보다 작아질 경우 min 값으로 설정됩니다.

일반적으로 고정값(px, pt같은)을 적용하게 됩니다.

 

val

기본 값 입니다. 이 값은 최소값보다 크고 최대값 보다 작을때 사용됩니다.

기본값은 보통 고정된 px, pt 같은 값이 아니라 %, vw, em 같은 반응형 사이즈 단위를 사용하게 되는데 반응형으로 설정한 값의 최소값과 최대값이 없을 경우 레이아웃에 영향을 줄 수 있습니다. 그럴 경우 min-width값과 max-width 값을 설정하게 되는데 clamp() 함수를 사용하면 한번에 해결 가능합니다.

 

max

기본으로 설정한 값이 max 값 보다 커질 경우 max 값으로 설정됩니다.

일반적으로 고정값(px, pt같은)을 적용하게 됩니다.

 

표현식은 수학 함수calc(), 리터럴 값, 유효한 인수 유형(<length>)으로 평가되는 표현식 또는 중첩된 min() 및 max() 함수를 사용 할 수 있습니다. 연산은 calc() 함수 자체를 사용하지 않고 덧셈, 뺄셈, 곱셈 및 나눗셈을 직접 적용 가능합니다. 필요한 경우 연산 순서를 설정하기 위해 괄호를 사용할 수도 있습니다.

 

width: clamp(400px - 200px, 50%, 400px); 이렇게 clac() 함수 사용없이 직접 연산이 가능합니다.

표준 연산자 우선순위 규칙을 사용하여 덧셈(+), 뺄셈(-), 곱셈(*), 나눗셈(/) 연산자를 결합한 값을 나타낼 수 있습니다. +와 - 피연산자의 경우 +, - 좌우에 공백을 넣어야 합니다.

 

표현식의 피연산자는 <length> 구문 값 중 어느 것이든 될 수 있습니다. 표현식의 각 값에 다른 단위를 사용할 수 있습니다. 필요한 경우 괄호를 사용하여 계산 순서를 지정할 수도 있습니다.

 

clamp(MIN, VAL, MAX)는 max(MIN, min(VAL, MAX))으로 해결됩니다.

 

 

max()

max() 함수는 쉼표로 구분된 표현식 목록 중 가장 큰 값을 CSS 속성 값으로 설정합니다.

 

예를 들어 width: max(20vw, 400px);에서, 너비는 최소한 400px이지만 뷰포트가 2000px보다 클 경우 (이 경우 1vw는 20px이므로 20vw는 400px이 됨), 더 넓어집니다. 이 기술은 속성에 대한 고정 최소 값을 지정하는 데 절대 단위를 사용하고, 상대적 단위를 사용하여 더 큰 뷰포트에 맞게 값이 증가하도록합니다.

 

max() 함수는 쉼표로 구분된 하나 이상의 식을 매개변수로 사용하며, 가장 큰 값이 사용됩니다.

산술 연산자를 사용한 수식, 리터럴 값 또는 attr()와 같은 기타 식으로 구성될 수 있습니다.

 

중첩된 min() 및 max() 함수를 사용할 수 있으며, 각 값에 대해 다른 단위를 사용할 수 있습니다.

필요한 경우 연산 순서를 설정하기 위해 괄호를 사용할 수도 있습니다.

 

• auto로 처리되는 고정 및 자동 레이아웃 테이블에서는 표의 열, 열 그룹, 행, 행 그룹 및 셀의 너비와 높이를 백분율로 지정할 수 있습니다.
• min() 및 다른 max() 함수를 중첩하여 사용할 수 있으며 이를 통해 수학식을 직접 작성할 수 있습니다. 따라서 calc() 함수를 사용하지 않아도 덧셈, 뺄셈, 곱셈 및 나눗셈을 직접 사용할 수 있습니다.
• min() 및 max() 값을 결합하거나 clamp() 또는 calc() 함수 내에서 max()를 사용할 수 있습니다. 표현식은 우선순위 규칙에 따라 결합된 값을 사용할 수 있으며, 덧셈(+), 뺄셈(-), 곱셈(*) 및 나눗셈(/) 연산자를 사용할 수 있습니다. +와 - 연산자 양쪽에 공백을 넣어야 하며, 표현식의 피연산자는 <length> 구문 값일 수 있습니다.

 

max()의 또 다른 사용 예는 글꼴 크기를 최소 크기 이상으로 유지하면서 글꼴 크기를 증가시켜 가독성을 보장하는 반응형 글꼴 크기를 가능하게 하는 것입니다.

 

h1 {
  font-size: 2rem;
}
h1.responsive {
  font-size: max(4vw, 2em, 2rem);
}

 

글꼴 크기는 최소 2rem이며 페이지의 기본 글꼴 크기의 두 배입니다. 이렇게하면 가독성과 접근성이 보장됩니다.

 

<h1>This text is always legible, but doesn't change size</h1><h1 class="responsive">
  This text is always legible, and is responsive, to a point
</h1>

 

max() 함수는 최소 값을 찾을때 사용 됩니다.

 

 

min()

min() 함수는 쉼표로 구분된 표현식 목록 중 가장 작은 값(가장 음수 값)을 CSS 속성 값으로 설정할 수 있게 하는 CSS 함수입니다.

 

width: min(50vw, 200px);에서 width는 최대 200px이지만, 뷰포트가 400px보다 작으면 줄어듭니다(이 경우 1vw는 4px이므로 50vw는 200px이 됩니다). 속성에 대한 고정 최대 값을 지정하는 데 절대 단위를 사용하고, 상대 단위를 사용하여 작은 뷰포트에 맞게 값을 축소할 수 있도록 합니다.

값들 사이에는 공백이나 단위를 포함할 수 있으며, 필요한 경우 괄호를 사용해 계산 순서를 조정할 수도 있습니다.

 

• 수학 식에서 자동 처리되는 테이블의 폭과 높이를 퍼센트로 표현할 수 있으며 auto와 같이 처리됩니다.
• max()와 min() 함수를 중첩해서 사용할 수 있습니다. calc() 함수를 사용하지 않아도 직접 덧셈, 뺄셈, 곱셈 및 나눗셈을 사용할 수 있습니다.
• 식은 연산자 우선순위에 따라 결합되며, 공백을 넣어야 하는 경우가 있습니다. 표현식의 값을 <length> 구문 값으로 사용할 수 있습니다.
• min() 값을 결합하거나 clamp() 또는 calc() 함수 내에서 사용할 수 있습니다.
• 여러 제약 조건을 적용해야 하는 경우 두 개 이상의 인수를 제공할 수 있습니다.

 

min()을 사용하는 또 다른 예는 반응형 폼 컨트롤에서 최대 크기를 설정하는 것입니다. 이렇게하면 폼의 너비가 축소되면 라벨과 입력의 너비도 축소됩니다.

 

input,
label {
  padding: 2px;
  box-sizing: border-box;
  display: inline-block;
  width: min(40%, 400px);
  background-color: pink;
}

form {
  margin: 4px;
  border: 1px solid black;
  padding: 4px;
}

 

여기서 폭은 100 %이며, 양식 자체와 여백, 테두리 및 안쪽 여백이 부모 요소의 폭을 모두 차지합니다.

입력과 레이블은 양식의 폭의 40% 미만이거나 패딩까지이며, 400px보다 작아야합니다. 즉, 레이블과 입력의 최대 너비는 400px입니다.

 

<form>
<label for="misc">Type something:</label><input type="text" id="misc" name="misc" />
</form>