유연한 그림

유연한 그림은 부모가 좁으면 그만큼 줄어드는 그림입니다. CSS max-width: 100%로 그림 너비의 상한을 부모 내용 칸으로 두고, height: auto로 높이를 그림 비율에 맞추며, HTML의 width · height는 지우지 않고 둡니다.

그림 넣기 img에서는 그림을 width="280"처럼 칸보다 작게 적어 넘치지 않게 했습니다. 그런데 사진을 원래 크기 400px로 적으면 폭 200px 카드나 휴대전화 화면에서 그림이 칸 밖으로 튀어나옵니다. 칸마다 숫자를 바꿔 적을 수는 없으니, 칸이 좁으면 그림이 알아서 줄게 해야 합니다. 이 레슨은 그 두 줄과, 하나만 쓰면 무엇이 어긋나는지 봅니다.

그림 준비 중

1max-width: 100% — 부모보다 넓어지지 않는다

가로 400 · 세로 300 사진을 너비 200px 카드에 넣습니다.

<div class="card">
  <img
    src="images/wide.webp"
    width="400"
    height="300"
    alt="김치볶음밥"
  />
</div>

.card {
  width: 200px;
}

그림은 HTML에 적은 400px을 지켜 카드 밖으로 튀어나왔습니다. 결과 화면도 가로로 넘칩니다.

max-width: 100%를 더합니다. %는 부모 내용 칸에서 재므로 100%는 카드의 200px입니다(브라우저 규칙 6).

<div class="card">
  <img
    src="images/wide.webp"
    width="400"
    height="300"
    alt="김치볶음밥"
  />
</div>

.card {
  width: 200px;
}

img {
  max-width: 100%;
}

너비는 200px로 줄었는데 높이는 300px 그대로라, 사진이 세로로 길쭉하게 찌그러졌습니다. 둥근 그릇이 세로로 긴 타원이 되었습니다. 너비만 상한에 걸리고, 높이는 HTML의 height="300"을 지킨 것입니다.

2height: auto — 높이를 비율대로

<div class="card">
  <img
    src="images/wide.webp"
    width="400"
    height="300"
    alt="김치볶음밥"
  />
</div>

.card {
  width: 200px;
}

img {
  max-width: 100%;
  height: auto;
}

height: auto면 높이를 너비와 그림 비율(4:3)로 셈해 200 × 150이 됩니다. HTML의 width · height는 그릴 크기를 알려 주는 값이라 우리 CSS 선언에 집니다 — CSS height: auto가 이겨 height="300"은 쓰이지 않습니다(브라우저 규칙 5).

이 레슨은 사진(webp)을 씁니다. 과목의 음식 그림 같은 SVG에 max-width만 주면 찌그러지지 않고 위아래에 빈 띠가 생겨, 무엇이 어긋났는지 알아보기 어렵습니다. 그래도 고치는 법은 같습니다 — height: auto를 함께 줍니다.

3HTML의 width · height는 그대로 둔다

CSS가 크기를 정해도 HTML의 두 값은 지우지 않습니다. 브라우저는 두 값에서 그림의 비율을 미리 알아 둡니다.

<img
  src="images/wide.webp"
  width="400"
  height="300"
  alt="김치볶음밥"
/>

img {
  max-width: 100%;
  height: auto;
}

Computed 창의 aspect-ratio가 auto 400 / 300입니다. 사진 파일이 오기 전에도 이 비율로 높이 자리를 비워 두어, 사진이 늦게 와도 아래 글이 밀려 내려가지 않습니다(그림 넣기 img 3절과 같은 까닭).

예제

레시피 카드의 사진 — 좁은 화면과 넓은 화면

모바일 먼저의 하위 목표 1(좁은 화면 기본 규칙)에 그림 규칙을 둡니다. 조건 블록 없이 두 폭에서 다 맞습니다.

<div class="recipe-card">
  <img
    src="images/wide.webp"
    width="400"
    height="300"
    alt="김치볶음밥"
  />
</div>

.recipe-card img {
  display: block;
  max-width: 100%;
  height: auto;
}

<div class="recipe-card">
  <img
    src="images/wide.webp"
    width="400"
    height="300"
    alt="김치볶음밥"
  />
</div>

.recipe-card img {
  display: block;
  max-width: 100%;
  height: auto;
}

• 폭 320px에서는 카드 내용 칸 304px까지 줄고, 높이는 304 × 3 ÷ 4 = 228px입니다.
• 폭 1280px에서는 원래 크기 400px에서 멈춥니다. max-width는 상한이라 줄이기만 하고 키우지는 않습니다.
• display: block은 아래 '자주 틀리는 곳' 셋째의 작은 틈을 없앱니다.

자주 틀리는 곳

틀린 생각: CSS로 크기를 정하니 HTML의 width · height는 지워도 된다.

<img
  src="images/wide.webp"
  alt="김치볶음밥"
/>

img {
  max-width: 100%;
  height: auto;
}

다 그려진 모양은 같아 보여도, 브라우저가 비율을 미리 모릅니다. 사진이 오기 전에는 높이 자리가 없다가, 사진이 오면 그만큼 아래 글이 밀려 내려갑니다.

맞는 규칙: HTML의 두 값은 비율을 알리는 값입니다. 지우지 않고 CSS height: auto와 함께 둡니다.

틀린 생각: 그림을 칸에 맞추려면 width: 100%를 준다.

<div class="card">
  <img
    src="images/logo.png"
    width="48"
    height="48"
    alt="레시피 노트"
  />
</div>

.card {
  width: 200px;
}

img {
  width: 100%;
  height: auto;
}

48px짜리 로고가 200px로 늘어났습니다. 점으로 담은 그림(PNG · 사진)은 원래보다 키우면 흐려집니다.

맞는 규칙: width: 100%는 늘 칸을 채우고, max-width: 100%는 넘칠 때만 줄입니다. 작은 그림까지 키우지 않게 max-width를 씁니다.

틀린 생각: 그림만 든 카드는 그림 높이와 같다.

<div class="card">
  <img
    src="images/wide.webp"
    width="400"
    height="300"
    alt="김치볶음밥"
  />
</div>

.card {
  width: 200px;
  border: 2px solid #6e6e73;
}

img {
  max-width: 100%;
  height: auto;
}

결과 화면에서 사진 아래와 테두리 사이에 작은 틈이 보입니다. img는 처음 값이 인라인이라 글자처럼 글 줄의 바닥선에 놓이고, 그 아래 글자 꼬리 자리가 남습니다. 틈의 크기는 글꼴마다 다릅니다.

맞는 규칙: 그림만 놓는 자리에서는 img에 display: block을 줘 글 줄에서 빼냅니다.

확인 문제

1. 2절 코드에서 카드 너비만 240px로 바꾸면, 사진의 너비와 높이는 어떻게 될까요?

• ① 240 × 180
• ② 240 × 300
• ③ 400 × 300

<div class="card">
  <img
    src="images/wide.webp"
    width="400"
    height="300"
    alt="김치볶음밥"
  />
</div>

.card {
  width: 240px;
}

img {
  max-width: 100%;
  height: auto;
}

2. 휴대전화에서 사진이 찌그러지지 않게 하는 그림 규칙입니다. ____ 자리를 채우세요.

img {
  max-width: 100%;
  height: ____;
}

3. 요리 동아리 공지 카드에서 지난 모임 사진 아래와 테두리 사이에 작은 틈이 생겼습니다. 틈을 없애는 것을 고르세요.

<div class="club-card">
  <img
    src="images/square.webp"
    width="300"
    height="300"
    alt="된장찌개"
  />
</div>

.club-card {
  width: 150px;
  border: 2px solid #6e6e73;
}

img {
  max-width: 100%;
  height: auto;
}

• ① img에 display: block;을 더한다.
• ② .club-card에 padding: 0;을 더한다.
• ③ img의 height: auto;를 height: 150px;로 바꾼다.

<div class="club-card">
  <img
    src="images/square.webp"
    width="300"
    height="300"
    alt="된장찌개"
  />
</div>

.club-card {
  width: 150px;
  border: 2px solid #6e6e73;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요. 2절 코드를 index.html과 style.css로 저장하고 link로 이어 엽니다(문서 뼈대의 body 안에 예제 HTML을 넣고, 아래 사진을 images 폴더에 둡니다). 사진이 200 × 150으로 보이는지 확인한 뒤, height: auto 줄을 지우고 저장 · 새로고침합니다 — 사진이 세로로 길쭉해집니다.

• wide.webp 받기