[Repl.it] img 태그와 background-image의 차이

1. Semantic Web, Semantic Tags 이해하기

Semantic의 뜻: 의미적으로 연관이 있는
웹이나 태그가 그 자체로 정보를 가지며 다른 정보들과의 관계를 보여준다.

Semantic Tags

• img, table, form
• div태그와 span 태그는 내용에 대한 어떠한 정보도 제공하지 못한다.

Semantic Web(=Semantic HTML)

• header(nav), main{section(article, aside)},figure(figcaption), audio, video, footer
  <div id="header"></div> = <header></header>
• div 태그를 반복해서 사용하는 것과 동일하지만 컴퓨터와 개발자에게 읽기 쉽게 표기된다.
  -> 안에 포함될 내용을 어느정도 예측할 수 있다.
• 모바일 사용자나 장애가 있는 사용자의 접근성을 향상시켜준다.
  -> 브라우저나 스크린 리더가 코드를 더 쉽게 해석할 수 있다.
• SEO =Search Engine Optimization 을 향상시킨다.
  -> 검색 엔진이 웹사이트를 빠르게 식별할 수 있다.
• 소스코드의 가독성을 향상시켜준다.

이미지가 사용자에게 컨텐츠 이해에 도움을 더 준다고 생각하면 img 태그를 쓰고, 그렇지 않으면(= 디자인요소일 뿐이라면) background image 를 써라.

2. <img>

img 태그는 태그 자체가 이미지 컨텐츠임을 알리는 semantic Tag이다.

언제 사용하나요?

• 이미지가 로딩되지 않을 경우
  : alt 속성을 추가하여 이미지 대신 텍스트를 보여줄 수 있다.
• 시각장애인에게 이미지를 설명할 경우
  : alt 속성에 기입한 텍스트를 스크린 리더가 읽어주어 쉽게 해석할 수 있다.
• 이미지가 출력되어 나오게 하고 싶은 경우
• 이미지가 콘텐츠의 중심이 되는 경우

3. background-image

background-image는 div 이외의 정보를 가지고 있지 않는다.

언제 사용하나요?

• 이미지 위에 텍스트를 작성하고 싶은 경우
• 배경이미지를 제외하고 프린트 하고 싶은 경우
• 순순히 디자인을 위해서만 사용할 경우

4. Reference

• 위키백과 "Semantic Web"