본문으로 바로 가기

퍼블리싱 연습실

이미지 문제를 다섯 가지로 나누기

원은 비율을, 가장자리 선은 잘림을, 격자는 선명도를 확인하는 기준입니다.

01 / 표시되지 않음: 경로 비교

왼쪽은 일부러 틀린 경로입니다. 오른쪽과 src를 비교하세요.

의도한 경로 오류: 이미지를 불러오지 못했습니다 — 오류 재현: 존재하지 않는 파일

정상 경로의 격자와 원 — 수정: images/checker-480.png

02 / 찌그러짐: fill과 자연 비율

가로로 늘어난 원 — fill: 3:1 상자에 강제로 맞춤

원래 비율의 원 — width: 100%; height: auto;

03 / 잘림: cover와 contain

상하가 잘린 격자 이미지 — cover: 상자를 채우며 상하 일부 잘림

여백이 생기지만 전체가 보이는 격자 이미지 — contain: 전체 표시, 좌우 여백

04 / 흐림: 저해상도와 반응형 후보

최대 480 CSS px로 확대한 120픽셀 격자 — 120px 원본을 최대 480 CSS px로 확대

표시 크기와 화면 밀도에 따라 선택하는 격자 이미지 — 동일 구도의 480·960·1440px 후보

05 / 로딩 중 밀림: 비율 공간 예약

캐시를 끄고 느린 네트워크로 새로고침한 뒤 아래 문장의 위치를 관찰하세요.

크기 속성으로 비율 공간을 예약한 격자 이미지 — 이 문장이 이미지 로딩 때문에 밀리는지 확인합니다.

비교 실험: DevTools에서 마지막 이미지의 width와 height 속성을 제거한 뒤 Elements에서 저장하지 말고 HTML을 별도 복사하여 다시 로딩해 보세요.