WEB LAB
    HTML/CSS 4.3 · 4부. 반응형과 움직임

    반응형 이미지

    그림이 넘치지 않게 하고, 자리를 정해 채웁니다.

    예상 학습 시간 15분 예제를 고치면 화면이 그대로 다시 그려집니다 난이도 초급
    개념 설명

    그림은 그냥 두면 넘칩니다

    글은 화면이 좁아지면 줄이 바뀝니다. 그림은 그러지 않습니다. 800px 짜리 그림은 320px 화면에서도 800px 을 차지해 화면 전체를 가로로 밀어냅니다.

    이 단원의 첫 규칙 하나가 그것을 막습니다.

    최소 예제 · 편집 가능

    넘치지 않게 하기

    <div class="narrow">
  <p>아래 그림은 상자보다 큽니다</p>
  <img class="fit" src="/learn/htmlcss/sample-logo.png" alt="보기 그림">
</div>
    .narrow {
  width: 200px;
  border: 1px dashed #999;
  padding: 8px;
}

/* 이 두 줄이 반응형 이미지의 전부입니다.
   max-width 를 지우고 다시 그려 보십시오. */
.fit {
  max-width: 100%;
  height: auto;
}
    줄하는 일
    max-width: 100%부모보다 커지지 않습니다. 작은 그림을 억지로 늘리지도 않습니다.
    height: auto너비가 줄어든 만큼 높이도 줄어 비율이 유지됩니다.

    width: 100% 가 아니라 max-width: 100% 입니다. 앞엣것은 작은 그림도 부모 폭까지 늘려 흐릿하게 만듭니다.

    많은 사이트가 이것을 모든 그림에 한 번에 지정해 둡니다.

    style.css 맨 위에 
    img { max-width: 100%; height: auto; }
    최소 예제 · 편집 가능

    자리를 정해 놓고 채우기

    목록의 그림은 크기가 제각각이라 카드 높이가 들쭉날쭉해집니다. aspect-ratio 로 자리를 정하고 object-fit 으로 채웁니다. 

    <div class="cards">
  <article>
    <img class="thumb" src="/learn/htmlcss/sample-logo.png" alt="">
    <p>첫째 항목</p>
  </article>
  <article>
    <img class="thumb" src="/learn/htmlcss/sample-logo.png" alt="">
    <p>둘째 항목</p>
  </article>
</div>
    .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.thumb {
  width: 100%;
  /* 그림이 무엇이든 이 비율의 자리를 차지합니다 */
  aspect-ratio: 16 / 9;
  /* 자리를 가득 채우고 넘치는 부분은 잘라 냅니다 */
  object-fit: cover;
  border-radius: 6px;
  background: #f1f3f5;
}

.cards p { margin: 6px 0 0; }
    값결과
    cover자리를 가득 채우고 넘치는 부분을 잘라 냅니다. 목록 그림에 씁니다.
    contain잘리지 않게 안에 다 넣습니다. 남는 자리가 생깁니다.
    fill비율을 무시하고 늘립니다. 그림이 찌그러집니다.
    상세 사용법

    크기를 미리 알려 두기

    img 에 width 와 height 속성을 적어 두면 브라우저가 그림을 받기 전에 자리를 잡아 둡니다. 그림이 도착할 때 화면이 덜컥 밀리는 일이 없어집니다.

    index.html 
    <img src="photo.jpg" alt="안내 사진"
     width="800" height="450"
     loading="lazy">
    • 속성의 숫자는 비율을 알리는 값입니다. CSS 의 max-width: 100% 가 실제 크기를 정합니다.
    • loading="lazy" 는 화면에 들어올 때 받게 합니다. 목록의 그림에 유용합니다.
    • 첫 화면에 바로 보이는 그림에는 lazy 를 쓰지 마십시오. 오히려 늦게 나옵니다.
    흔한 실수

    세 가지

    • width: 100% 를 씁니다. 작은 그림까지 늘려 흐릿해집니다. max-width: 100% 가 맞습니다.
    • height: auto 를 빠뜨립니다. 너비만 줄어들고 높이는 그대로라 그림이 찌그러집니다.
    • 그림 크기를 CSS 로만 줄입니다. 화면에 200px 로 보여도 받는 것은 2000px 그대로입니다. 큰 그림은 미리 알맞은 크기로 줄여 두십시오.
    실습 문제

    직접 해보기

    1. 정사각 목록 그림 난이도 중

    목록의 그림을 정사각형 자리에 넣고, 비율이 다른 그림도 찌그러지지 않게 채우십시오.

    정사각형은 1 / 1 입니다. 찌그러지지 않으면서 채우는 값이 있습니다.
    .thumb { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
    요약

    정리

    • img { max-width: 100%; height: auto; } 가 기본입니다.
    • aspect-ratio 로 자리를 정하고 object-fit: cover 로 채웁니다.
    • width·height 속성을 적으면 화면이 덜컥 밀리지 않습니다.
    • CSS 로 줄여도 받는 파일 크기는 그대로입니다.