<div>제목</div>
우리는 div태그로 묶인 이것이 제목인 것을 인지할 수 있다.
하지만 컴퓨터는 이것이 사람 이름인지, 제목인지 아니면 회사 이름인지 그것도 아니면 어느 프로젝트의 이름인지 구별할 수 없다.
그래서 이것들을 구별해 주기 위해 Semantic Tags가 있다.
가령,
<header>제목</header>
컴퓨터는 이것이 제목인 것을 인지할 수 있고,
<nav>navigation</nav>
이것이 네비게이션인지를 인지할 수 있다.
이처럼 아무 의미 없는 것이 아닌 의미를 부여한 태그를 Semantic Tags라고 하고,
또한 이러한 태그들로 이루어진 웹 사이트를 통틀어 Samantic Web라고 한다.
#Checkpoint 13
"사이트에 이미지를 넣는 방법은 두 가지가 있습니다. 태그를 사용하는 것과 태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."
사이트에 이미지를 첨부하는 방법은 두 가지가 있다.
첫 번째, html파일에서 semantic tags인 img태그를 이용하여 이미지를 첨부하는 방법,
두 번째는 css파일에서 background-image속성을 이용하여 이미지를 첨부하는 방식이다.
<img src="" alt="">
첫번째 방식인 img태그는 semantic tags로, 위에서도 말했듯이 컴퓨터에 의미를 전달할 수 있다. img태그를 사용함으로서 이 위치에 들어가는 것은 이미지라는 것을 인식시킬 수 있다. 또한 alt속성을 이용해 이미지에 설명을 부여할 수 있어 검색 엔진에 노출시킬 수도 있다.
.div {
background-image: url("")
}
하지만 두 번째 방식인 div태그를 사용한 background-image속성의 이미지 첨부는 이미지가 첨부된 html태그의 역할을 컴퓨터가 인식하지 못할 가능성이 높고, 따라서 검색 엔진에는 노출되지 않는다.