계산식을 사용하는 CSS 함수 - min(), max(), clamp()

min() 함수, max() 함수

괄호 안의 값이나 계산식을 비교해서 작은 값이나 큰 값을 적용합니다. 

 

예를 들어, box의 크기를 500px과 50% 를 비교해서 작은 값을 선택하거나 큰 값을 선택하도록 할 수 있습니다.

.box1 {
  width: min(500px, 50%);
}
.box2 {
  width: max(500px, 50%);
}

위 소스를 사용했을 때, 화면 너비가 1600px 이라면 .box1과 .box2의 너비는 어떻게 될까요?

.box1은 500px과 50%(=800px) 중 작은 값이므로 너비가 500px이 되고,

.box2는 500px과 50%(=800px)중 큰 값이므로 너비가 800px이 됩니다.

clamp() 함수

반응형 웹이 일반화되면서 화면 크기에 반응하기 위한 CSS 기법들이 많이 사용되고 있습니다. 

그 중에서 미디어 쿼리는 화면 크기를 기준으로 요소의 크기나 글자 크기 등을 지정할 수 있는데요,

스마트폰 크기, 태블릿 크기, PC 크기, 대형 화면 등 화면 크기에 따라 중단점(break point)을 정확히 지정해야 하죠.

하지만 미디어쿼리처럼 꼼꼼하게 지정하지 않고 대~충 이 정도 크기면 괜찮겠다, 라고 두루뭉실하게 지정할 수도 있습니다. 그러기 위해선 우선, vw나 vh 단위를 이해해야 합니다.

 

vw는 viewport width, vh는 viewport height의 약자입니다.

즉, 현재 뷰포트의 크기를 기준으로 CSS 요소의 크기를 결정하는 것입니다.

뷰포트란, 웹 페이지 내용이 표시되는 영역을 가리킵니다. 예를 들어, PC라면 웹 브라우저의 제목 표시줄이나 주소 표시줄, 스크롤 막대 같은 것들을 제외하고 순전히 내용이 표시되는 영역만 가리킵니다.

 

100vw는 뷰포트 너비, 100vh는 뷰포트 높이가 됩니다. 

1vw는 뷰포트 너비를 100이라고 했을 때  1/100 크기를 가리키고 같은 방법으로 1vh는 뷰포트 높이의 1/100를 가리키겠죠?

clamp() 함수는 세 개의 인자를 사용합니다.

clamp(최솟값, 기본값, 최댓값)

세 가지 값 중에서 기본값을 사용하는데 화면 크기가 커진다면 최댓값까지 커질 수 있고, 화면 크기가 작아진다면 최솟값까지 작아질 수 있습니다. 여기에서 사용하는 값들은 화면 크기에 따라 커지거나 작아지기 때문에 상대 크기를 나타내는 단위를 사용합니다. 즉, px 단위 말고, em 이나 rem, vw, vh 같은 단위를 사용하죠. 

 

예를 들어, 웹 페이지 본문의 글자 크기를 지정할 때 clamp() 함수를 사용한다면 다음과 같이 지정할 수 있습니다.

p {
	font-size: clamp(1rem, 2.4vw, 2rem);
}

실제로 표시하는 글자 크기는 기본값 2.4vw입니다. 이 값이 화면 너비에 따라 달라지기 때문에 최솟값과 최댓값 사이에 있는지를 비교하게 되죠.  

위 소스에서 텍스트의 기본 글자 크기는 2.4vw지만 최소 1rem까지 작아질 수 있고, 최대 2rem까지 커질 수 있습니다. 즉, 최소 16px, 최대 32px의 크기가 됩니다. (따로 글자 크기를 지정하지 않으면 1rem = 16px이 됩니다)

 

위 소스를 좀더 살펴볼까요?

• 만일 뷰포트 너비가 1000px이상이라면, (최소 16px, 기본 24px, 최대 32px)이므로 24px로 표시됩니다.
• 만일 뷰포트 너비가 640px이하라면, (최소 16px, 기본 15px 이하, 최대 32px) 이므로 최솟값인 16px로 표시됩니다.  
• 만일 뷰포트 너비가 1440px 이상이라면 (최소 16, 기본 34px 이상, 최대 32px)이므로 최댓값인 32px로 표시됩니다. 

이렇게 clamp() 함수를 사용하면 CSS 요소의 크기를 최소, 최대 크기와 함께 지정해서 사용할 수 있습니다. 

 

단락의 글자 갯수 지정하기

텍스트 단락의 크기를 지정할 때 너비 값 대신 한 줄에 표시되는 글자 갯수를 지정할 수도 있습니다. 

예를 들어, 텍스트 한 줄에 40자 이상, 70자 미만의 글자가 나타나도록 하고 싶다면 다음과 같이 지정할 수 있습니다.

여기에서 사용된 ch 단위는 글자 1개를 나타냅니다. 

단락의 기본 너비를 50%로 사용하고 있고, 50%가 40자보다 작다면 40자를 표시하고, 50%가 70자보다 크다면 70자만 표시하게 됩니다. 

p {
	width: clamp(40ch, 50%, 70ch);
}

 

 

위의 세 가지 함수를 모두 사용해서 다음과 같은 예제를 작성할 수 있습니다.

 

See the Pen clamp by do.it.html5 (@kyrieko) on CodePen.