html <img> vs css {background-image}(img태그와 백그라운드 이미지 비교)

 두 가지 방법을 활용하여 이미지를 원하는 위치에 구성하면 결과적으로 똑같은 효과를 얻어낼 수 있다. 그러면 둘을 결정하는 기준은 무엇일까?

 

 답은 html과 css의 기본에 있다. html 태그들은 웹 페이지를 구성하는 작은 부분들이다. 따라서, 사용할 이미지가 컨텐츠로 의미를 갖는다면 img태그를 사용하면 된다. 그것이 아니라 디자인적인 필요에 의해 background-image로 사용하면 될 것이다. 

 

 프론트엔드 개발 중에 위와 같은 대체 기능이 보이고 고르는 것이 헷갈릴 수 있다. html은 컨텐츠를 구성하는 부분이고 css는 디자인적인 요소임을 인지하면 쉽게 구분해서 사용할 수 있을 것이다.