TIL - 폰트 크기 반응형 조정 CSS

반응형 과제를 하던 중, 텍스트도 반응형으로 조정해보기로 했다.

검색해보니 바로 나온 calc() 함수,

이 함수는 반응형 CSS에서 유용하게 쓰이고 있다는데, CSS 속성 값으로 수학적 계산을 수행하여 동적으로 값을 설정하게 한다. 따라서 뷰포트의 크기나 어떠한 다른 요소의 크기에 따라 요소의 크기, 여백, 위치 등을 조정할 수 있다!

font-size : Calc()

 

1. 아래 예시에서는 div 요소의 너비를 뷰포트의 너비의 100%에서 20px을 뺀 값으로 설정한다. 따라서 뷰포트가 바뀔 때마다 이에 맞게 "반응"하여 폭이 조정된다는 뜻!

div {
  width: calc(100% - 20px);
}

 

2. 아래 예시는 div요소의 너비와 높이를 뷰포트의 너비와 높이의 50%에서 30px을 뺀 값으로 설정했다.
이로써 요소의 크기는 뷰포트의 크기에 따라 동적으로 조정된다!

div {
  width: calc(50vw - 30px);
  height: calc(50vh - 30px);
}

---

https://www.codingfactory.net/10534

CSS를 잘 정리해주신 블로그를 발견했다. 감사함니다 살펴보러 가야지.

CSS / 반응형 레이아웃 만들기