사이트에 이미지를 넣는 방법은 두 가지가 있다.
1. <img> 태그 사용하는 것
2. background-image 속성을 추가하는 것
위 두 가지 방법 모두 이미지를 불러오는 방법이지만 차이점이 있다.
이미지 로드가 실패했을 상황을 통해 두 경우의 차이점과 용도를 확연히 알 수 있다.
🌱 <img> 태그 사용하는 방법
<img>태그는 이미지 설명을 포함할 수 있는 alt 속성을 가지고 있어서 이미지 로드 실패시 해당 텍스트를 나타낸다.- 시맨틱 요소로서 검색 엔진에 노출된다.
🌱 background-image 속성을 추가하는 방법
- 이미지 로드 실패 시 말그대로 이미지 로딩만 실패한다.
- 그저
디자인적인 이유로만 사용한 이미지이기 때문에 검색을 통해 노출 되지 않는다.
(아이콘, 페이지의 cover 이미지로 주로 사용된다)
Semantic Web, Semantic Tags
시맨틱 요소로 구성되어 있는 웹페이지는 검색엔진에 보다 의미론적으로 문서 정보를 전달할 수 있고 검색엔진 또한 시맨틱 요소를 이용하여 보다 효과적인 크롤링과 인덱싱이 가능해졌다.
즉, 시맨틱 태그란 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 한다. 시맨틱 태그에 의해 컴퓨터가 HTML 요소의 의미를 보다 명확히 해석하고 그 데이터를 활용할 수 있는 시맨틱 웹이 실현될 수 있다.
결론적으로 시맨틱 웹이란, 웹에 존재하는 수많은 웹페이지들에 메타데이터(Metadata)를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 ‘의미’와 ‘관련성’을 가지는 거대한 데이터베이스로 구축하고자 하는 발상이다.
📌 컨텐츠로서 설명이 필요하다면 img 태그를 사용하고 아니라면 background image를 사용할 것
