clamp() 함수는 지정한 범위 안의 값이 3가지의 값만 가질 수 있는 좁은 선택 범위만 제공하지만,
반응형 레이아웃을 위한 간결한 구현이 가능하고 작은 CSS 코드만으로 구현이 가능하기 때문에,
단순한 반응형 웹을 위해서는 clamp() 함수가 여러가지 면에서 유리합니다.
h1 {
font-size: clamp(16px, 5vw, 34px);
}
/* clamp(최소값 16px, 유연한값 5vw, 최대값 34px) */
5vw의 폰트사이즈를 가질수 있는데 최소 16px, 최대 34px까지 커질 수 있습니다.
패딩, 마진값에서도 사용이 가능합니다.
미디어쿼리를 대신해서 훨씬 간결하고 유지보수가 쉬운 반응형 웹을 제작할 수 있지만
최소, 최대 값을 명확하게 제한할 수 있는 경우에만 사용할 수 있으므로 용도에 맞는 경우에만 사용할 수 있습니다.
https://developer.mozilla.org/en-US/docs/Web/CSS/clamp
clamp() - CSS: Cascading Style Sheets | MDN
The clamp() CSS function clamps a middle value within a range of values between a defined minimum bound and a maximum bound. The function takes three parameters: a minimum value, a preferred value, and a maximum allowed value.
developer.mozilla.org
Write Fewer Media Queries With the Clamp() CSS Function
Here's a neat little trick: You can use the clamp() CSS function to make font-size responsive and fl...
dev.to
'CSS3' 카테고리의 다른 글
| css 커스텀 프로퍼티 (0) | 2023.11.10 |
|---|---|
| :is() 와 :where() (0) | 2022.05.02 |
| CSS방법론 SMACSS (Scalable and Modular Architecture for CSS) (0) | 2021.08.06 |
| 한줄, 여러줄 말줄임 처리 (0) | 2020.11.16 |
| :focus-within (0) | 2020.10.12 |
