[HTML, CSS] img? background-image는 언제 써야할까

html, css에서는 image를 다룰 수 있는 방법이 많지만 그 중 가장 많이 쓰이는 img, background-image를 언제 사용해야할지 구분이 잘 되지 않았습니다. 

 

HTML - img

<img srcset="images/rabbit_500.png 500w,
        images/rabbit_300.png 300w, 
        images/rabbit_150.png 150w" 
    sizes="(min-width:960px) 500px, 
        (min-width:640px) 300px, 900px" 
    src="images/rabbit_150.png" 
    alt="rabbit">

CSS - background-imgae 

background-image: url(images/background.gif);

 

<img>는 내가 표현하고 싶은 컨텐츠인 경우에 넣고 background-image는 단순히 데코레이션, 꾸미는 용도의 이미지 삽입일 때 활용한다. 

 

예를 들어, 프로필 사진은 내가 표현하고 싶은 (전달하고 싶은) 컨텐츠임으로 img를 활용하고 

배경사진은 전달하는 용도가 아니기에 background-image: url을 활용한다.