css 아키텍처
-
clamp() 사용하기CSS 2020. 10. 11. 23:42
반응형 타이포그래피는 과거에 미디어쿼리 및 CSS calc()와 같은 다양한 방법으로 시도되었습니다. 여기에서는 뷰포트의 너비가 증가함에 따라 텍스트의 최소 크기와 최대 크기 사이에서 선형 적으로 크기를 조정하는 다른 방법을 살펴 보겠습니다. clamp(minimum, preferred, maximum); .banner { width: clamp(200px, 50% + 20px, 800px); /* Yes, you can do math inside clamp()! */ } 반환되는 값은 선호하는 값이 최소값(최소값이 반환되는 지점)보다 낮거나 최대 값(최대 값이 반환되는 지점)보다 높을 때까지 선호되는 값이됩니다. 위의 그림은 50%로 항상 유지하되 300px 이하로는 줄어들지 않고 800px 이상으로는..