background-image 와 image 태그의 차이

background-image와 <img> 태그는 웹에서 이미지를 표시하는 두 가지 주요 방법입니다. 각각의 차이점과 사용 용도를 정리해 드리겠습니다.

---

✅ 1. <img> 태그

<img> 태그는 HTML 요소로 직접 이미지를 삽입하는 방식입니다.

<img src="image.jpg" alt="설명">

🔹 특징

✔️ 이미지가 콘텐츠(content)로 취급됨
✔️ alt 속성을 사용하여 SEO 및 접근성(스크린리더 지원)에 유리함
✔️ 기본적으로 inline 요소이므로 텍스트와 함께 흐름을 가짐
✔️ 브라우저에서 자동으로 src 이미지 로드를 최적화

🔹 언제 사용해야 할까?

• 제품 이미지, 로고, 아이콘 등 중요한 콘텐츠인 경우
• SEO(검색엔진 최적화)를 고려해야 하는 경우
• 사용자가 직접 다운로드해야 하는 이미지인 경우

---

✅ 2. background-image (CSS)

CSS의 background-image 속성을 사용하여 특정 요소에 배경 이미지로 설정하는 방식입니다.

div {
    width: 300px;
    height: 200px;
    background-image: url('image.jpg');
    background-size: cover;
    background-position: center;
}

<div></div>

🔹 특징

✔️ 이미지가 스타일(장식 요소)로 취급됨
✔️ background-size, background-position, background-repeat 등의 속성을 통해 조정이 용이
✔️ img 태그와 달리 SEO 영향이 없음
✔️ HTML 구조를 깔끔하게 유지 가능

🔹 언제 사용해야 할까?

• 배경 장식(배경 패턴, 배너, 카드 배경)으로 사용할 경우
• 텍스트 위에 자연스럽게 오버레이할 배경이 필요할 경우
• 특정 화면 크기에서 반응형 이미지가 필요할 경우

---

✅ 3. <img> vs background-image 차이점 정리

비교 항목	<img> 태그	background-image
SEO 영향	있음 (alt 사용 가능)	없음
화면 크기 조정	브라우저가 기본적으로 조정	background-size로 조정
콘텐츠 vs 스타일	콘텐츠로 사용	스타일(장식) 요소로 사용
반응형 지원	width, height 직접 지정	background-size: cover; 사용 가능
클릭 이벤트	img 자체에 이벤트 가능	부모 요소에 click 이벤트 필요

---

✅ 결론: 언제 어떤 걸 써야 할까?

사용 사례	적절한 선택
상품 이미지, 로고	<img>
프로필 사진	<img> (아바타)
버튼 아이콘	<img>
배너, 카드 배경	background-image
패턴, 장식 이미지	background-image
텍스트 위 배경	background-image

💡 중요한 정보(콘텐츠)라면 <img>를 사용하고, 디자인적인 요소라면 background-image를 사용하세요!
추가로 궁금한 점이 있으면 말씀해주세요. 😊