사이트에 이미지를 넣는 방법으로 두가지가 있다.
1️⃣ < img > 태그를 사용하는 방법
2️⃣ < div > 태그에 이미지 속성을 추가하는 방법
두가지 차이점이 있고, 각각 사용 용도에 따라 장점도 있다.
두 방법을 다르게 쓰는 이유가 뭘까?
우선 이유를 알기에 앞서서 시맨틱 웹(Sementic Web) 과 시맨틱 태그(Semantic Tag) 에 대해 알고 있어야 한다.
Sementic Web
시맨틱 웹(Semantic Web)은 '의미론적인 웹'이라는 뜻이다.
의미론적인 웹은 말 그대로 컴퓨터가 웹사이트를 단순한 코드의 구성이 아닌 의미를 가진 사이트라는걸 알 수 있게 만 것이다.
HTML5에서의 시맨틱 웹
HTML5 이전까지는 시맨틱 태그라는 것이 없었다.
그ㄷ 때의 대부분의 태그는 <div>로 감싸져 있었을텐데,
개발자의 입장에서는 코드로 사이트 전체 구조를 한눈에 보기 어려웠고, 검색 엔진 또한
결과값의 정확도가 떨어졌을 것이다.
그래서 나온 대안이 시맨틱 웹이고, 그에 따라서 시맨틱 태그(Semantic tag)라는 것이 나온 것이다.
Semantic Tag
아래와 같이 작성을
div태그에class를 header로 지정 했다고 한다.<div class="header"> header </div>이와 같이 과거의 웹은 많은 정보를 담지 못한다는 문제가 있었다고 한다. 이후 시맨틱 태그를 통해 문제를 보안하게 되는데
<header> header </header>
위와 같이
div태그에clss를 지정하는 것이 아닌,header라는 의미를 가진
태그를 제공해 기계가 웹페이지를 처리할때header를 바로 처리할 수 있게 됐다.
정리를 하자면...
1️⃣ < img > 태그를 사용하는 방법
img 태그를 사용해 이미지를 추가하는 방식은 html5 부터 제공되는 Semantic tag를 사용하는 것이다.
장점: img의 크기(width,height)를 개별적으로 지정해 줄 수 있다.
근처에 있는 다른 요소들에도 영향을 주게 되어서, 이때 이미지 태그에 인접해 있는 요소가 이미지 사이즈에 따라 위치가 변경된다.
2️⃣ < div > 태그에 이미지 속성을 추가하는 방법
background-image 속성을 사용하는 것은 html5 이전에 사용하던 방식이라고 할 수 있다.
장점: 이 속성을 사용하면 이미지 자체에 크기를 개별적으로 지정은 불가능 하지만, 부모 태그를 사용하여
크기를 조절해서 이미지의 크기를 변경 할 수 있다. 이 경우엔 인접해 있는 요소에 영향을 주지 않는다고 한다.
어떤 방식이 좋다기 보다는, 상황에 따라 방법을 다르게 써야한다.
