오늘도 화이팅하며 블로깅을 시작합니다!😂
1.Semantic Web과 Semantic Tag이란?
Semantic Web?
시맨틱 웹은 기계가 사람을 대신해서 웹 페이지의 정보를 이해하고, 우리에게 필요한 정보만 보여주거나 정보를 가공해서 우리가 필요로 하는 형태로 가공해주는 것을 의미
-> 기계가 웹 페이지를 이해할 수 있도록 해주어야 함
-> 그래서 과거의 웹 문서는 많은 정보를 담지 못했다.
왜냐하면 그때의 대부분의 태그는 < div >로 감싸져 있었을텐데
개발자의 입장에서는 코드로 사이트 전체 구조를 한 눈에 파악하기 힘들었을 것이고, 검색 엔진은 사이트의 의미를 정확히 파악하지 못해 검색 결과값의 정확도가 떨어졌을 것.
그래서 나온것이 시멘틱 태그!
Semantic Tag?
브라우저,검색엔진,개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할
기존에 
이렇게 썼던것을
이렇게 쓰는것을 시멘틱 태그라고 한다.
예를들면 시맨틱태그가 아닌것: div,span
시맨틱 태그인 것: form,table,article -내용을 명확하게 정의하는 것들
한마디로 '의미를 가지고 있는지의 차이'이다.
겉보기엔 똑같지만 검색 엔진 최적화(SEO)에서 중요한 역할을 하기 때문에 검색결과에서 상단을 차지하고 싶다면 쓰는것을 습관화 하는 것이 좋다.
Semantic Elements
section : 문서에서 세션을 정의할 때 사용합니다.
header : 헤더
nav : 내비게이션
aside : 사이드에 위치하는 공간을 의미
article : 본문의 주 내용이 들어가는 공간 의미
footer : footer
헷갈렸던 개념이 익숙해졌습니다. 이제 두번째입니다!
2.Semantic Web과 Semantic Tag이란?
내 웹사이트에 이미지를 넣는 방법이 있다.
1.html의 < img > 태그를 활용하는 방법 - 이미지 태그
2.css의 background-image 를 사용하는 방법 - 백그라운드 이미지 태그
두가지 방법을 활용하여 이미지를 원하는 위치에 구성하면 결과적으로 똑같은 효과를 얻을 수 있다.
질문: 둘을 결정하는 기준은 무엇일까?
컨텐츠로 의미를 갖는다면 img 태그를 사용
디자인적인 필요에의해 사용해야한다면 background-image를 사용
한 마디로 html은 컨텐츠를 구성하는 부분이고 css는 디자인적인 요소임을 인지하면 쉽게 구분해서 사용할 수 있다.
background-image속성에 있는 이미지는 google에서 크롤링하거나 색인(색인(Index)이란 검색을 빠르게 하기 위해 데이터를 저장하는 장소)을 생성하지않는다.
img태그에는 alt=""로 이미지에 대한 설명을 넣을 수 있어 SEO(검색 엔진 최적화)에 노출되는 용도로 사용 가능하다.
그에 반해 background-image는 이미지에 대한 정보를 갖고 있지 않는다.img태그를 사용하고 background-image는 순전히 '장식'으로 사용 할 때 사용하는것이 좋다.
.
