img vs div

이재현·2021년 6월 8일

"사이트에 이미지를 넣는 방법은 두 가지가 있습니다. <img> 태그를 사용하는 것과 <div> 태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."

img태그는 보았을 때, 해당 코드의 목적을 특정하기 쉬운 반면, div태그를 보았을 때는 이미지를 나타낼 부분인지, 텍스트를 나타낼 부분인지 특정하기 어렵습니다. 이 때 둘중 img태그를 이용하는 방식을 Semantic 프로그래밍 방식이라고 할 수 있겠습니다.

해당 이미지가 Content와 연관이 있을 때

해당 이미지가 Search Engine에 index되길 원할 때

alt 태그를 사용 할 수 있음.

CSS방식 대비 Delay가 적다.

Lazy loading의 이점을 누릴 수 있다.

SEO 측면에서 최적화 된 페이지를 원할 때

해당 이미지가 단지, 순수하게 디자인을 위한 배경이미지일 때

해당 이미지가 Content의 일부분이 아닌 때

CSS Sprites를 이용, 작은 이미지들의 작업속도 향상을 위할 때

해당 이미지가 Default 상태에서 인쇄되지 않기를 원할 때

해당 이미지가 단순히 배경에서 반복되기를 원할 때 * -> Picture

항상 생각하는 개발자