<img />와 background-image의 차이

사이트에 이미지를 삽입하는 방법은 2가지가 있다.

1. <img> 태그
2. background-image property

이 두가지 방법의 차이점은

1. <img> 태그

   • 컨텐츠의 일부로, alt 속성을 가질 수 있다.
   • 사용자가 페이지를 인쇄할때, 사진도 포함되어 인쇄됨
   • 구글 검색시에 이미지로 검색된다.

2. background-image property

   • 단순히 시각적인 요소로 넣는 기능
   • 사용자가 페이지를 인쇄할 때, 인쇄되지 않음

사용 기준

1. <img> 태그

   • 이미지를 컨테츠의 일환일 때
   • 이미지가 구글 검색시, 뜨게 하고 싶을 때

2. background-image property

   • 이미지가 단순히 디자인적인 요소일 때
   • 웹페이지의 화면을 이미지로 꽉 채울 때