가변 이미지

Coddy HTML 여정의 Styling with CSS 섹션에 포함된 레슨 — 76개 중 66번째.

반응형 웹 디자인에서 가변 이미지(flexible images)는 다양한 화면 크기에 맞춰 자동으로 조정되어 모든 기기에서 보기 좋게 표시되도록 합니다. 유연성이 없으면 이미지가 작은 화면에서 너무 크게 나타나거나 레이아웃이 깨질 수 있습니다.

이미지를 유연하게 만드는 방법:

1. CSS max-width 사용하기
max-width: 100%를 설정하면 이미지가 컨테이너 너비를 초과하지 않도록 보장합니다.

img {
  max-width: 100%;
  height: auto; /* 종횡비 유지 */
}

2. 뷰포트 단위 사용
vw (viewport width)를 사용하여 화면 크기에 따라 이미지 크기가 조절되도록 할 수 있습니다.

img {
  width: 50vw; /* 이미지가 뷰포트 너비의 50%를 차지합니다 */
}

챌린지

쉬움

이미지가 포함된 HTML 문서가 제공됩니다. 여러분의 작업은 이미지가 다양한 화면 크기에 맞춰 조정되도록 반응형으로 만드는 것입니다.

img-max 클래스를 가진 모든 요소를 대상으로 하는 CSS 규칙을 작성하세요. 해당 요소의 max-width를 100%로, height를 auto로 설정하세요.
img-vw 클래스를 가진 모든 요소를 대상으로 하는 CSS 규칙을 작성하세요. 해당 요소의 width를 50vw로, height를 auto로 설정하세요.

치트 시트

가변형 이미지는 반응형 웹 디자인에서 다양한 화면 크기에 맞게 자동으로 조정됩니다.

max-width 사용하기:

img {
  max-width: 100%;
  height: auto; /* 가로세로 비율 유지 */
}

뷰포트 단위 사용하기:

img {
  width: 50vw; /* 이미지가 뷰포트 너비의 50%를 차지함 */
}

직접 해보기

<html>
<head>
    <title>Flexible Images</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body style="background-color:lightblue">
     <div class="container">
        <h2>Image with max-width: 100%</h2>
        <img class="img-max" src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Adelie_penguins_in_the_South_Shetland_Islands.jpg" alt="Max-Width Image">
    </div>

    <div class="container">
        <h2>Image with width: 50vw</h2>
        <img class="img-vw" src="https://upload.wikimedia.org/wikipedia/commons/4/40/Adelie_Penguins_on_iceberg.jpg">
    </div>
</body>
</html>