<img> 태그 | css background-image 속성

🧐 사이트에 이미지를 넣는 2가지 방법

1. img src=""

<img src=""png/scroll1.png alt="">

img 태그는 Semantic tags의 일종으로 볼 수 있다.
이는 단순한 이미지가 아닌, 페이지 구성에 필요한 이미지일 경우 이 태그를 사용하여야 한다.

2. background-image

background-image: url("png/scroll2.png");

background-image 속성은 페이지 구성에 필요하지 않는 단순 이미지일 경우 사용하기 좋다.

🧐 2가지 방법의 차이점

👉 이미지 로딩이 실패했을 경우, img 태그는 alt="메세지" 로 alt의 메세지를 출력하여준다. but, background-image는 대체물이 없다.

👉 img 태그는 검색 시 노출이 되지만, background-image는 검색 시 노출이 되지 않는다.

🧐 각각의 사용 경우

👉 img tag

• 웹 페이지의 성능을 높이고자 할 경우
• 검색 시 엔진에 노출을 허용할 경우
• 페이지를 인쇄했을 때 이미지가 기본적으로 포함이 되어야 하는 경우

👉 background-image

• 순전히 디자인적인 요소로만 사용할 경우
• 페이지를 인쇄했을 때 이미지가 포함되지 않아도 되는 경우