5.1 함수 calc()
CSS 함수는 스타일 파일 내에서 다양한 작업을 수행할 수 있는 유용한 도구를 제공합니다.
calc(), min(), max(), clamp() 함수는 특히 반응형 및 유연한 디자인을 만드는 데 유용하며,
수학적 연산과 조건부 값 계산을 수행할 수 있게 해줍니다.
calc() 함수는 CSS에서 수학적 연산을 수행하는 데 사용됩니다. 이 함수는 픽셀(px), 백분율(%), em, rem 등과 같은 서로 다른 단위를
하나의 표현식으로 결합할 수 있습니다.
문법:
선택자 {
속성: calc(표현식);
}
사용 예
이 예시에서 블록의 너비는 부모 요소의 너비의 50%에서 20픽셀을 뺀 값으로 계산됩니다:
CSS
/* 블록의 너비는 부모 요소의 절반에서 20px을 뺀 값 */
.block {
width: calc(50% - 20px);
}
5.2 함수 min(), max() 및 clamp()
CSS에서의 min(), max(), clamp() 함수
함수 min()
min() 함수는 여러 값을 받고 그중 가장 작은 값을 반환합니다. 컨텍스트에 따라 변하는 유연한 크기를 만드는 데 유용합니다.
문법:
선택자 {
속성: min(값1, 값2);
}
예시
이 예시에서는 컨테이너의 너비가 50% 또는 300픽셀 중 작은 값으로 설정됩니다:
CSS
.container {
width: min(50%, 300px);
}
함수 max()
max() 함수는 여러 값을 받고 그중 가장 큰 값을 반환합니다. 최소 크기를 설정하고 반응성을 보장하는 데 유용합니다.
함수 clamp()
clamp() 함수는 최소값, 선호값 및 최대값 세 가지 값을 받습니다. 최소와 최대 사이에서 선호하는 값에 가까운 값을 제한합니다.
5.3 CSS 함수 사용의 장점
CSS 함수 사용의 장점:
- 유연성. CSS 함수는 동적으로 값을 계산할 수 있어 더 유연하고 반응성 있는 스타일을 만들 수 있게 해줍니다.
- 반응형 디자인의 간소화.
min(),max(),clamp()함수는 특정 한계 내에서 값을 제한하여 반응형 디자인을 만드는 것을 크게 간소화합니다. - 미디어 쿼리 필요성 감소. 이러한 함수를 사용하면 다양한 화면 크기에 대한 스타일 조정을 위한 미디어 쿼리의 수를 줄일 수 있습니다.
5.4 전체 구현 예시
CSS
.container {
display: flex;
flex-direction: column;
gap: 10px;
padding: 20px;
}
.block {
background-color: #3498db;
color: white;
padding: 10px;
text-align: center;
}
.block:nth-child(1) {
width: calc(50% - 20px);
}
.block:nth-child(2) {
width: min(300px, 100%);
}
.block:nth-child(3) {
width: max(200px, 50%);
}
.text {
font-size: clamp(12px, 2vw, 24px);
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 함수 사용 예제</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="block">블록의 너비 calc(50% - 20px)</div>
<div class="block">블록의 너비 min(300px, 100%)</div>
<div class="block">블록의 너비 max(200px, 50%)</div>
<p class="text">글꼴 크기가 clamp(12px, 2vw, 24px)인 텍스트</p>
</div>
</body>
</html>
GO TO FULL VERSION