반응형 이미지 문법

개념 이해하기

srcset의 폭 설명자와 sizes는 브라우저가 현재 레이아웃에 필요한 이미지 후보를 고르는 데 사용합니다. picture의 source는 화면 조건에 따라 다른 구도나 형식을 제공하고, 마지막 img는 기본 후보와 alt를 담당합니다.

예제에서는 <img srcset="small.jpg 480w, large.jpg 960w" sizes="(max-width:600px) 100vw, 600px"> 부분부터 찾으세요. 태그 이름만 외우기보다 부모·자식 관계와 속성이 어느 요소에 붙는지를 한 덩어리로 읽으면 구조를 고치기 쉬워집니다.

먼저 현재 결과를 확인한 뒤 source의 media 기준을 바꾸고 width/height가 레이아웃 이동을 줄이는 이유를 설명하세요. 수정 전에는 예상한 변화를 한 문장으로 적고, 실행 뒤에는 정보 순서와 키보드 접근까지 그대로인지 살펴보세요.