[HTML&CSS] <img>와 {background-image}의 차이

난나다·2022년 6월 20일
0

HTML & CSS

목록 보기
3/4

공통점

두 방법 다 웹 페이지에 이미지를 호출하는 방식입니다.


차이점

검색 시 노출 여부

웹 페이지에 검색했을 때 HTML의 시멘틱 태그인 <img> 의 경우 검색 엔진에 노출되어집니다.
그러나 CSS의 속성인 {background-image} 는 순수 디자인적 요소로서만 동작하기 때문에 검색 엔진에 노출되지 않습니다.


사용

<img>

해당 이미지를 검색 엔진에 노출시키고자 한다면(이미지를 사용하는 것이 사용자가 컨텐츠를 이해하는데 도움을 준다면) 사용합니다.

{background-image}

대체로 아이콘, 페이지의 cover 이미지 등 순수 디자인적 목적을 가지거나 컨텐츠를 이해와 연관성이 없다면 사용합니다.



참고
https://velog.io/@skyosk123/img-vs-background-image
https://daco2020.tistory.com/m/54

0개의 댓글