![[CSS]: 함수(func)](/images/htmlcss_logo.png){kind=logo}
Table of Contents
calc()
- 수학 연산을 수행할 때 사용
- +, -, *, / 연산 가능
- 단위가 다른 값도 조합 가능
.box {
width: calc(100% - 50px);
font-size: calc(1rem + 2px);
}
min() & max()
min()은 전달된 값 중 가장 작은 값 선택max()는 전달된 값 중 가장 큰 값 선택
.box {
width: min(50vw, 500px); /* 뷰포트의 50% 또는 500px 중 작은 값 */
height: max(100px, 10vh); /* 100px 또는 10vh 중 큰 값 */
}
clamp()
- 최소값, 선호값, 최대값을 지정하여 크기를 자동 조정
- 반응형 디자인에서 유용
.text {
font-size: clamp(1rem, 2vw, 2rem); /* 최소 1rem, 최대 2rem, 기본적으로 2vw */
}
var()
- CSS 변수 활용할 때 사용
:root { --main-color: #3498db; } .button { background-color: var(--main-color); }
attr()
- HTML 속성 값을 가져와 스타일 적용 (제한적 사용 가능)
.tooltip::after {
content: attr(data-tooltip);
}