이미지 태그와 배경화면 이미지 넣기 차이 img Tag vs Div(Background img)

1

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. 사람들이 페이지를 인쇄 할 수 있고 이미지가 기본적으로 포함되기를 원하지 않는 경우

참고자료
when you use to Img tag

profile
문과생 개발자되다

0개의 댓글