면접 질문

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

위의 질문에 답변하기 위해서는 Semantic Web과 Semantic Tag에 대한 이해가 있어야 합니다.

1. Semantic Web

Semantic Web 이란?

Semantic은 사전상 '의미론적인, 의미의' 이라는 뜻을 가지고 있습니다.
그렇다면 Semantic Web 은 '의미있는 웹'정도로 이해할 수 있습니다.

Semantic Web 의 목적

단순히 사람만이 웹의 정보를 파악하는 것이 아니라, 정보간의 관계를 서로 이해할 수 있도록 하는 것이 Semantic Web 의 목적입니다.

Semantic Web & Tag

검색 엔진에 노출되지 않는 정보는 존재 의미가 없는 것이나 다름 없습니다.
검색엔진은 매일 웹사이트 정보들을 수집한 뒤 예상되는 검색 키워드에 대응하는 인덱스를 만들어 놓습니다.
이 인덱스를 수집하는 기준이 바로 HTML의 태그가 되는데, 그 중 Semantic Tag 의 사용 유무에 따라 인덱스 포함 여부가 결정됩니다.

2. Semantic Tag

Semantic Tag 란?

태그를 보고 의미를 유추할 수 있는 태그를 Semantic Tag 라고 합니다.

Example

• Non-Semantic Tag
  <div>, <span>

• Semantic Tag
  <img>, <iframe>, <table>, <header>, <footer>, <main> ...

3. <img> VS <div> + background-image

<img> 태그를 쓸 때

• 회사 로고, 인물 프로필 사진 등 콘텐츠 정보와 연관이 있는 이미지를 쓸 때 (alt 속성 함께 사용)
• 경고 아이콘과 같이 중요한 의미가 내포된 이미지를 쓸 때 (마찬가지로 alt 속성 함께 사용)
• 페이지 프린트시 이미지가 함께 나오도록 할 때

<div> 태그 + background-image 속성을 쓸 때

• 이미지가 콘텐츠의 일부가 아닐 때
• 이미지 스프라이트를 이용할 때
• 말 그대로 웹문서의 배경을 채우기 위한 용도일 때
• 페이지 프린트시 이미지가 나오지 않게 할 때