Img 태그 vs background-image

Img 태그를 사용할 때

• 프린트 할 경우 이미지가 출력되게 하고 싶을 때
• alt와 함께 사용이 필요한 경우. 이미지에 중요한 의미가 있어 표현하고 싶을 경우
  - ex) 'warning icon'처럼 스크린리더를 포함해 모든 사람이 이미지의 내용을 알아야 할 경우
• 로고나 사람얼굴처럼 이미지가 컨텐츠의 일부로써 중요한 경우
• 배경으로 쓰일 때 애니메이션 효과가 있는 경우

CSS background-image 를 사용할 때

• 프린트할 때 이미지는 출력을 원하지 않는 경우
• 이미지가 컨텐츠와 연관이 없고 그냥 배경이미지일 뿐인 경우
• CSS 스프라이트할 때처럼 이미지 일부만 보이고 싶은 경우
• background-size: cover 를 사용해서 이미지가 전체 윈도우를 덮게 하고 싶은 경우
• 이미지 위에 텍스트가 들어가는 경우

Semantic web & Semantic tag

<span><b>Hello</b></span>
<span><strong>Hello</strong></span>

위 두 코드는 같은 모양으로 나온다. 두껍게.
차이점은 b 태그는 단순히 글씨만 두껍게 한다.
반면에 strong 태그는 그 단어가 중요하다는 의미를 내포하고 있다.

구글이 인터넷에 있는 수많은 글들을 수집하고 검색결과에 따라 보여줄 때 바로 이 semantic tag 가 중요해진다. <b>보다는 <strong>을, <i>보다는 <em>가 중요하다고 인식한다. 단순히 font-size를 늘리는 것보다 <h1>를 사용하면 검색엔진은 이 페이지의 메인 내용이 이거구나! 라고 쉽게 파악할 수 있다.

위에 설명했던 img태그와 div로 설정한 background-image의 중요한 차이도 여기에 있다.
단순히 <div>에 background-image 를 부여한 것과는 달리 img 태그를 사용하면 검색엔진이 이미지라고 인식하게 된다. 또한 alt를 이용해서 이미지의 설명까지 덧붙일 수 있다.

인터넷에 글을 올릴 때는 검색엔진이 쉽게 찾을 수 있어야 한다. 검색엔진에 잘 나오는 법은

• 양질의 글
• 독창적 컨텐츠
• 이미지 포함
• 적합한 키워드 사용

등이 있다.

참고

1. https://stackoverflow.com/questions/492809/when-to-use-img-vs-css-background-image
2. https://ko.wikipedia.org/wiki/%EC%8B%9C%EB%A7%A8%ED%8B%B1_%EC%9B%B9
3. https://ko.wikihow.com/%EA%B5%AC%EA%B8%80-%EA%B2%80%EC%83%89-%EA%B2%B0%EA%B3%BC-%EC%B2%AB-%ED%8E%98%EC%9D%B4%EC%A7%80%EC%97%90-%EB%82%98%EC%98%A4%EB%8A%94-%EB%B0%A9%EB%B2%95