3. 이미지 반응형 처리
이미지 태그에 class="w-full"만 넣어도
부모 요소 너비에 맞춰 자동으로 줄어들어서 가로 스크롤이 생기지 않아요.
카드 1
모바일에서는 1열, 태블릿에서는 2열, PC에서는 3열로 배치돼요.
카드 2
grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 클래스만 바꾸면 돼요.
카드 3
이미지가 있다면 aspect-video로 비율을 고정하세요.
이미지 태그에 class="w-full"만 넣어도
부모 요소 너비에 맞춰 자동으로 줄어들어서 가로 스크롤이 생기지 않아요.