<img>태그와 css background:url()차이

img태그와  CSS: background-image: url()의차이는뭘까?

두개를 반복해서 쓰다보니 쓰임새가 다를것같아 검색해보았다. 

이미지첨부에도 여러경우가 있지만 크게 나누자면 콘텐츠의 기능인지, 심미적인 기능인지로 태그를 쓰는 용도를 구분할 수있다.

 

<img>

1.  검색엔진에서 이미지를 인덱싱해야하는 경우
2. 콘텐츠의 의미가 큰 경우
   • 기능적디자인(카드,썸네일,프로필이미지, 클릭할수있는것) vs 사이트에 주로 사용되는 미적인 디자인 여부를 판단하여 전자일때
3. 프린트필요한 경우
   • 백그라운드 이미지는 출력시 포함안된다

 

background- image: url()

 

1. 디자인에만 사용되는 이미지, 콘텐츠와 관련없는 경우
2. 이미지 위에 마우스를 올려놓았을 때 이미지를 변경하고 싶을 때. (hover)
3. 반복되는 이미지일때 -ex 아이콘
4. 배경전체를 확대해 보여줄 필요가있는 경우
   1. background-size 등 속성을 사용해 간단하게 조작가능하다.

Ref.

https://stackoverflow.com/questions/492809/when-to-use-img-vs-css-background-image

When to use IMG vs. CSS background-image?

 

 

개인적으로 공부한 내용을 정리한글입니다.