HTML CSS 이미지 문제 해결 실습: 경로·비율·잘림·흐림·CLS

이미지가 안 보임, 찌그러짐, 잘림, 흐림, 로딩 중 밀림을 실제 PNG 예제로 구분합니다. 상대 경로와 object-fit, srcset·sizes, 크기 예약을 한 실습에서 확인합니다.

시작·완성 예제 ZIP 내려받기 — 압축을 푼 뒤 starter/index.html을 브라우저에서 엽니다. 외부 서버나 JavaScript 없이 실행할 수 있습니다. Network 확인이 필요한 경우 README의 로컬 서버 실행 방법을 따르세요.

HTML CSS 이미지 문제 해결 실습: 경로·비율·잘림·흐림·CLS 핵심 개념 도식 — 이미지 문제는 경로, 원본 크기, HTML 크기 정보, CSS 표시 방식 순서로 확인합니다.

1. 증상 대신 실제 현상을 먼저 분류하기

“이미지가 깨졌다”는 말만으로는 어디를 고칠지 알기 어렵습니다. 아예 표시되지 않는지, 원이 타원처럼 늘어나는지, 가장자리가 잘리는지, 선이 흐린지, 로딩할 때 아래 글이 밀리는지부터 나눕니다. 이번 ZIP은 원·격자·가장자리 띠가 있는 PNG를 크기별로 포함합니다. 원으로 비율을, 띠로 잘림을, 격자로 확대 결과를 확인할 수 있습니다.

보이는 증상	먼저 볼 곳	이 실습의 해결 방향
표시되지 않음	Network 요청 URL·응답, src 철자	실제 파일과 상대 경로 일치
찌그러짐	CSS width·height, 원본 비율	height: auto 또는 적절한 object-fit
잘림	상자 비율, object-fit·object-position	전체가 필요하면 contain 또는 자연 비율
흐림	원본 픽셀 수, 표시 너비, 화면 밀도	충분한 원본과 맞는 srcset·sizes
레이아웃 밀림	로딩 전 예약된 공간	정확한 width·height 비율 제공

2. 작은 코드: 비율을 유지하는 기본 이미지

<img src="images/checker-480.png"
     width="480" height="320"
     alt="격자 가운데 원이 있는 비율 확인 이미지">

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

width와 height 속성은 원본의 3:2 비율을 제공합니다. CSS width: 100%는 부모 너비에 맞게 표시하고 height: auto는 높이를 비율에 따라 계산합니다. 따라서 HTML 속성 480이 모든 화면에서 표시 너비를 480px로 고정하는 것은 아닙니다. 원이 계속 원으로 보이는지 확인한 다음 고정 비율 썸네일 실험으로 넘어가세요.

3. 표시되지 않으면 경로와 응답부터 확인하기

ZIP의 각 실행 폴더에는 index.html, styles.css, images/checker-480.png가 있습니다. HTML에서 images/checker-480.png는 그 HTML을 기준으로 images 하위 폴더를 찾습니다. /images/checker-480.png처럼 맨 앞에 슬래시를 넣으면 서버의 루트 기준이 되므로 하위 경로에 배포할 때 의미가 달라집니다. CSS의 url()은 해당 CSS 파일 위치를 기준으로 합니다. 운영체제에서는 통과하던 대소문자 차이가 서버에서는 실패할 수 있으니 파일명도 정확히 비교하세요.

첫 번째 비교의 checker-missing.png는 오류를 관찰하기 위해 일부러 존재하지 않는 이름으로 적었습니다. 정상 파일의 누락이 아닙니다. 우클릭으로 이미지 주소를 열거나 개발자 도구 Network에서 요청 URL을 확인하세요. 로컬 파일 열기는 HTTP 상태 코드를 제공하지 않으므로 상태와 응답 내용을 실습하려면 ZIP README에 적힌 python -m http.server 8000 명령을 실행하고 http://localhost:8000/complete/로 접속합니다.

Network에서 Img 필터를 선택하고 새로고침합니다. 요청이 없다면 src, lazy loading, 표시 위치를 함께 확인합니다.
404는 경로와 배포 파일을 확인하고 403은 접근 허용 여부를 확인합니다. 오류를 CSS 너비 변경으로 해결할 수는 없습니다.
200이어도 응답이 HTML 오류 페이지일 수 있습니다. Preview와 Content-Type을 확인해 실제 이미지가 반환되는지 봅니다.
HTTPS 페이지의 HTTP 이미지, CSP 차단 등은 Console과 Network 메시지에 따라 구분합니다. 외부 서버 문제는 로컬 상대 경로 문제와 별도로 다룹니다.
왼쪽 src를 images/checker-480.png로 고쳐 저장하면 오른쪽과 같은 이미지가 표시되어야 합니다.

4. 찌그러짐과 잘림을 서로 다른 문제로 다루기

원본은 3:2인데 표시 상자는 3:1로 만들었습니다. fill은 상자를 채우기 위해 서로 다른 비율로 늘릴 수 있어서 원이 타원이 됩니다. cover는 비율을 유지한 채 상자를 채우므로 위아래가 잘립니다. contain은 전체를 상자 안에 넣으므로 이 예제에서는 좌우에 여백이 남습니다. 자연 비율 예제는 상자 높이가 원본 비율을 따라갑니다.

.frame { width: 100%; height: auto; aspect-ratio: 3 / 1; }
.fill { object-fit: fill; }
.cover { object-fit: cover; object-position: center; }
.contain { object-fit: contain; }

aspect-ratio로 이미지 요소의 상자 비율을 정하고 object-fit으로 그 상자 안의 이미지 내용이 맞춰지는 방식을 정했습니다. 같은 src를 사용하므로 결과 차이는 파일 손상이 아닌 표시 규칙에서 나옵니다. cover에서 object-position: center top으로 바꾸면 위쪽을 기준으로 자르지만 원본 전체가 보이게 되는 것은 아닙니다. 제품 설명, 도표처럼 가장자리 정보도 중요하면 자연 비율이나 contain을 고려하세요.

5. 흐림은 표시 픽셀 수와 후보 선택으로 진단하기

120px 이미지를 480 CSS px로 늘린 예와 더 큰 후보를 제공한 예를 비교합니다. CSS로 확대할 수 있어도 원본에 없는 세부 정보가 생기지는 않습니다. DPR이 2인 화면에서 480 CSS px로 보이는 이미지에는 대략 960 물리 픽셀 폭의 후보가 유리하지만, 최종 선택은 브라우저가 화면 밀도와 환경을 고려해 결정합니다. 캐시 때문에 예상과 다른 큰 후보가 재사용될 수도 있습니다.

srcset="images/checker-480.png 480w, images/checker-960.png 960w, images/checker-1440.png 1440w"
sizes="(max-width: 512px) calc(100vw - 32px), 480px"

w 값은 파일의 실제 가로 픽셀 수와 일치합니다. 세 후보는 모두 같은 구도와 3:2 비율입니다. 반응형 이미지는 별도 한 열 영역에서 최대 480px로 제한했습니다. body 좌우 패딩이 각각 16px이므로 viewport 512px 이하에서는 100vw – 32px, 그 이상에서는 480px이라는 sizes 설명이 실제 CSS와 대응합니다. sizes는 이미지 상자의 CSS 크기를 직접 정하지 않고 후보 선택에 사용할 예상 표시 너비를 알려 줍니다. 이 파일을 다른 그리드에 옮기면 sizes도 다시 계산해야 합니다.

DevTools에서 해당 이미지를 선택한 다음 Console에 $0.currentSrc를 입력하면 실제 선택 URL, $0.getBoundingClientRect().width로 표시 너비를 확인할 수 있습니다. 이는 선택한 요소를 확인하는 진단 명령이며 페이지 실행에 JavaScript가 필요한 것은 아닙니다. 압축 품질이나 원본 자체의 흐림도 별도 원인이므로 큰 파일을 넣었다는 이유만으로 선명하다고 결론 내리지 않습니다.

6. CLS: 로딩 전에 공간이 있는지 보기

마지막 예제는 width=”960″ height=”640″과 반응형 CSS로 로딩 전부터 3:2 공간을 예약합니다. 파일을 받기 전 이미지 높이를 알 수 없으면 아래 글이 밀릴 수 있습니다. DevTools Network에서 캐시를 끄고 속도를 낮춘 뒤 새로고침하며 문장의 위치를 관찰하세요. 이미지가 이미 캐시에 있거나 매우 빨리 로딩되면 차이가 잘 드러나지 않습니다.

비교하려면 index.html을 복사해 마지막 이미지의 width·height 속성만 제거한 뒤 다시 로딩합니다. Elements에서 속성을 지운 상태는 새로고침하면 사라지므로 파일 복사본에서 바꾸는 것이 명확합니다. 이 실습은 이미지가 만드는 레이아웃 이동을 관찰하는 것이며 전체 페이지의 CLS가 항상 0이라고 보장하지 않습니다. 폰트, 삽입 콘텐츠 등 다른 원인은 별도로 확인해야 합니다.

7. 완료 기준

틀린 경로와 정상 경로를 구분하고 의도한 오류를 고칠 수 있습니다.
fill의 타원, cover의 잘림, contain의 여백, 자연 비율의 차이를 설명할 수 있습니다.
320px와 넓은 화면에서 가로 넘침 없이 이미지와 설명이 읽힙니다.
실제 선택된 currentSrc와 표시 너비를 확인하고 sizes가 맞는 이유를 설명할 수 있습니다.
캐시를 끈 느린 로딩에서 크기 속성 유무를 비교하고 아래 글의 위치를 관찰합니다.

공식 문서: MDN img, MDN object-fit, WHATWG HTML 이미지 처리. 레이아웃의 부모 크기가 헷갈린다면 Grid와 Container Query 예제를 함께 확인하세요.

전체 코드: 두 파일로 완성하기

아래 HTML은 complete/index.html, CSS는 complete/styles.css와 같습니다. 같은 폴더에 저장하세요. 이미지가 있는 실습은 ZIP에 포함된 images 폴더도 같은 위치에 둡니다.

index.html

실습 파일

파일 경로를 확인하고 같은 프로젝트 안에 저장하세요. 이미지 등 소스 목록에 없는 파일과 실행 안내는 실습 ZIP에 포함되어 있습니다.

이미지 비율과 표시 공간을 정해 찌그러짐과 잘림의 차이를 확인합니다. 수정 전은 시작 상태, 수정 후는 비교할 완성 상태입니다.

수정 전

`index.html`

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>이미지 문제 진단 | 다섯 증상 실습</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <a href="#main">본문으로 바로 가기</a>
    <header><p>퍼블리싱 연습실</p></header>
    <main id="main" tabindex="-1">
      <h1>이미지 문제를 다섯 가지로 나누기</h1>
      <p>원은 비율을, 가장자리 선은 잘림을, 격자는 선명도를 확인하는 기준입니다.</p>
      <section>
        <h2>01 / 표시되지 않음: 경로 비교</h2>
        <p>왼쪽은 일부러 틀린 경로입니다. 오른쪽과 src를 비교하세요.</p>
        <div class="compare">
          <figure>
            <img
              class="natural"
              src="images/checker-missing.png"
              width="480"
              height="320"
              alt="의도한 경로 오류: 이미지를 불러오지 못했습니다"
            />
            <figcaption>오류 재현: 존재하지 않는 파일</figcaption>
          </figure>
          <figure>
            <img
              class="natural"
              src="images/checker-480.png"
              width="480"
              height="320"
              alt="정상 경로의 격자와 원"
            />
            <figcaption>수정: images/checker-480.png</figcaption>
          </figure>
        </div>
      </section>
      <section>
        <h2>02 / 찌그러짐: fill과 자연 비율</h2>
        <div class="compare">
          <figure>
            <img
              class="frame fill"
              src="images/checker-480.png"
              width="480"
              height="320"
              alt="가로로 늘어난 원"
            />
            <figcaption>fill: 3:1 상자에 강제로 맞춤</figcaption>
          </figure>
          <figure>
            <img
              class="natural"
              src="images/checker-480.png"
              width="480"
              height="320"
              alt="원래 비율의 원"
            />
            <figcaption>width: 100%; height: auto;</figcaption>
          </figure>
        </div>
      </section>
      <section>
        <h2>03 / 잘림: cover와 contain</h2>
        <div class="compare">
          <figure>
            <img
              class="frame cover"
              src="images/checker-480.png"
              width="480"
              height="320"
              alt="상하가 잘린 격자 이미지"
            />
            <figcaption>cover: 상자를 채우며 상하 일부 잘림</figcaption>
          </figure>
          <figure>
            <img
              class="frame contain"
              src="images/checker-480.png"
              width="480"
              height="320"
              alt="여백이 생기지만 전체가 보이는 격자 이미지"
            />
            <figcaption>contain: 전체 표시, 좌우 여백</figcaption>
          </figure>
        </div>
      </section>
      <section>
        <h2>04 / 흐림: 저해상도와 반응형 후보</h2>
        <figure class="responsive-figure">
          <img
            class="responsive"
            src="images/checker-120.png"
            width="120"
            height="80"
            alt="최대 480 CSS px로 확대한 120픽셀 격자"
          />
          <figcaption>120px 원본을 최대 480 CSS px로 확대</figcaption>
        </figure>
        <figure class="responsive-figure">
          <img
            class="responsive"
            src="images/checker-480.png"
            srcset="
              images/checker-480.png   480w,
              images/checker-960.png   960w,
              images/checker-1440.png 1440w
            "
            sizes="(max-width: 512px) calc(100vw - 32px), 480px"
            width="480"
            height="320"
            alt="표시 크기와 화면 밀도에 따라 선택하는 격자 이미지"
          />
          <figcaption>동일 구도의 480·960·1440px 후보</figcaption>
        </figure>
      </section>
      <section>
        <h2>05 / 로딩 중 밀림: 비율 공간 예약</h2>
        <p>캐시를 끄고 느린 네트워크로 새로고침한 뒤 아래 문장의 위치를 관찰하세요.</p>
        <figure class="responsive-figure">
          <img
            class="responsive"
            src="images/checker-960.png"
            width="960"
            height="640"
            alt="크기 속성으로 비율 공간을 예약한 격자 이미지"
          />
          <figcaption>이 문장이 이미지 로딩 때문에 밀리는지 확인합니다.</figcaption>
        </figure>
        <p>
          비교 실험: DevTools에서 마지막 이미지의 width와 height 속성을 제거한 뒤
          Elements에서 저장하지 말고 HTML을 별도 복사하여 다시 로딩해 보세요.
        </p>
      </section>
    </main>
  </body>
</html>

`styles.css`

*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 1rem;
  color: #202020;
  background: #fff;
  font-family: system-ui, sans-serif;
  line-height: 1.7;
}
header,
main {
  max-width: 72rem;
  margin-inline: auto;
}
a {
  color: inherit;
  text-underline-offset: 0.2em;
}
a:focus-visible {
  outline: 2px solid #202020;
  outline-offset: 4px;
}
h1 {
  font-size: clamp(1.6rem, 4vw, 2.5rem);
  line-height: 1.3;
}
h2 {
  font-size: 1.3rem;
}
h3 {
  margin-top: 0;
  font-size: 1.1rem;
}
section {
  margin-block: 2.5rem;
}
figure {
  margin: 0;
}
.compare {
  display: grid;
  gap: 1rem;
}
img {
  display: block;
  max-width: 100%;
  background: #ddd;
}
/* TODO 1: .natural의 너비와 비율을 지정하세요. */
/* TODO 2: .frame 상자를 3:1로 정하고 .fill/.cover/.contain을 비교하세요. */
/* TODO 3: .responsive-figure는 최대 480px, .responsive는 너비 100%로 만드세요. */
/* TODO 4: 48rem 이상에서 .compare를 두 열로 바꾸세요. */

수정 방법

`index.html`

이 파일은 변경하지 않습니다. 다른 파일을 수정하는 동안 기존 내용을 유지하세요.

`styles.css`

styles.css에서 아래 차이가 있는 위치를 수정하세요. -는 삭제할 줄, +는 추가할 줄이며 표시는 실제 코드에 넣지 않습니다.

이미지 비율과 표시 공간을 정해 찌그러짐과 잘림의 차이를 확인합니다.

--- 수정 전/styles.css
+++ 수정 후/styles.css
@@ -41,16 +41,55 @@
 figure {
   margin: 0;
 }
+figcaption {
+  padding-block: 0.5rem 1rem;
+  color: #444;
+}
 .compare {
   display: grid;
+  grid-template-columns: minmax(0, 1fr);
   gap: 1rem;
+}
+.compare > figure {
+  min-width: 0;
+  padding-top: 1rem;
+  border-top: 1px solid #777;
 }
 img {
   display: block;
-  max-width: 100%;
   background: #ddd;
+  color: #222;
 }
-/* TODO 1: .natural의 너비와 비율을 지정하세요. */
-/* TODO 2: .frame 상자를 3:1로 정하고 .fill/.cover/.contain을 비교하세요. */
-/* TODO 3: .responsive-figure는 최대 480px, .responsive는 너비 100%로 만드세요. */
-/* TODO 4: 48rem 이상에서 .compare를 두 열로 바꾸세요. */
+.natural {
+  width: 100%;
+  height: auto;
+}
+.frame {
+  width: 100%;
+  height: auto;
+  aspect-ratio: 3 / 1;
+}
+.fill {
+  object-fit: fill;
+}
+.cover {
+  object-fit: cover;
+  object-position: center;
+}
+.contain {
+  object-fit: contain;
+}
+.responsive-figure {
+  width: 100%;
+  max-width: 480px;
+  margin-block: 1rem;
+}
+.responsive {
+  width: 100%;
+  height: auto;
+}
+@media (min-width: 48rem) {
+  .compare {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}

수정 후 탭의 전체 파일과 비교한 뒤 본문의 확인 절차를 실행하세요.

수정 후

`index.html`

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>이미지 문제 진단 | 다섯 증상 실습</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <a href="#main">본문으로 바로 가기</a>
    <header><p>퍼블리싱 연습실</p></header>
    <main id="main" tabindex="-1">
      <h1>이미지 문제를 다섯 가지로 나누기</h1>
      <p>원은 비율을, 가장자리 선은 잘림을, 격자는 선명도를 확인하는 기준입니다.</p>
      <section>
        <h2>01 / 표시되지 않음: 경로 비교</h2>
        <p>왼쪽은 일부러 틀린 경로입니다. 오른쪽과 src를 비교하세요.</p>
        <div class="compare">
          <figure>
            <img
              class="natural"
              src="images/checker-missing.png"
              width="480"
              height="320"
              alt="의도한 경로 오류: 이미지를 불러오지 못했습니다"
            />
            <figcaption>오류 재현: 존재하지 않는 파일</figcaption>
          </figure>
          <figure>
            <img
              class="natural"
              src="images/checker-480.png"
              width="480"
              height="320"
              alt="정상 경로의 격자와 원"
            />
            <figcaption>수정: images/checker-480.png</figcaption>
          </figure>
        </div>
      </section>
      <section>
        <h2>02 / 찌그러짐: fill과 자연 비율</h2>
        <div class="compare">
          <figure>
            <img
              class="frame fill"
              src="images/checker-480.png"
              width="480"
              height="320"
              alt="가로로 늘어난 원"
            />
            <figcaption>fill: 3:1 상자에 강제로 맞춤</figcaption>
          </figure>
          <figure>
            <img
              class="natural"
              src="images/checker-480.png"
              width="480"
              height="320"
              alt="원래 비율의 원"
            />
            <figcaption>width: 100%; height: auto;</figcaption>
          </figure>
        </div>
      </section>
      <section>
        <h2>03 / 잘림: cover와 contain</h2>
        <div class="compare">
          <figure>
            <img
              class="frame cover"
              src="images/checker-480.png"
              width="480"
              height="320"
              alt="상하가 잘린 격자 이미지"
            />
            <figcaption>cover: 상자를 채우며 상하 일부 잘림</figcaption>
          </figure>
          <figure>
            <img
              class="frame contain"
              src="images/checker-480.png"
              width="480"
              height="320"
              alt="여백이 생기지만 전체가 보이는 격자 이미지"
            />
            <figcaption>contain: 전체 표시, 좌우 여백</figcaption>
          </figure>
        </div>
      </section>
      <section>
        <h2>04 / 흐림: 저해상도와 반응형 후보</h2>
        <figure class="responsive-figure">
          <img
            class="responsive"
            src="images/checker-120.png"
            width="120"
            height="80"
            alt="최대 480 CSS px로 확대한 120픽셀 격자"
          />
          <figcaption>120px 원본을 최대 480 CSS px로 확대</figcaption>
        </figure>
        <figure class="responsive-figure">
          <img
            class="responsive"
            src="images/checker-480.png"
            srcset="
              images/checker-480.png   480w,
              images/checker-960.png   960w,
              images/checker-1440.png 1440w
            "
            sizes="(max-width: 512px) calc(100vw - 32px), 480px"
            width="480"
            height="320"
            alt="표시 크기와 화면 밀도에 따라 선택하는 격자 이미지"
          />
          <figcaption>동일 구도의 480·960·1440px 후보</figcaption>
        </figure>
      </section>
      <section>
        <h2>05 / 로딩 중 밀림: 비율 공간 예약</h2>
        <p>캐시를 끄고 느린 네트워크로 새로고침한 뒤 아래 문장의 위치를 관찰하세요.</p>
        <figure class="responsive-figure">
          <img
            class="responsive"
            src="images/checker-960.png"
            width="960"
            height="640"
            alt="크기 속성으로 비율 공간을 예약한 격자 이미지"
          />
          <figcaption>이 문장이 이미지 로딩 때문에 밀리는지 확인합니다.</figcaption>
        </figure>
        <p>
          비교 실험: DevTools에서 마지막 이미지의 width와 height 속성을 제거한 뒤
          Elements에서 저장하지 말고 HTML을 별도 복사하여 다시 로딩해 보세요.
        </p>
      </section>
    </main>
  </body>
</html>

`styles.css`

*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 1rem;
  color: #202020;
  background: #fff;
  font-family: system-ui, sans-serif;
  line-height: 1.7;
}
header,
main {
  max-width: 72rem;
  margin-inline: auto;
}
a {
  color: inherit;
  text-underline-offset: 0.2em;
}
a:focus-visible {
  outline: 2px solid #202020;
  outline-offset: 4px;
}
h1 {
  font-size: clamp(1.6rem, 4vw, 2.5rem);
  line-height: 1.3;
}
h2 {
  font-size: 1.3rem;
}
h3 {
  margin-top: 0;
  font-size: 1.1rem;
}
section {
  margin-block: 2.5rem;
}
figure {
  margin: 0;
}
figcaption {
  padding-block: 0.5rem 1rem;
  color: #444;
}
.compare {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}
.compare > figure {
  min-width: 0;
  padding-top: 1rem;
  border-top: 1px solid #777;
}
img {
  display: block;
  background: #ddd;
  color: #222;
}
.natural {
  width: 100%;
  height: auto;
}
.frame {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 1;
}
.fill {
  object-fit: fill;
}
.cover {
  object-fit: cover;
  object-position: center;
}
.contain {
  object-fit: contain;
}
.responsive-figure {
  width: 100%;
  max-width: 480px;
  margin-block: 1rem;
}
.responsive {
  width: 100%;
  height: auto;
}
@media (min-width: 48rem) {
  .compare {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

index.html 전체 코드 보기

styles.css

styles.css 전체 코드 보기

이 글이 도움이 되었나요?

조회 중

웹 퍼블리싱 학습 순서

학습 시작 · 첫 글부터 읽기 전체 학습 경로

필수 13개 · 전체 15개

읽음 기록 관리

전체 과정 목차 (15개)

새 글 받아보기

RSS 리더에서 BlogFlow의 새 글을 확인할 수 있습니다.

RSS 피드 구독하기

HTML CSS 이미지 문제 해결 실습: 경로·비율·잘림·흐림·CLS

1. 증상 대신 실제 현상을 먼저 분류하기

2. 작은 코드: 비율을 유지하는 기본 이미지

3. 표시되지 않으면 경로와 응답부터 확인하기

4. 찌그러짐과 잘림을 서로 다른 문제로 다루기

5. 흐림은 표시 픽셀 수와 후보 선택으로 진단하기

6. CLS: 로딩 전에 공간이 있는지 보기

7. 완료 기준

전체 코드: 두 파일로 완성하기

실습 파일

수정 전

`index.html`

`styles.css`

수정 방법

`index.html`

`styles.css`

수정 후

`index.html`

`styles.css`

새 글 받아보기

BlogFlow AI

무엇을 도와드릴까요?

댓글 남기기 응답 취소