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

1. Semantic이란?

: 의미의, 의미론적인

웹이 발전하면서 수많은 정보가 축적됨에 따라 컴퓨터가 스스로 정보를 해석, 가공할 수 없어 모든 정보를 사용자가 직접 개입해서 처리해야 되는 문제점이 생겼다.
이를 해결하기 위해, 기계가 읽고 처리할 수 있는 Semantic Web이 탄생하였다.

✅ Semantic Tag : 의미를 담고 있는 tag. 단순히 구역을 나누기 위한 div 등과 달리, 해당 부분의 내용이 무엇인지 태그명 만으로 알 수 있도록 만든 것.

✅ Semantic Web : 의미를 담고 있는 Semantic Tag로 이루어진 Web

2. Semantic Tag의 적용 사례

💡<img>와 {background-image}의 차이

이미지를 삽입하는 방법은 크게 2가지가 있다. 두 방식의 특징과 차이점을 살펴보자.

1) HTML <img>태그 활용

<img src="https://www.w3schools.com/whatis/img_js.png" alt="javascript">

✅ 특징

• 'alt="대체메세지"' 속성을 가진다
  ➪ 이미지의 meta 정보가 되며, 검색엔진에 노출된다.
  ➪ 이미지 로딩 실패시, 대체 메세지가 표출된다.
• 태그명만으로 콘텐츠 내용을 알 수 있다.
• 페이지 로드가 빨라 성능면에서 좋다.

2) CSS background-image 속성 활용

<div class="bg-img"></div>

.bg-img {
  width: 344px;
  height: 390px;
  background-image: url("https://www.w3schools.com/whatis/img_js.png");
  background-size: 100%;
}

✅ 특징

• 단순한 이미지 첨부일 뿐, 어떠한 정보도 담지 않는다.
• 순수 디자인을 위한 경우 주로 사용한다.
• 이미지가 콘텐츠와 관련이 없을 경우 사용한다.
  
  

📌 결론

<img> 태그는 '이미지'라는 의미를 가진 Semantic tag이며, alt 속성을 삽입해 검색엔진에 웹을 노출시킨다. 하지만 {background-image} 는 태그가 아닌 스타일의 속성이기 때문에 '이미지'라는 의미를 가지지 못하고 검색엔진이 인식하지 못한다. 또한 성능면에서도 <img>태그가 더 유용하다. 하지만, 오로지 디자인의 요소로 이미지를 삽입할 경우, {background-image}를 이용할 수 있다.

✅ 검색을 통해 정보를 제공, 노출해야할 경우 : <img>태그 사용

✅ 웹 사이트를 꾸미기 위한 장식, 디자인의 요소로 사용할 경우 : {background-image} 속성 사용