background-image 는 말 그대로 배경이 되는 이미지를 설정할 때 사용하고, <img> 태그는 이미지 콘텐츠를 화면에 보여주고 싶을 때 사용합니다.배경을 그리는 특징 때문에
background-image는 같은 이미지를 반복적으로 보여주는 기본적인 속성을 가지고 있으며, 이미지의 특정 부위만 잘라서 보여주는 여러가지 기능을 가지고 있습니다.하지만 css 속성이 이미지로써의 시멘틱한 '의미'를 지니고 있는 것은 아닙니다. 때문에 브라우저에게 이미지를 사용했다는 것을 알려주기 위해서는 img 태그를 사용해야 합니다.
또한 사용자의 반응에 따라 이미지를 동적으로 변경해주어야 할 경우 img 태그를 사용해야합니다. 물론 자바스크립트로 요소의 css 속성을 변경하여 url 주소를 바꾸는 것으로 이미지를 교체할 수도 있으나 불가피한 경우가 아니라면 스타일을 바꾸는 기능은 온전히 css 에게만 주도록 합시다. 협업에서의 혼란을 방지할 수 있습니다.
단순 util 기능? , icon 같은 것에서는 background-image를 사용한다고도 하는데 이런 경우에도 img 태그를 이용해야 할까요?
<img class="a b" src="//img.ridicdn.net/cover/1160000035/large#1" alt="생활코딩! React 리액트 프로그래밍">
public한 source에 경우 img, static files의 경우에는background-image
단순 아이콘은 background-image 로 합니다 🙂