1. 사이트에 이미지를 넣는 방법
사이트에 이미지를 넣는 방법은 2가지가 있는데, 첫번째는 html에서 태그로 이미지를 넣는 방법이다.
<img src="https://www.w3schools.com/whatis/img_js.png">두번째는 CSS의 background-image 속성으로 이미지를 추가하는 방법이다.
<div class="good-img"></div> // html
.good-img { // CSS
background-image: url("https://www.w3schools.com/whatis/img_js.png");
}2. Semantic Web
Sementic은 "의미론적"이라는 사전적 뜻을 가지고, Sementic Web이란 기계가 이해할 수 있도록 의미를 부여한 웹이라고 할 수 있다. 단순히 사람만이 웹의 정보를 파악하는 것이 아니라, 기계가 그 의미를 해석하고 정보간의 관계를 이해할 수 있도록 하는 것이 Sementic Web의 목적이다.
3. Semantic Tag
Sementic Web을 고안해서 Sementic Tag도 나오게 됬는데, 컴퓨터 언어를 잘 모르는 사람이 보아도 무슨 의미인지 알 수 있는 태그들이 Sementic Tag에 해당한다.
div, span 는 의미가 없는 태그이지만,
header, img, body, footer 등은 의미가 있는 Sementic Tag에 해당한다.
우리가 사용하는 사이트들의 검색 엔진은 정보를 무작위 순서대로 나열해주는 것이 아니다. 검색 엔진은 매일 웹사이트 정보들을 수집한 뒤 예상되는 검색 키워드에 대응하는 인덱스를 만드는데, 이 인덱스를 수집하는 기준이 바로 HTML의 태그가 되는데, 그 중 시맨틱 태그의 사용 유무가 중요한 기준이 된다.
4. 사이트에 이미지를 넣는 2가지 방법의 차이점
-
img 태그를 쓸 때
img 태그는 Sementic Tag이므로 사용할 이미지가 중요한 정보를 담고 있거나, 컨텐츠와 연관이 있을 때 사용하는 것이 적합하다. -
div 태그 + background-image 속성을 쓸 때
반대로 div 태그는 Sementic Tag가 아니므로 이미지가 컨텐츠와 연관이 없거나 단순히 배경으로 사용되는 용도일 경우 사용하는 것이 적합하다.
references
https://chanho-yoon.github.io/
https://fierycoding.tistory.com/55
