💡시멘틱 웹(semantic web)에 대한 기초 지식
1. 시멘틱 웹(semantic web)
-
웹문서를 구조화하여 의미 있는 내용으로 만들어주기 위한 태그들
-
html에서 caption, thead 등 의미 부여를 위한 태그를 사용하지 않으면 검색 엔진에서 문제가 발생하기도 함
-
모든 검색 엔진은 크롤러를 돌림
(검색 엔진 : naver, google, daum, ...) -
크롤러 : 웹페이지를 자동으로 읽는 프로그램
① 크롤링
② HTML 문서 분석
③ 검색을 위해 저장 -
웹페이지를 자동으로 읽음
-> 유의미한 정보 가져옴
-> 검색 엔진에 저장해놓음
-> 관련 검색어가 사용자로부터 오면 해당 사이트 추천해줌 -
모든 코드를 div태그로만 작성한다면, 검색 엔진이 어느 부분이 중요한 부분이고 어느 부분이 덜 중요한지 파악이 어려움
2. 시멘틱 웹의 태그들
① navigation : 배너(문서 링크)
- 기존 :
<div class="navigation"> - html5 :
<nav>
② header : 사이트의 대표제목 등(문서 헤더)
- 기존 :
<div class="header"> - html5 :
<header>
③ section : 사이트 내 세부사항(본문)
ex)
기존 : <div class="main">
html5 : <section>
④ footer : 사이트의 copyright 정보 등
ex)
기존 : <div class="footer">
html5 : <footer>
3. 웹폰트 사용하기
<link>태그 사용- 'google 웹폰트' 검색하여 웹폰트 링크 서치
- link 태그는
<head>안에 들어감
(주로 title, meta 아래에 오는 편) - css에 쓸 font-family 이름도 나옴
무서운 속도로 흡수하는 스펀지 개발자 🧽