[CSS] 13. 반응형 웹 디자인 - 미디어 쿼리

미디어 쿼리는 CSS3에서 도입된 강력한 기능으로, 다양한 기기와 화면 크기에 맞춰 웹 페이지의 스타일을 동적으로 변경할 수 있는 조건문입니다. 이를 통해 특정 화면 크기, 해상도, 디바이스 유형 등에 따라 다른 CSS 규칙을 적용할 수 있습니다. 반응형 웹 디자인의 핵심 요소로서, 다양한 화면 환경에서 웹 페이지의 레이아웃을 최적화하는 데 매우 중요합니다.

미디어 쿼리의 기본 구조

미디어 쿼리는 특정 조건을 만족할 때만 CSS 스타일을 적용하는 방식으로 작성됩니다. 기본 구조는 다음과 같습니다:

@media (조건) {
  /* 적용할 스타일 */
}

조건 부분에는 기기의 너비, 높이, 해상도 등을 설정할 수 있으며, 해당 조건이 만족되면 그 안에 정의된 CSS 스타일이 적용됩니다.

화면 너비에 따른 스타일 변경

가장 일반적인 미디어 쿼리 사용 방법은 화면 너비에 따라 다른 스타일을 적용하는 것입니다. 예를 들어, 화면 너비가 768px 이하인 경우 모바일 레이아웃을 적용하는 코드입니다:

/* 기본 스타일 */
.container {
  width: 960px;
  margin: 0 auto;
}

/* 화면 너비가 768px 이하일 때 적용 */
@media (max-width: 768px) {
  .container {
    width: 100%;
    padding: 10px;
  }
}

위 코드는 데스크톱 화면에서는 .container의 너비가 960px로 고정되지만, 화면 너비가 768px 이하일 경우 100% 너비로 변경되며, 패딩이 추가됩니다. 이를 통해 모바일 디바이스에서도 적절한 레이아웃이 유지됩니다.

다양한 조건 조합 사용

미디어 쿼리는 여러 조건을 AND 또는 OR로 결합하여 더욱 복잡한 조건을 정의할 수 있습니다. 예를 들어, 화면 너비가 768px 이하이면서 해상도가 2배 이상인 경우 특정 스타일을 적용할 수 있습니다:

@media (max-width: 768px) and (min-resolution: 2dppx) {
  .image {
    background-image: url('image@2x.png');
  }
}

이 코드는 레티나 디스플레이와 같은 고해상도 기기에서 더 높은 품질의 이미지를 적용하는 데 유용합니다.

미디어 타입 활용

미디어 쿼리는 특정 미디어 타입을 지정하여 스타일을 다르게 적용할 수 있습니다. 예를 들어, 스크린과 프린터에서 다르게 보이는 스타일을 설정할 수 있습니다:

@media print {
  body {
    font-size: 12pt;
    color: black;
  }
}

@media screen {
  body {
    font-size: 16px;
    color: #333;
  }
}

위 코드에서 @media print는 인쇄할 때 적용되는 스타일을 정의하고, @media screen은 스크린 디바이스에서 보여질 스타일을 정의합니다.

미디어 쿼리로 특정 기기 타겟팅

미디어 쿼리를 사용하면 특정 디바이스 또는 해상도에 맞춰 레이아웃을 최적화할 수 있습니다. 예를 들어, 태블릿과 스마트폰에 각각 다른 레이아웃을 적용하는 방법은 다음과 같습니다:

/* 태블릿 스타일 */
@media (min-width: 768px) and (max-width: 1024px) {
  .container {
    width: 80%;
  }
}

/* 스마트폰 스타일 */
@media (max-width: 767px) {
  .container {
    width: 100%;
  }
}

이 코드에서는 태블릿(화면 너비가 768px에서 1024px 사이인 디바이스)과 스마트폰(화면 너비가 767px 이하인 디바이스)에 각각 다른 너비를 적용하고 있습니다. 이를 통해 다양한 기기에서 일관된 사용자 경험을 제공할 수 있습니다.

미디어 쿼리 사용 시 주의 사항

미디어 쿼리를 사용할 때 주의할 점은 모바일 우선 디자인을 염두에 두고 작성하는 것입니다. 일반적으로 모바일 스타일을 기본으로 설정하고, 더 큰 화면에 맞춰 추가적인 스타일을 적용하는 방식이 성능 최적화에 도움이 됩니다.

/* 모바일 기본 스타일 */
.container {
  width: 100%;
}

/* 더 큰 화면에 맞춘 스타일 */
@media (min-width: 768px) {
  .container {
    width: 960px;
    margin: 0 auto;
  }
}

참고 사이트

• developer.mozilla.org
• css-tricks.com
• w3schools.com