img 태그와 background-image의 차이

웹페이지에 이미지를 나타내는 방법 ✨

① img 태그를 이용한 방법

<img src="이미지경로" alt="대체텍스트">

② Background-image 속성 이용한 방법

.class{
background-image:url(이미지경로);
}

웹 페이지에 이미지를 나타내는 방법에는 대표적으로 이렇게 두가지가 있죠.
이 두 방법에는 어떤 차이가 있을까요?

🌷 <img태그>

👉 img태그는 이미지에 오류가 있을경우 broken img 아이콘과 대체 텍스트가 나타납니다.

👉 img 태그는 alt 속성을 이용해 이미지의 대체텍스트를 입력해 스크린리더 또는 검색엔진이 이미지라는 정보를 인식할 수 있습니다.
👉 컨텐츠의 이해에 도움이 되는 이미지의 경우 img태그를 이용합니다.

👉 img태그는 출력시 포함됩니다.

🌷 Background-image

👉 background-image는 이미지가 표시되지 않을 뿐, 대체 텍스트나 아이콘이 따로 표시되지 않습니다.
👉 background-image는 스크린리더나 검색엔진에 수집되지 않고, 출력시 포함되지 않아 컨텐츠의 배경에 적합합니다.
👉 이미지보다 컨텐츠가 넓은 경우 반복되는 것이 기본값이고, 따로 크기를 지정해줄 수 있습니다.