Semantic Web, 그리고 Semantic Tags
과연 그것이 무엇인가..?
자주 들어보지 못한 단어.. Semantic
Semantic 뜻은...?
의미의, 의미론의 라는 뜻을 가지고 있는 단어라고 합니다.
의미론적인 웹, 태그들 정도로 해석할 수 있는데, '의미있는 웹', '태그들'이란 어떤 것을 의미할까요?
Semantic Web
1. 탄생 배경
과거의 웹 기술은 많은 데이터들에 대해 키워드에 의한 정보접근만을 허용합니다.
이는 정보를 검색할 때 너무 많은 데이터가 나와 정보 홍수를 촉진합니다. 그리고 컴퓨터가 필요한 정보를 추출, 해석, 가공할 수 있는 방법이 없어 사용자가 수많은 데이터들을 직접 가공해야 한다는 문제가 있습니다.
요약하자면 컴퓨터가 정보자원의 의미를 이해하지 못하기 때문에 사용자가 직접 개입한다는 것입니다!
이를 해결하고자 사람만이 웹의 정보를 해석하는 것이 아니라, 컴퓨터가 스스로 의미를 해석하고 정보간의 관계를 이해할 수 있도록 하는 것이 Semantic Web시맨틱 웹의 탄생 목표입니다.
2. 작동 방법
정보는 검색 엔진에 노출되어야 비로서 '의미'를 가진 정보가 탄생합니다. 검색엔진은 정보들을 수집한 후에 예상되는 검색 키워드에 인덱스를 심어놓습니다. 이 때 HTML태그가 인덱스를 수집하는 기준이 되는데, Semantic Tags의 사용 유무에 따라 인덱스 포함 여부가 결정됩니다.
Semantic Tags
HTML5 이전에는 <div class="header"></div>와 <span class="header"></span>에 id와 class를 붙이고 스타일을 지정했습니다. 가독성이 낮고 무엇을 나타내는지 명확하지 않다는 단점이 있죠!
HTML5 이후에는 이 방식을 벗어나 Semantic Tags를 활용해 코드의 가독성을 높이고 명확하게 합니다.
<div class="header">가 아니라 <header>로 표현하며, 뜻이 명확해지는 장점이 있습니다
non-시맨틱 요소 예시
<div>
<span>
시맨틱 요소 예시
<img>
<iframe>
<table>
<header>
<footer>
<main>
등등....
<img> VS <div> + background-image
이미지를 구현할 수 있는 방법은 2가지가 있습니다.
<img>는 의미가 담긴 Semantic tag인 반면 <div>는 의미가 담기지 않은 Non-Semantic Tag로 사용방법이 다릅니다.
<img> 태그
사용방법
<img class="img3" src="https://www.w3schools.com/whatis/img_js.png" alt=""> 사용하는 이유
- 이미지가 웹 페이지 안에서 중요한 요소로 자리잡고 있을 때 사용합니다. 예를 들어 콘텐츠 정보와 관련된 로고, 인물 프로필, 경고 이미지 등 중요한 정보와 관련된 이미지를 사용할 때
alt속성과 같이 사용합니다. 위 태그는 페이지를 프린트 할 때 이미지가 함께 나오는 특징이 있습니다.
alt속성 : 이미지를 보여줄 수 없을 때 해당 이미지를 대체할 텍스트를 명시합니다.
<div> 태그 + background-image
사용방법
- div 태그로 이미지를 넣을 영역 만들기
<div class="bg-img">배경이미지</div>- bg-img 클래스에 배경이미지를 넣는 css를 추가
.bg-img {
background-color: yellow;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1280px-HTML5_logo_and_wordmark.svg.png");
}사용하는 이유
- 웹 페이지의 내용과는 별개로 웹 문서의 배경을 채우기 위한 용도로 사용합니다. 2. 이미지가 콘텐츠의 일부가 아닐 때 사용하며, 3. 페이지를 프린트 할 때 이미지가 나오지 않는 특징이 있습니다. 4. 추가적으로 이미지 스프라이트()를 이용할 때도 위 속성을 사용합니다.
이미지 스프라이트 : 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지
<style>
.up, .down, .right, .left { display: inline-block; background: url("icon.png") no-repeat; }
.up { width: 59px; height: 62px; background-position: 0 0; }
.down { width: 56px; height: 62px; background-position: -60px 0; }
.right { width: 62px; height: 60px; background-position: -117px 0; }
.left { width: 62px; height: 60px; background-position: -178px 0; }
</style>
