미디어 쿼리를 활용한 반응형 웹 디자인

반응형 웹 디자인은 사용자가 어떤 기기를 사용하든지 간에 최적의 사용자 경험을 제공하는 것을 목표로 합니다. 여기서 미디어 쿼리는 중요한 역할을 합니다. 미디어 쿼리를 사용하면 다양한 화면 크기와 해상도에 맞게 웹사이트의 스타일을 조정할 수 있습니다. 이 글에서는 미디어 쿼리의 기초와 간단한 예제를 통해 반응형 웹 디자인을 어떻게 구현할 수 있는지 알아보겠습니다.

미디어 쿼리란?

미디어 쿼리는 CSS의 한 기능으로, 미디어 유형(예: 화면, 인쇄 등)과, 그리고 미디어의 특정 조건(예: 화면의 너비나 해상도)에 따라 다른 스타일 규칙을 적용할 수 있게 해줍니다. 이를 통해 개발자는 하나의 웹사이트에서도 다양한 기기와 화면 크기에 맞는 최적의 레이아웃을 제공할 수 있습니다.

기본 사용법

미디어 쿼리는 다음과 같이 사용할 수 있습니다:

@media (조건) {
  /* 조건이 참일 때 적용할 CSS 코드 */
}

예를 들어, 화면의 너비가 600px 미만일 때 적용할 스타일은 다음과 같이 작성할 수 있습니다:

@media (max-width: 599px) {
  body {
    background-color: lightblue;
  }
}

이 코드는 화면의 너비가 599px 미만일 때만 body의 배경색을 lightblue로 설정합니다.

예제: 반응형 이미지

웹사이트에 이미지를 배치할 때, 다양한 화면 크기에 맞게 이미지 크기를 조정하는 것이 중요합니다. 다음은 이미지를 반응형으로 만드는 간단한 예제입니다:

img {
  max-width: 100%;
  height: auto;
}

@media (min-width: 600px) {
  img {
    max-width: 50%;
  }
}

이 코드는 모든 img 태그에 대해 기본적으로 이미지의 최대 너비를 부모 요소의 100%로 설정합니다. 이는 이미지가 그것을 포함하고 있는 요소의 너비를 넘어서지 않게 합니다. 그리고 화면의 너비가 600px 이상일 때는 이미지의 최대 너비를 50%로 조정하여 이미지가 화면의 절반 크기를 넘지 않도록 합니다.

결론

미디어 쿼리를 사용하면 웹사이트를 다양한 화면 크기에 맞게 쉽게 조정할 수 있습니다. 이 글에서 소개한 기본적인 예제를 시작으로, 미디어 쿼리를 활용하여 사용자에게 더 나은 경험을 제공하는 반응형 웹 디자인을 구현해 보세요.