2020-09-21
오늘은 HTML & CSS에 대해서 공부했다.
HTML은 HyperText Markup Language로써 웹페이지의 틀을 만드는 마크업언어이다. HTML은 tag들의 집합으로 만들어진다고 생각하면 된다. 여기서 tag란 <>부등호로 묶인 HTML의 구성요소 이다. HTML을 작성할 때는 tag, 예를 들어서 를 열어서 시작했으면, 반드시 로 닫아 주어야한다. 여기서 가장 궁금했던 단어가 있었다. sementic이라는 단어. 정확히 무슨 단어인지 몰라서 찾아보았다.
sementic web은 무엇일까?
시맨틱 웹(Semantic Web)은 "의미론적인 웹"이라는 뜻으로, 기계가 이해할 수 있는 형태로 제작된 웹을 의미합니다.
Wiki 백과
출처: https://cordelia273.space/21 [세상의 모든 지식]
시간이 지나면서, 인터넷에는 수많은 정보들이 쏟아지게 되었다. 많은 정보들 가운데에 나에게 필요한 정보를 찾아나서야 하는 문제점이 생기게 되었는데, 이러한 문제점을 해결하기 위한 방법이 "시맨틱 웹"이라는 개념이었다.
시맨틱 웹은 기계가 웹 페이지의 정보를 이해하고, 우리에게 필요한 정보만 보여주거나 정보를 가공해 사람이 필요로 하는 형태로 가공해주는 것을 의미합니다. 그러기 위해서는 기계가 웹 페이지를 이해할 수 있도록 해야한다.
지금은 < meta >태그를 이용해 다양한 설명과 이미지, 파비콘 등을 지정할 수 있게 되면서 웹 문서에 담을 수 있는 정보들이 늘어나게 되었다. 시맨틱 웹은 여기에서 한 단계 더 나아간 방식이라고 보면된다. 웹 문서에 더 많은 정보들을 담을 수 있고, 웹 문서를 크롤링해가는 검색 엔진 로봇들에게 더 많은 정보를 알려줍니다.
과거에는 <div id="header"></div> 로 나타냈던 태그를 <header></header> 로 나타내는 것.
기계는 id가 header라고 적혀 있다고 해서 그 부분이 웹 페이지의 헤더에 해당하는지 모른다. 게다가 사람에 따라서는 다른 형태로 header id를 작성하는 사람도 있을 수 있는데, < header >사용해서 웹 사이트의 헤더를 정의해주면 기계도 이 부분이 웹 페이지의 헤더라는 것을 이해할 수 있는것 이다.
<section> <header> <footer> <article> <aside> <nav> <address> <item> <form> <figure> <figcaption> <summary> <time> <mark> <main> <details>
header말고도 이런 다양한 태그들을 이용해서 기계뿐만 아니라 사람도 어느부분인지 쉽게 이해할 수 있다.
출처: https://cordelia273.space/21 [세상의 모든 지식]
사실 html와 css는 처음 접하는 마크업언어는 아니다. UI,UX 디자인 공부를 할 때, html와 css를 다루어본 경험때문에, 자바스크립트만큼 어렵게 느껴지지는 않았다. 머릿속에 레이아웃 속성들이나, 위치속성들이 바로바로 나오지는 않지만, 와이어프레임을 짜고, html과 css를 작성할 때, 구글링을 하면 바로 이해가 가능해서 다시 손과 머리에 익숙해지도록 해야겠다.
