7.1 함수 min()
min() 함수는 인수 목록에서 가장 작은 값을 반환해. 이거는 특정 제한을 넘지 않도록 값 설정할 때 유용해.
문법:
셀렉터 {
속성: min(value1, value2 ...);
}
사용 예:
이 예제에서 블록의 너비는 최대 300 픽셀이지만, 부모 요소의 100%가 300픽셀보다 작으면 100% 값이 사용돼:
CSS
/* 블록 너비는 최대 300px, 최소 100px */
.block {
width: min(300px, 100%);
}
예제 2: 폰트 크기 제한
이 예제에서 폰트 크기는 최대 2em이지만, 뷰포트 너비의 5%가 더 작다면 그 값이 사용돼:
CSS
.text {
font-size: min(2em, 5vw);
}
7.2 함수 max()
max() 함수는 인수 목록에서 가장 큰 값을 반환해. 이거는 특정 제한 아래로 내려가지 않도록 값 설정할 때 유용해.
문법:
셀렉터 {
속성: max(value1, value2, ...);
}
사용 예:
이 예제에서 블록의 너비는 최소 200 픽셀 이상이지만, 부모 요소의 너비가 50% 이상이면 그 값이 사용돼:
CSS
/* 블록 너비는 최소 200px, 더 클 수도 있음 */
.block {
width: max(200px, 50%);
}
예제 2: 최소 폰트 크기
이 예제에서 폰트 크기는 최소 1.5em 이상이지만, 뷰포트 너비의 2%가 더 크면 그 값이 사용돼:
CSS
.title {
font-size: max(1.5em, 2vw);
}
7.3 함수 clamp()
clamp() 함수는 최소값과 최대값 사이의 값을 반환해. 이 함수는 세 개의 인수를 받아: 최소값, 선호하는 값, 최대값.
문법:
셀렉터 {
속성: clamp(min, 표현식, max);
}
사용 예:
이 예제에서 폰트 크기는 뷰포트 너비에 따라 변해: 최소 12 픽셀, 최대 24 픽셀, 선호하는 값은 뷰포트 너비의 2%:
CSS
/* 화면 너비에 따라 12px에서 24px까지 폰트 크기 */
.text {
font-size: clamp(12px, 2vw, 24px);
}
예제 2: 블록 너비 제한
이 예제에서 블록 너비는 부모 요소의 너비에 따라 변하지만, 최소 200 픽셀 이상이고 최대 600 픽셀 이하로 유지돼:
CSS
.box {
width: clamp(200px, 50%, 600px);
}
7.4 완전한 구현 예제
CSS
.container {
display: flex;
flex-direction: column;
gap: 20px;
padding: 20px;
}
.box {
background-color: #3498db;
color: white;
padding: 10px;
text-align: center;
width: clamp(200px, 50%, 600px);
}
.text {
font-size: clamp(1em, 2vw, 2em);
}
.sidebar {
background-color: #2ecc71;
color: white;
padding: 10px;
text-align: center;
width: max(200px, 30%);
}
.text-small {
font-size: min(2em, 5vw);
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>함수 min(), max() 및 clamp() 사용 예제</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="box">너비: clamp(200px, 50%, 600px)</div>
<p class="text">폰트 크기: clamp(1em, 2vw, 2em)</p>
<div class="sidebar">너비: max(200px, 30%)</div>
<p class="text-small">폰트 크기: min(2em, 5vw)</p>
</div>
</body>
</html>
GO TO FULL VERSION