clamp()2 css clamp를 사용해보자 clamp()는 ie를 지원하지 않습니다. 저희가 ie와 작별할 시간도 머지 않았습니다. font-size를 반응형으로 잡을 때 유동적으로 작용할 수 있도록 도와줍니다 그리고 최소 사이즈 및 최대 사이즈도 정할 수 있지요. 사용법은 다음과 같습니다. h1 { font-size: clamp(16px, 5vw, 34px); } /** * 16px - 최소사이즈 * 5vw - 기준점 * 34px - 최대사이즈 */ 뷰포트 너비의 5%인 font-size가 되는데 16px부터 34px 사이의 사이즈에서만 적용됩니다. 예를 들어 뷰포트 너비가 300px인 경우 5vw 값은 15px와 같습니다. 그러나 해당 font-size 값을 최소 16px로 고정했으므로 16px이 될 것입니다. 브라우저 지원이 아직 미비하지만.. 2021. 10. 25. clamp() 사용하기 반응형 타이포그래피는 과거에 미디어쿼리 및 CSS calc()와 같은 다양한 방법으로 시도되었습니다. 여기에서는 뷰포트의 너비가 증가함에 따라 텍스트의 최소 크기와 최대 크기 사이에서 선형 적으로 크기를 조정하는 다른 방법을 살펴 보겠습니다. clamp(minimum, preferred, maximum); .banner { width: clamp(200px, 50% + 20px, 800px); /* Yes, you can do math inside clamp()! */ } 반환되는 값은 선호하는 값이 최소값(최소값이 반환되는 지점)보다 낮거나 최대 값(최대 값이 반환되는 지점)보다 높을 때까지 선호되는 값이됩니다. 위의 그림은 50%로 항상 유지하되 300px 이하로는 줄어들지 않고 800px 이상으로는.. 2020. 10. 11. 이전 1 다음
