반응형 작업 시에 미디어쿼리를 최소화로 잡는 방법

📌 반응형 작업 시에 rem등 단위를 활용하여 미디어쿼리를 최소화로 잡는 방법

반응형 웹 디자인에서 왜 rem단위를 사용할까?

rem 단위는 root 요소의 폰트 크기에 상대적으로 크기가 결정되는데, root 요소의 폰트 크기는 뷰포트 크기에 따라 변경되고 모든 요소의 크기가 비례적으로 조정된다.
이에 따라 각 요소에 대해 별도로 미디어 쿼리를 작성할 필요 없이 모든 요소가 자동으로 적절한 크기로 조정되어 디바이스 간 일관성 있는 사용자 경험을 제공할 수 있다.
또한, 사용자가 브라우저의 폰트 크기를 조정할 수 있기 때문에 접근성 측면에서도 유리하다. 즉, 코드의 유지보수성과 접근성 측면을 개선할 수 있다.

그렇다면 미디어쿼리를 어떻게 최소화할까?

1. 뷰포트 단위 사용하기

rem, em, vw, vh 등 뷰포트 단위를 사용하면 미디어쿼리를 사용하는 것보다 더 유연한 반응형 웹사이트를 만들 수 있다. 예를 들어, 폰트 크기를 rem으로 설정하면 브라우저 크기가 변경될 때 폰트 크기도 함께 조정된다.

/* 폰트 크기를 rem으로 설정 */
body {
  font-size: 16px;
}

h1 {
  font-size: 2rem;
}

@media (min-width: 768px) {
  /* 뷰포트 너비가 768px 이상일 때 */
  body {
    font-size: 18px;
  }

  h1 {
    font-size: 2.5rem;
  }
}

2. 미디어 쿼리를 모듈화하기

미디어 쿼리를 모듈화하는 것을 통해 웹사이트의 레이아웃을 변경할 때 필요한 미디어 쿼리만 추가하면 된다. 이렇게 하면 불필요한 미디어 쿼리를 제거하여 웹사이트의 성능을 향상시킬 수 있다.

/* 모듈화된 미디어 쿼리 */
/* 브라우저 너비가 768px 이하일 때 */
@media (max-width: 768px) {
  .main-nav {
    display: none;
  }

  .menu-toggle {
    display: block;
  }
}

/* 브라우저 너비가 768px 이상일 때 */
@media (min-width: 768px) {
  .main-nav {
    display: flex;
  }

  .menu-toggle {
    display: none;
  }
}

3. 최소한의 미디어 쿼리 사용하기

모바일 기기에서 보여지는 콘텐츠와 데스크톱에서 보여지는 콘텐츠를 구분하는 데 필요한 최소한의 미디어 쿼리만 사용하는 것이 좋다. 이렇게 하면 웹사이트의 로딩 시간이 줄어들며 코드 유지 보수도 쉬워진다.

/* 모바일 기기용 스타일 */
body {
  font-size: 16px;
  line-height: 1.5;
}

/* 데스크톱용 스타일 */
@media (min-width: 768px) {
  body {
    font-size: 18px;
    line-height: 1.6;
  }
}

4. 미디어 쿼리 중첩 피하기

미디어 쿼리를 중첩하는 것은 코드를 복잡하게 만들 수 있다. 가능하면 중첩된 미디어 쿼리를 피하고 단일 미디어 쿼리로 대체하는 것이 좋다.

/* 중첩된 미디어 쿼리를 사용한 예 */
@media (min-width: 768px) {
  .header {
    padding-top: 2rem;
    padding-bottom: 2rem;

    /* 브라우저 너비가 1024px 이하일 때 */
    @media (max-width: 1024px) {
      padding-top: 1rem;
      padding-bottom: 1rem;
    }
  }
}

/* 중첩된 미디어 쿼리를 사용하지 않은 예 */
@media (min-width: 768px) and (max-width: 1024px) {
  .header {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}

@media (min-width: 1025px) {
  .header {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}

5. 미디어 쿼리 범위 결합하기

미디어 쿼리를 결합하여 불필요한 코드를 제거하는 것이 좋다. 예를 들어, 미디어 쿼리를 결합하여 768px 이상과 1024px 이하의 모든 해상도에 대한 스타일을 적용할 수 있다.

/* 미디어 쿼리를 결합한 예 */
/* 브라우저 너비가 768px 이상 1024px 이하일 때 */
@media (min-width: 768px) and (max-width: 1024px) {
  .main-nav {
    display: none;
  }

  .menu-toggle {
    display: block;
  }
}

📍 이러한 방법을 활용하여 미디어 쿼리를 최소화하면 웹사이트의 성능을 향상시키고 유지 보수성을 높여 코드를 더 쉽게 수정하고 유지할 수 있게 해준다.