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

Semantic Web 이란?

semantic : 의미의, 의미론적인
"의미론적인 웹" 이라는 뜻으로, 컴퓨터가 스스로 이해할 수 있는 형태로 제작된 웹을 말한다.

기존의 잡다한 데이터 집합에서 메타데이터(metadata)를 부여하여 의미와 관련성을 갖는 거대한 데이터베이스가 만들어지는 것이다.

또한, 메타데이터가 되기 위해서는 semantic tag가 필요하다.

Semantic Tag 란?

사람과 컴퓨터가 이해할 수 있는 형태, 활용하기 좋은 형태의 데이터로 웹을 발전시키기 위해 나온 tag다.
HTML5 언어에 익숙하지 않은 사람이 봐도 무슨 의미의 tag인지 이해할 수 있다.

또한, 검색 엔진에 노출되기 위해서는 검색 키워드에 대응하는 인덱스가 존재해야하는데, 이러한 인덱스를 수집하는 기준이 바로 HTML의 semantic tag들이다.
=> 효과적인 검색이 가능하게 한다.

HTML의 수많은 tag들중, img, header, main, body, footer 등이 바로 semantic tag들이다.

사이트에 img를 넣는 두가지 방법

1) img tag 사용

<img alt="HTML" height="280" width="180" src="https://XXX">

• 컨텐츠 정보와 관련있는 이미지를 사용할 때
• 경고 아이콘과 같은 중요한 의미가 내포되어 있을 때
• 프린트시 배경 이미지가 같이 나오게 할 때

2) <div> + background-image 사용

// html
<div class="bg-img">배경이미지</div>

// CSS
.bg-img {
  background-color: yellow;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1280px-HTML5_logo_and_wordmark.svg.png");
  height: 300px;
  }

컴퓨터는 어떤 의미를 가진지 알 수 없다.

• 이미지에 컨텐츠가 포함되어있지 않을 때
• 오직 웹 문서의 배경을 채우기 위함일 때
• 프린트시 배경 이미지가 안나와도 될 때

결론
어떤 이미지인지 정보가 포함되어야 있어야 하거나 검색엔진에 노출이 되고 싶다면 img tag 를 사용하고
아무런 정보가 필요없는 단순히 디자인적인 요소로만 사용한다면 background-image 를 사용하자!

참고1
참고2
참고3