CSS3 미디어 쿼리 완벽 정리: 화면 크기별 스타일 적용 방법

CSS3 미디어 쿼리란?

미디어 쿼리(Media Query)는 CSS3에서 도입된 기능으로, 모바일, 태블릿, 데스크톱처럼 화면 크기가 서로 다른 기기에 각각 다른 스타일 규칙을 적용할 수 있게 해줍니다. 이 기능은 반응형 웹 디자인(Responsive Web Design)의 핵심 요소로, 하나의 HTML 문서만으로 다양한 기기 환경에 최적화된 화면을 제공할 수 있습니다.

미디어 쿼리는 @media 키워드와 조건(예: 화면 너비)을 함께 사용하여 작성합니다. 조건이 참일 때에만 해당 블록 안의 스타일이 적용되며, 대표적으로 max-width(최대 너비)와 min-width(최소 너비) 속성이 자주 활용됩니다.

미디어 쿼리 구현 예제

아래 예제는 CSS3 미디어 쿼리를 실제로 적용한 코드입니다. 직접 실행해 보면서 동작 방식을 확인해 보세요.

<html>
   <head>
      <style>
         body {
            background-color: lightpink;
         }
         @media screen and (max-width: 420px) {
            body {
               background-color: lightblue;
            }
         }
      </style>
   </head>
   
   <body>
      <p>If screen size is less than 420px, then it will show lightblue color, 
      or else it will show light pink color</p>
   </body>
</html>

코드 설명

위 코드의 동작 원리는 다음과 같습니다.

기본 상태에서는 body의 배경색이 연분홍색(lightpink)으로 지정됩니다.
@media screen and (max-width: 420px) 조건은 화면 너비가 420px 이하일 때 참이 됩니다.
즉, 스마트폰처럼 화면이 좁은 기기에서 접속하면 배경색이 연한 파란색(lightblue)으로 변경되고, 그보다 넓은 화면에서는 연분홍색이 유지됩니다.

활용 팁

실무에서는 420px 외에도 768px(태블릿), 1024px(노트북), 1200px(데스크톱) 같은 대표적인 중단점(breakpoint)을 기준으로 여러 개의 미디어 쿼리를 조합해 사용합니다. 또한 모바일 우선 설계(Mobile First) 전략을 적용할 경우, 기본 스타일을 모바일 기준으로 작성하고 min-width 조건으로 화면이 커질수록 스타일을 확장하는 방식이 권장됩니다.