목표: Semantic tag를 좀 더 깊게 공부해 보자.

1. 가정

🙌 <img> 를 사용하는 것과 <div> 에 background-image 속성을 추가하는 것. 두 가지 방법은 차이가 존재한다. 이를 좀 더 시각적으로 알아보기 위해 공부해보자.

2. 시맨틱 태그를 쓰는 이유

우리가 태그를 쓰는 이유를 알아보기 전에 시맨틱 태그는 왜 쓰는지 알아보자.그 이유는 매우 단순하다.

• 접근성 용이함

시맨틱 태그로 작성된 웹은 우리가 코드를 보기가 참 용이하다.

• 검색 엔진 최적화

우리가 만드는 웹사이트는 기본적으로 노출에 용이해야한다. 따라서 크롤링이나 색인이 가능해야한다.

3. <img> vs background-img

태그를 사용하는게 좋은 경우에는

1. background-img 는 출력이 안됨
2. img 는 있지만, background-img 는 alt 태그가 없음
3. img 가 중요한 비율을 차지하는 웹 페이지인 경우

백그라운드 이미지 속성을 사용하는게 좋은 경우에는

1. 순수 장식 이미지 배경으로 사용하는 경우에만 작성

3. 맥락 정리

브라우저는 합리적으로 일을 하는 엔진이다. 우리는 이들을 나쁘다고 생각할 것이 아니라 좀 더 상황에 적합한 것을 찾는 것이 중요하다.

Semantic Web을 구현하기 위해서 우리는 Semantic tag를 작성해야할 것이고 이를 통해 우리에게 많은 이점을 제공해준다.

순수 장식 이미지를 배경으로 사용하는 경우: background-img
그 외에 Semantic Tag로서 검색 최적화에 용이하고 착한 태그: <img>