반응형 이미지를 위한 CSS max-width 속성 활용법

반응형 웹 디자인에서 이미지가 화면 크기에 맞춰 자동으로 조절되도록 하려면 max-width 속성을 활용하는 것이 가장 간단하고 효과적인 방법입니다.

max-width: 100%를 설정하면 이미지가 부모 요소의 너비를 초과하지 않으며, 화면이 좁아질 때 이미지도 함께 축소됩니다. 여기에 height: auto를 함께 지정하면 원본 이미지의 가로세로 비율이 그대로 유지되어 이미지가 찌그러지거나 왜곡되지 않습니다.

예제 코드

다음 코드를 실행하면 반응형 이미지에 max-width 속성을 적용한 결과를 직접 확인할 수 있습니다.

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
      <style>
         img {
            max-width: 100%;
            height: auto;
         }
      </style>
   </head>
   <body>
      <p>효과를 확인하려면 브라우저 창 크기를 조절해 보세요.</p>
      <img src = "https://www.tutorialspoint.com/python/images/python-data-science.jpg" alt = "Python Data Science" width = "400" height = "300">
   </body>
</html>

위 예제에서 브라우저 창의 너비를 줄여 보면, 이미지가 지정된 최대 크기(400px)를 유지하다가 화면이 좁아지면 자동으로 축소되는 것을 확인할 수 있습니다. 이처럼 max-width와 height: auto의 조합은 모바일, 태블릿, 데스크톱 등 다양한 기기에서 일관된 이미지 표시를 보장하는 반응형 웹의 기본 기법입니다.