🎨 이미지와 배경 이미지 처리 – object-fit, background-*

🎨 이미지와 배경 이미지 처리 – object-fit, background-*

이미지는 콘텐츠와 디자인 모두에서 중요한 역할을 합니다. 이 글에서는 HTML 이미지 태그(<img>)와 CSS 배경 이미지를 각각 어떻게 적절히 배치하고 크기 조절할 수 있는지, 그 차이점과 핵심 속성들을 정리합니다.

---

1️⃣ <img> 태그 vs background-image

구분	<img> 태그	background-image
용도	콘텐츠 이미지 (의미 있음)	디자인용 이미지 (의미 없음)
접근성	alt 속성 필수	화면 리더가 읽지 않음
조절 방식	object-fit	background-*

---

2️⃣ object-fit – <img> 태그용 이미지 비율 조절

img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

값	설명
fill	비율 무시하고 꽉 채움
contain	비율 유지, 전체 보여줌 (빈 공간 발생 가능)
cover	비율 유지, 요소를 꽉 채움 (잘릴 수 있음)
none	원본 사이즈 그대로
scale-down	none or contain 중 작은 쪽

실전 팁: 썸네일, 카드 UI에서는 object-fit: cover가 자주 사용됩니다.

---

3️⃣ background-image – 박스 배경 이미지 처리

.box {
  background-image: url('image.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

• background-size: 이미지 크기 설정
• background-position: 이미지 위치 설정
• background-repeat: 반복 여부

background-size 값

값	설명
cover	비율 유지하며 박스를 꽉 채움
contain	전체 이미지 보이되 여백 발생 가능
auto	원본 이미지 크기

---

4️⃣ 이미지 비율 깨짐 방지

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

👉 height를 auto로 두면 원본 비율을 유지합니다.

---

5️⃣ 반응형 이미지 카드 예제

.card-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

aspect-ratio 속성을 사용하면 비율을 쉽게 고정할 수 있습니다.

---

📌 정리

• <img>: 콘텐츠 이미지 → object-fit 사용
• background-image: 디자인용 배경 → background-size / position
• cover는 꽉 채우기, contain은 전체 보기
• 비율 유지: object-fit: cover, aspect-ratio 조합

---

📌 다음 글 예고

다음 글: “커스텀 체크박스/라디오 버튼 만들기 – 실전 CSS 예제”에서는 기본 input 요소를 감추고 시각적으로 꾸미는 방법을 알려드립니다.