[css] min(),max(),clamp() : css 함수를 통한 반응형 웹

• 수학 함수인 calc(), min(), max(), clamp() 을 사용하면 덧셈, 뺄셈, 곱셈 및 나눗셈이 있는 수학 표현식을 구성 요소 값으로 사용할 수 있다.

1. min(), max()

• 값의 인수 목록을 제공하고 브라우저는 각각 가장 작은 값/큰 값을 결정 함.
• eg. min(1rem,50%,10vw)의 경우 브라우저는 상대 단위 중 가장 작은 단위를 계산하고 해당 값을 실제 값으로 사용.

2. clamp()를 사용하러면 (최솟값, 계산할 값, 최대값) 을 입력한다.

• font-size: max(0.5vw, 50%, 2rem)), calc()와 함께 사용하거나(i.e. font-size: max(calc(0.5vw - 1em), 2rem)), 구성하여 사용할 수 있습니다((i.e. font-size: max(min(0.5vw, 1em), 2rem)).
• clamp(<min>, <ideal>, <max>): 설정된 이상적인 값을 기준으로 상한과 하한 사이의 값을 고정합니다.

 

 

3. 참고) 완벽한 너비

• 타이그래포 스타일의 요소에 따르면 "텍스트 사이즈가 설정 되고, 세리프 텍스트 페이스를 사용하는 단일 열 페이지에서 가장 이상적인 줄 당 길이는 45자~75자로 간주 된다" 라고 했다. 
• 이를 바탕으로 텍스트 블록이 45자보다 좁거나 75자보더 넓지 않도록 clamp() 를 사용
  • 50%의 너비가 45ch보다 작은 경우가 아니면 너비를 50%로 설정.
  • 작은 경우 45ch 선택
  • 50% 가 75ch보다 넓은 경우도 동일

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

 

4. 패딩 관리 (CSS Tricks)

• max()로 최소 패딩을 설정
• 요소가 더 큰 화면 크기에서 추가 패딩을 가져올 수 있도록 하고, 특히 인라인 패딩에서 더 작은 화면 크기에서는 최소 패딩을 유지하는 것. => calc()을 사용하고 양쪽에서 최소 패딩을 빼기

/* calc((100vw - var(--contentWidth)) / 2), 혹은 max를 사용하세요. max(2rem, 50vw - var(--contentWidth) / 2). 합치면 이렇게 됩니다.  */

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

위와 같은 방법으로 동적인 타이포그래피 만들기 가능