<img> 태그 vs <div> 태그에 background-image 속성을 추가

Semantic Web

• 의미론적인 웹: 기계가 이해할 수 있는 형태로 제작된 웹을 의미
• 웹페이지를 의미와 관련성을 가지는 거대한 데이터 베이스로 구축하고자 하는 발상
• 검색엔진에 사이트가 포함되어 노출되게 하는 것이 중요하다. (아니면 죽은 사이트나 다름이 없다.) -> 검색엔진이 해석할 수 있게 하기위해서는 Semantic Web 이여야하고 Semantic Web의 기초는 Semantic Tag 이다.

Semantic Tag

• HTML5에 도입된 시맨틱 태그는 개발자와 브라우저에게 의미있는 태그를 제공

• 시맨틱 태그에 의해 컴퓨터가 HTML 요소의 의미를 보다 명확히 해석하고 그 데이터를 활용할 수 있는 시맨틱 웹이 실현

• 예시)
  div, span -> non-semantic 태그
  header, main, nav, article -> semantic 태그

결론

검색엔진에도 잘 반영이 되고 다른 개발자가 보기에도 쉽도록 최대한 Semantic Tag로 작성하여 최대한 Semantic Web이 되도록 하자!

img 태그

사용

• 의미가 내포된 이미지일 때
• 이미지가 보이지 않으면 alt로 그 정보를 대신할 수 있다.

특징

• width와 height를 지정하지 않으면 원본 크기로 보인다.
• width 또는 height 하나만 지정하면 비율이 맞춰 다른 속성이 자동으로 생성되어 비율이 유지된다.
• 태그 자체 속성에서 width와 height를 지정할 수 있다.
• 이미지가 어떠한 이유로 보일 수 없으면 al에 적힌 내용이 화면상에 나타나고 이미지가 로드되지 않음을 보여준다.

<div> 태그 + background-image 속성

• 페이지 프린트시 이미지가 나오지 않게 할 때
• 배경을 채우는 용도로 사용할 때
• 단순히 디자인(꾸미는)을 위한 용도일때

  특징

• div 태그이기 때문에 크기를 width와 height를 지정하지 않으면 width와:0; height:0; 이다. 그렇기 때문에 크기를 주지 않으면 아예 보이지않는다.
• 비율을 유지하기 위해서는 background-size: 100%; 라는 속성을 포함해야한다.
• height 를 지정해주지 않으면 아예 이미지가 보이지 않는다.
• width 를 주지 않으면 background-size: 100%;를 주더라도 비율이 유지 되지 않고 가로는 다보이지만 세로가 짤린 이미지가 보이게 된다.
• 이미지가 어떠한 이유로 보여줄 수 없는 상태가 되면 화면상에는 아무표시가 나지 않는다.