html에 이미지를 넣는 방법은 두 가지이다. 첫째는 img 태그 내에 src 속성에 img 링크를 가져오는 방법, 둘째는 div 태그 내에 css를 활용하여 background-image 속성을 넣는 방법이다. 그렇다면 두 가지 방법의 차이점은 무엇일까? 차이점을 알기 위해서는 Semantic Tag과 Semantic Web 대해서 알아야 한다.
Semantic Tag
Semantic이란 단어의 뜻은 "의미를 갖는"이라는 뜻이다. 즉 Semantic Tag는 "의미를 갖는 태그"라는 뜻이다. 그러면 "의미가 없는 태그"라는 뜻의 Non-semantic Tag도 있을까? 존재한다.
- Semantic Tag: h1, img 등 딱 보면 어떤 역할을 하는지 알 수 있는 태그이다.
- Non-semantic Tag: span, div와 같이 어떤 역할을 하는지 알 수 없는 태그이다.
Semantic Web
Semantic Web이란 기계가 이해할 수 있는 형태로 제작된 웹을 의미한다. 예를 들자면 과거에는 header 태그가 없어서 div 태그 내에 id="header"를 만들어 사람만 이것이 header이고 기계는 이해할 수 없는 형태였다. 그러나 현재는 header 태그를 사용함으로써 기계도 "여기가 header다."라고 이해할 수 있게 되었다.(출처: https://blog.cordelia273.space/21)
#과거
<div id="header></div>
#현재
<header></header>즉, Semantic Web은 사람뿐만이 아니라 기계도 이해할 수 있도록 Semantic Tag를 활용하여 제작한 웹을 의미한다.
HTML에 img를 넣는 두 가지 방법
위 글을 읽으면서 내려왔다면 HTML에 img를 넣는 두 가지 방법은 무엇인지 알 수 있을 것이다. 두 가지 방법은 img 태그(semantic tag)를 사용한 방법과, div 태그(non-semantic tag)를 사용한 방법 두 가지이다.
Semantic Tag를 사용할 경우
- 기계 입장에서 코드를 잘 이해할 수 있다.
- 사람 입장에서 코드를 봤을 때에도 가독성이 좋아 코드를 이해하기 쉽다.
- 검색 엔진에 걸리기 쉽다.
- css파일을 불러오지 않아도 되어 non-semantic tag 방식에 비해 로딩이 빠르다.
- css를 활용하기 어려워 디자인을 예쁘게 만들기 어렵다.
장점
단점
Non-semantic Tag를 사용할 경우
- CSS를 활용하기 편리하여 디자인할 때 용이하다.
- 기계와 사람 모두 코드를 이해하기 어렵다.
- 검색 엔진에 걸리기 어렵다. 검색 엔진이 해당 이미지가 어떤 뜻을 가지고 있는지 잘 이해하기 어렵기 때문이다.
- css파일을 불러와야 하기 때문에 로딩이 느리다.
장점
단점
