웹사이트 개발할 때이미지를 넣는 두 가지 방법

웹 사이트 개발을 하면서 이미지를 넣는 방법은 두 가지가 있습니다.

1.  <img> 태그 사용하는 것

2. <div> 태그에 background-image 속성 추가하는 것입니다.

 

위 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해 보세요.라는 질문이 실제로 프론트엔드 면접에서 나올 수 있는 질문이라고 하니까 이번 기회에 꼭 이해하고 넘어가야겠습니다. 

 

이 두가지 방식의 차이를 이해하기 위해서는 먼저 Semantic Web과 Semantic Tag에 대한 이해가 있어야 합니다.

semantic이란 단어는 '의미의, 의미론'의 뜻이 있습니다. 그렇다면 Semantic Web이란 '의미 있는 웹'이라고 말할 수 있습니다.

또 사람의 머리 속의 언어에 대한 이해를 컴퓨터 언어로 표현하고 이것을 컴퓨터가 사용할 수 있게 만다는 것을 말합니다.
결론적으로 Semantic Web은 웹에 존재하는 수많은 웹들의 메타데이터를 부여하여, 잡다한 데이터 집합이 아닌 ‘의미’와 ‘관련성’을 가지는 거대한 데이터베이스를 구축하고자 하는 발상입니다.

자동화된 기계가 그 의미를 해석하고 정보 간의 관계를 이해할 수 있도록 하는 것이 시맨틱 웹의 목적입니다. 

 

검색 엔진에 노출되지 않는 정보는 존재 의미가 없는 것이나 다름없습니다.

검색엔진은 매일 웹사이트 정보들을 수집한 뒤 

예상되는 검색 키워드에 대응하는 인덱스를 만들어 놓습니다.

이 인덱스를 수집하는 기준이 바로 HTML의 태그가 되는데, 

그중 시맨틱 태그의 사용 유무에 따라 인덱스 포함 여부가 결정됩니다.

 

간단한 예시로 과거 시맨틱 웹이 고안되기 전

<div id="header"></div>

고안 후

<header></header>

고안 후 컴퓨터는 이 부분이 header라는 것을 이해할 수 있게 됩니다.

 

 

Semantic tag란?

 

시맨틱 웹에서 사람과 기계가 이해할 수 있는 형태, 즉 활용하기 좋은 형태의 데이터로 웹을 발전시키기 위해 나온 tag입니다.입니다
조금 더 쉽게 말하자면 HTML5 언어에 익숙하지 않는 사람이 보고도 저 태그가 무엇을 의미하는지 알아볼 수 있도록 하는 태그를 Semantic Tag라고 합니다.

 

 

시멘틱 태그 예시

<img>

<iframe>

<table>

<header>

<footer>

<main>

등이 있다.

 

img 태그와 backgorund-img 속성 차이점이 무엇일까?

 

img tag는 결국 의미가 있는 시맨틱 태그로써 컴퓨터가 이해할 수 있고 alt 속성으로 에러 발생 시 이미지가 깨져도 어떠한 이미지인지 알 수 있지만 background-image는 의미 있는 태그가 아닌 그냥 속성으로 에러 시 어떠한 이미지인지 어떠한 정보도 알 수 없습니다. 또 컴퓨터는 이 태그가 어떤 이미지인지 알 수 없습니다.

 

결론적으로 사용자를 위한 에러시 이미지가 깨져도 어떠한 이미지인지 정보가 들어가야하고 조금 더 검색엔진에 의해 웹이 잘 노출 되도록 하기 위해서나 콘텐츠 내용과 관련된 의미있는 이미지일 때 시맨틱 태그인 img tag를 사용하고, 그저 웹 디자인과 같은 미적요소로 이미지를 보여주기식의 배경을 채우기 위한 용도로는 background-image를 사용하는게 좋을 것 같습니다.

---

참고 자료 : https://fierycoding.tistory.com/55

시맨틱 웹(Semantic Web)과 시맨틱 태그(Semantic Tags)에 대한 이해

https://www.w3schools.com/html