Html에서 img를 삽입 하는 방식에는 img태그를 이용하는 방법 과 css background img를 이용하는 방법이 있다. 그렇다면,
<img>
tag를 사용하는 것과<div>
태그에 background-img 삽입하는 방법 어떠한 차이가 있을 까?
여러차이가 있겠
<img>
태그를 사용해서 이미지를 넣는 경우:
1. 검색 엔진에서 이미지를 색인화해야 할 때 사용한다.(When you want to be indexed by the search engine.)
2. 디자인과 관련이 없고 사람들이 페이지를 인쇄하기를 원할때 사용한다.
3. 이미지의 의미론적인 의미가 있는 경우 (ex:경고 아이콘)에 사용한다. Semantic Tag와 연관이 있는데, <img>
태그를 사용하면 모든 사용자에게 의미를 전달을 쉽게 할 수 있다.
<div>
태그에 CSS에서 background-image 속성으로 이미지를 넣어주는 경우:
1. 검색 결과에 큰 역할이 필요 없고, 콘텐츠와 연관성이 적을 때
2. 이미지가 디자인에 사용될 때(예: 댓글 작성자 아이콘 등이 반복)
3. 이미지의 일부만 보이는 등의 효과를 주거나, 이미지를 반복해야 하는 경우
4. 사람들이 페이지를 인쇄 할 수 있고 이미지가 기본적으로 포함되기를 원하지 않는 경우