[HTML/CSS]<img>와 <div>의 차이

💁‍♂️질문

"사이트에 이미지를 넣는 방법은 두 가지가 있습니다. img 태그를 사용하는 것과 div 태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."

HTML에서 img 태그를 사용하는 방법 VS CSS에서 background-image를 사용하는 방법
두 방법의 차이점은 alt 속성의 유무!!

<img src = "이미지 경로" alt="이미지에 대한 설명 (코멘트)">

img 태그는 alt 속성 즉, 이미지에 대한 설명을 기본적으로 가지고 있고 alt 속성은 img 태그에서 사용되는 이미지 로드가 실패할 경우 broken image와 함께 alt 텍스트를 작성했다면 텍스트의 내용이 함께 보인다.

div태그를 이용한 background-image에 넣은 이미지가 에러가 나면 아무것도 나타낼 수 없다. background-image은 alt 속성이 없기 때문에 설명이 불가능하다. broken image도 나타나지 않아 결과적으로 이미지를 넣지 않은 것처럼 된다.

img 태그: semantic 태그 즉, '이미지'라는 의미를 가진 코드
-> alt속성을 이용하여 컨텐츠의 이해를 도울 수 있음

div 태그 : background-image는 non-semantic 태그를 사용했기 때문에 아무런 의미를 가지고 있지 않다.
->부가설명이 필요없다면 사용가능