HTML & CSS
"Semantic Web"(시맨틱 웹) & "Semantic Tags"(시맨틱 태그)
프린벼르
2022. 1. 25. 15:09
1. "Semantic Web" ....?
💁🏻♀️ 웹기술의 발전으로 인터넷이 실생활로까지 확산되었다. 이로인해, 무분별하게 많은 양의 정보가 축적되었고, 많은 양의 정보만큼 많은 문제들이 발생하게 되었다. 그런데, 컴퓨터는 스스로 정보를 해석, 가공 할 수 없어 모든 정보를 사용자가 직접 개입해서 처리해야하는 문제가 발생하게 되었다. 이러한 불편을 해결하기 위하여 "기계가 직접 읽고 처리할 수 있는 웹"을 개발하기위해 탄생한 것이 "Semantic Web"이다.
2. "Semantic Tag" ....?
💁🏻♀️ 과거 무분별한 태그의 사용으로 인해 정보를 찾기위해 사람이 직접 개입해야하는 비효율적인 시스템을 개선하고자, 의미있는 태그들을 개발하기 시작했다. ( 의미 있는 태그 = Semantic Tag )
Non Semantic Tag는 content에 무엇이 들어가는지에 관하여 아무런 설명도 없다. 이에 비해, Semantic Tag는 content의 의미를 명확하게 설명하고 있다. 또한, header, nav, section, article, aside, footer 등 부분의 성격에 따라 쓰는 태그들이 등장하는 것을 볼 수 있다.
3. Semantic Tag 관련 사례 ...!
< img > 태그
vs
background-image css
(백그라운드 이미지)
* <img> 태그 사용법
HTML => <img src="..." alt="..."> (alt : 이미지 설명)
* background-image 사용법
CSS => background-image{url(...)}
이미지가 만약 사용자에게 컨텐츠 이해에 도움을 주기위한 정보를 제공하는 것이라면 <img>태그를 써야한다.
하지만, 정보를 제공하지 않고 단순히 꾸며주기용 이미지라면 background-image를 써야한다.
이 모든 것은 웹 접근성때문이다. 시각 장애인분들에게 컴퓨터 정보를 읽어주기 때문에 이러한 차이가 생겨났다.