Semantic Web, Semantic Tags

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

검색하지 않고 혼자 생각한 대답

• <div>태그의 background-image를 사용할 경우 css를 활용하여 <img>태그를 사용하는 것 보다 디테일한 수정을 할 수 있다.
• 로딩 과정에서 .html에서 불러오는 것과 .css에서 불러오는 것의 차이가 있을 것이다.

Semantic Web, Semantic Tags

Semantic Web이란?

웹 기술이 발전하면서 수많은 데이터들이 쌓였는데 그 중 무분별한 데이터를 구분하기 위해 등장했다.
의미있는 정보를 컴퓨터가 스스로 구분할 수 있도록 Semantic Web(의미론적인 웹)을 고안하였다.
시맨틱웹이란 웹에 존재하는 수많은 웹페이지들에 메타데이터를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 '의미'와 '관련성을'가지는 거대한 데이터베이스로 구축하고자 하는 발상이다.

Semantic Tag란?

컴퓨터가 웹 상의 데이터들을 의미가 있는 정보이지 색인하기 쉽게 만들어 Sementic Web을 조성할 수 있게 하는 태그이다.
브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 한다.
->웹사이트의 SEO(검색엔진최적화), 웹접근성, 유지보수성을 향상시킨다.

ex)
header, nav, footer, main, asdie, article, section 등

Semantic Web 관점에서 <img>태그와 <div>의 background-image 속성의 차이점

<img>태그의 경우 semantic tag이며, 'alt'등의 태그를 사용하여 보다 더 콘텐츠를 명확하게 한다. 이용자들은 이미지를 의미있는 정보로 찾고 사용할 때 유용하다. 반면 css의 background-image는 콘텐츠를 담을 수 없어, 정보의 관련성이나 콘텐츠가 필요하지 않고, 이미지의 미적 부분이 강조될 때 유용하다.

이외에 퍼포먼스 관점에서 볼때 css에서 배경으로 큰 이미지를 로드하면 구문 분석하는데 시간이 더 오래 걸리기 때문에 HTML에서 <img>태그를 사용하는 것이 속도를 높일 수 있다고 한다.

검색하기 전 생각한 대답의 피드백도 충분히 된 것 같다.