Q. "웹사이트에 이미지를 넣는 방법은 두 가지가 있습니다. HTML의 <img> 태그를 사용하는 것과 CSS를 통해 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."
위의 질문은 실제 면접에서 자주 다루는 질문이다.
결론부터 말하자면 사용하려는 이미지가 컨텐츠 흐름에 중요하다면
<img>태그를 사용하고, 그렇지 않고 단순히 디자인적인 요소라면 CSS를 통해 background-image 속성을 추가하는 것이 Semantic web에 더 가깝다.
<img> 태그와 background-image 속성 모두 이미지 파일을 각각 src 속성과 url을 통해 불러온다.
<img> 태그는 다음과 같이 src 속성과 더불어 alt 속성을 통해 이미지 파일에 대한 설명과 더불어 error로 이미지 파일이 나타나지 않았을 때 나타낼 텍스트를 동시에 포함할 수 있다. 이미지 설명에 대한 텍스트가 포함되기 때문에 브라우저가 해당 이미지를 alt 속성값으로 넣은 텍스트로 더 잘 이해할 수 있게 된다.
<img src="https://heropy.blog/css/images/vendor_icons/html5.png" alt="html_img" />
하지만 background-image 속성은 다음과 같이 url을 통해 이미지 파일만 넣을 수 있을 뿐 alt 속성과 같이 설명을 포함하지 않는다. 그렇기에 error 시에 broken image는 물론 어떠한 텍스트를 노출시키지 않는다.
그러나 넣으려고 한 이미지가 컨텐츠 흐름에 중요하지 않고 오히려 디자인적 요소로 넣으려고 했다면 error가 났을 때 broken image가 나오는 것보다 아예 아무것도 나오지 않는 것이 컨텐츠 흐름상 자연스러울 수 있다.
selector{
background-image: url(https://heropy.blog/css/images/vendor_icons/html5.png);
}참고링크
https://mygumi.tistory.com/369
https://blog.px-lab.com/html-img-tag-vs-css-background-image/
