일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
- Node.js
- ES6
- Rendering
- React.js
- closure
- Element
- map
- jsx
- 볶음밥
- 키다리 개발 일지
- javascript
- DoM
- vue.js
- 회고록
- react
- ecma
- props
- html
- 시맨틱
- component
- web
- 키다리 개발자
- scope
- React calculator
- wep
- CSS
- 키다리의 개발일지
- includes
- 노드
- tag
- Today
- Total
키다리 개발자
시멘틱 웹(Semantic Web)이란? 본문
시맨틱 웹이란?
시맨틱 웹(Semantic Web)은 "의미론적인 웹"이라는 뜻으로, 기계가 이해할 수 있는 형태로 제작된 웹을 의미합니다.
- Wiki 백과
웹 2.0 시대가 시작되면서 사용자들이 생산하는 정보들이 많아지다가 그 양이 너무 많아졌습니다.
우리에게 필요하고 유익한 정보들도 많지만, 불필요한 정보들도 넘쳐나게 되었죠. 이렇게 되면 사람들이 일일이 수 많은 정보들 가운데에 자신이 필요한 정보를 찾아나서야 하는 문제점이 생기게 됩니다.
이러한 문제점을 해결하기 위한 방법이 "시맨틱 웹"이라는 개념이었고, 웹의 창시자 '팀 버너스 리(Tim Berners-Lee)'가 제안했습니다. (한국인 아닙니다 ^^ 영국사람)
시맨틱 웹은 기계가 사람을 대신해서 웹 페이지의 정보를 이해하고, 우리에게 필요한 정보만 보여주거나 정보를 가공해서 우리가 필요로 하는 형태로 가공해주는 것을 의미합니다.
그러기 위해서는 기계가 웹 페이지를 이해할 수 있도록 해주어야 합니다.
그런 의미에서 과거의 웹 문서는 많은 정보를 담지 못했습니다.
예를 들어서 웹 사이트에 대한 설명을 넣고 싶었다면, <body></body>에 직접 웹사이트에 대한 설명을 넣는것 외에는 방법이 없었습니다. 그런데 <body>태그에 들어간 내용들은 사람들에게 보여주고 싶을 때나 아닐때나 항상 보이게 됩니다.
하지만 지금은 <meta>태그를 이용해 다양한 설명과 이미지, 파비콘 등을 지정할 수 있게 되면서 웹 문서에 담을 수 있는 정보들이 늘어났습니다.
시맨틱 웹은 여기에서 한 단계 더 나아간 방식입니다. 웹 문서에 더 많은 정보들을 담을 수 있고, 웹 문서를 크롤링해가는 검색 엔진 로봇들에게 더 많은 정보를 알려줍니다.
예를 들면 이런 방식입니다.
<div id= "header> </div>
<header></header>
로봇은 id가 header라고 적혀 있다고 해서 그 부분이 웹 페이지의 헤더에 해당하는지 알 수 없습니다.
게다가 사람에 따라서는 'pageHeader'과 같이 다른 형태로 header id를 작성하는 사람도 있을 수 있습니다.
하지만 <header>라는 태그를 사용해서 웹 사이트의 헤더를 정의해주면 기계도 이 부분이 웹 페이지의 헤더라는 것을 이해할 수 있습니다.
이 외에도
- <nav>
- <aside>
- <section>
- <footer>
- <article>
등이 있습니다.
시맨틱 태그들을 사용하면 기계들도 이해할 수 있지만, 다른 개발자들도 어디가 메인인지, 네비게이션인지 쉽게 이해할 수 있습니다.
시맨틱 웹은 앞으로 사람만이 인식할 수 있는 범위의 웹페이지가 아니라 기계가 이해할 수 있는 웹페이지의 표준 언어가 되는 것을 목표로 하고 있습니다.
'HTML, CSS' 카테고리의 다른 글
웹접근성이란? (0) | 2020.02.12 |
---|---|
반응형 웹이란? (0) | 2020.02.12 |
CSS 애니메이션 (0) | 2020.02.11 |
크로스 브라우징(Cross Browsing)이란? (0) | 2020.02.10 |
CSS2와 CSS3의 차이 (0) | 2020.02.08 |