질문

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

답변

• HTML에서 img 태그를 사용하는 방법
• CSS에서 background-image를 사용하는 방법

두 방법의 차이점은 alt 속성의 유무이다.

아래 코드는 일반적인 img 태그 사용 방법이다.

<img src = "이미지 경로" alt="이미지에 대한 설명 (코멘트)">

img 태그는 alt 속성 즉, 이미지에 대한 설명을 기본적으로 가지고 있다.
이 alt 속성은 img 태그에서 사용되는 이미지 로드가 실패할 경우 broken image와 함께 alt 텍스트를 작성했다면 텍스트의 내용이 함께 보인다. 그러므로 에러난 이미지가 무엇을 나타내려고 했는지 알 수 있다.

하지만 background-image에 넣은 이미지가 에러가 나면 아무것도 나타낼 수 없다. background-image은 alt 속성이 없기 때문에 설명이 불가능하다. broken image도 나타나지 않아 결과적으로 이미지를 넣지 않은 것처럼 된다.

덧붙여 img 태그를 사용한다면 semantic element로서 '이미지'라는 의미를 가진 코드가 되지만 background-image의 경우 non-semantic element인 div 태그를 사용했기 때문에 아무런 의미를 가지고 있지 않다.

사용자의 컨텐츠 이해를 더 쉽게 해주고 싶다면 img 태그를 사용해 의미를 명확하게 해주고 alt 속성을 이용해 설명을 해주면 된다. 그렇지 않다면 background-image를 사용하면 된다.