CSS min(), max(), clamp() 함수로 반응형 웹 디자인 완성하기

안녕하세요 찐망고입니다.

 

CSS에서 min() 함수와 max() 함수는 반응형 웹 디자인에서 매우 유용하게 사용할 수 있는데요.

vw단위를 많이 쓰고 있는 이 시점에서 CSS속성 값을 동적으로 계산할 수 있게 도와줍니다.

 

min() 함수

• 역할: 주어진 값들 중에서 가장 작은 값을 반환합니다. 주로 너비나 높이 혹은 폰트사이즈에서 최솟값을 지정할 때 사용합니다.
• 사용예시:

.tit {
    font-size: min(3vw, 20px)
}

 

min(3vw, 20px)은 3vw와 20px 중 더 작은 값을 폰트 크기로 사용한다는 뜻으로, (vw는 뷰포트 너비의 1%를 의미합니다.)

화면이 너무 넓어서 3vw가 20px보다 크게 된다면, 폰트 크기는 20px로 고정될 거고,

반대로 화면이 좁아서 3vw가 20px보다 작다면, 폰트 크기는 3vw로 설정됩니다.

 

 

max() 함수

• 역할: 주어진 값들 중에서 가장 큰 값을 반환합니다. 주로 너비나 높이 혹은 폰트사이즈에서 최댓값을 지정할 때 사용합니다.
• 사용예시:

.box {
    width: max(300px, 50%);
}

 

max(300px, 50%)은 요소의 너비를 300px과 50%중 더 큰 값으로 설정합니다.

뷰포트가 600px이상일 때 50%는 300px보다 크므로, 요소의 너비는 50%로 설정되고, 

뷰포트가 600px이하일 때 50%는 300px보다 작으므로, 요소의 너비는 300px로 설정됩니다.

 

 

clamp() 함수

• 역할: min()과 max() 함수를 결합한 상태로 최소값, 최적값, 최댓값을 순서대로 받아서 해당 범위 내에서 값을 제한할 때 사용합니다.
• 사용예시:

.tit {
    font-size: clamp(16px, 4vw, 24px);
}

 

폰트크기가 최소 16px, 최대 24px 사이에서 4vw의 비율로 설정되는데,

화면크기에 따라 폰트크기가 조절되지만, 16px보다 작거나 24px보다 커지지 않도록 제한합니다.