모바일 최적화를 위한 미디어 쿼리 활용하기 📱

오늘날 웹사이트를 방문하는 사람들 대부분이 모바일 기기를 사용합니다. 그래서 웹 개발자로서 우리의 목표는 모든 사용자가 최상의 경험을 할 수 있도록 웹사이트를 최적화하는 것입니다. 이번 포스트에서는 모바일 최적화의 핵심 요소 중 하나인 미디어 쿼리에 대해 알아보겠습니다.

미디어 쿼리는 웹사이트가 다양한 화면 크기와 해상도에 맞게 콘텐츠를 조정할 수 있도록 해주는 강력한 CSS 기능입니다. 간단히 말해, 미디어 쿼리는 우리가 특정 조건(예: 화면의 너비)에 따라 다른 스타일 규칙을 적용할 수 있게 해줍니다.

기본 사용법

미디어 쿼리를 사용하는 가장 기본적인 방법은 @media 규칙을 사용하는 것입니다. 예를 들어, 화면의 너비가 600px 미만일 때 특정 스타일을 적용하고 싶다면 다음과 같이 작성할 수 있습니다.

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

이 코드는 화면 너비가 599px 이하일 때만 body의 배경색을 lightblue로 설정합니다. 이렇게 함으로써 작은 화면을 가진 기기에서는 배경색이 lightblue로 보이게 됩니다.

다양한 기기에 대응하기

미디어 쿼리를 사용하면 태블릿, 데스크탑, 대형 모니터 등 다양한 기기에 대응할 수 있습니다. 예를 들어, 다음과 같이 여러 미디어 쿼리를 조합하여 사용할 수 있습니다.

/* 태블릿 */
@media (min-width: 600px) and (max-width: 899px) {
  body {
    background-color: peachpuff;
  }
}

/* 데스크탑 */
@media (min-width: 900px) {
  body {
    background-color: lavender;
  }
}

이 코드는 화면 너비에 따라 세 가지 다른 배경색을 적용합니다. 600px 이상 899px 이하일 때는 peachpuff, 900px 이상일 때는 lavender로 설정됩니다. 이를 통해 다양한 기기에서 사용자에게 최적화된 경험을 제공할 수 있습니다.

결론

미디어 쿼리는 웹사이트를 모바일 친화적으로 만드는 데 필수적인 도구입니다. 간단한 코드 몇 줄만으로도 사용자 경험을 크게 향상시킬 수 있습니다. 오늘 소개한 기본적인 사용법을 시작으로, 더 다양한 조건과 속성을 실험해 보며 여러분의 웹사이트를 모든 기기에서 멋지게 보일 수 있도록 최적화해 보세요!