[CSS] 미디어쿼리를 최소화하여 반응형 웹 작업하기

미디어 쿼리란?

• 미디어쿼리를 이용하여 사용자의 화면 크기, 해상도, 방향 등을 감지하여 스타일시트를 동적으로 변경할 수 있는 CSS 기술
• 따라서, 이를 통해 다양한 기기에 대응하는 반응형 웹을 만들 수 있음
• 미디어 유형과 미디어 특성으로 구성됨
• 미디어쿼리 기본 구문

  @media media-type and (media-feature-rule) {
  /* CSS rules go here */
  }
  

미디어쿼리를 최소화하여 반응형 웹 작업을 하는 방법

• 브라우저는 페이지를 로드할 때 모든 미디어쿼리를 분석 및 적용해야 하여 과도하게 사용하지 않은 것이 좋음

1. 상대길이 단위 사용
   • px 단위 대신 rem, em, vw, vh 등의 상대길이를 사용하면, 사용자의 화면 크기나 미리 지정한 폰트 크기에 따라 동적으로 조정됨
2. grid, flex, flexbox 활용
   • 유동적으로 크기 조정 및 재배치 가능
   • 미디어쿼리를 사용하지 않고 개별 요소의 위치를 조정할 수 있어 뷰포트 크기에 맞춰 유연하게 조정 가능
3. CSS 함수 활용
   • 요소의 크기, 위치를 뷰포트 크기나 다른 요소의 크기에 따라 동적으로 계산 가능