<div class="responsive-container">
  <h2>반응형 이미지 갤러리</h2>
  <p class="hint">💡 브라우저 창 크기를 좌우로 조절해보세요!</p>

  <!-- 1. srcset: 같은 비율이지만 화질(해상도)만 바뀔 때 -->
  <div class="card">
    <h3>1. 디스플레이 화질 대응 (srcset)</h3>
    <p>일반 모니터(1x)와 고화질 레티나 화면(2x)을 구분합니다.</p>
    <img class="img-responsive" 
         src="https://picsum.photos/id/237/400/250"
         srcset="https://picsum.photos/id/237/400/250 1x,
                 https://picsum.photos/id/237/800/500 2x" 
         alt="귀여운 강아지">
  </div>

  <!-- 2. picture: 기기 크기에 따라 이미지 비율/디자인 자체가 바뀔 때 (Art Direction) -->
  <div class="card">
    <h3>2. 아트 디렉션 (&lt;picture&gt;)</h3>
    <p>PC는 가로 배너, 태블릿은 중간, 모바일은 정사각형으로 아예 다른 이미지를 로드합니다.</p>
    
    <picture>
        <!-- 화면이 넓을 때 (PC 1024px 이상) -->
        <source media="(min-width: 1024px)" srcset="https://picsum.photos/id/10/1024/300">
        <!-- 화면이 중간일 때 (Tablet 768px 이상) -->
        <source media="(min-width: 768px)" srcset="https://picsum.photos/id/10/768/400">
        <!-- 기본값 (Mobile 768px 미만) -->
        <img class="img-responsive art-direction" src="https://picsum.photos/id/10/400/400" alt="풍경 배너">
    </picture>
  </div>
</div>