sementic Web & Tag

1. sementic web?

• Semantic Web은 인터넷의 급속한 활성화로인해 웹에 많은양의 데이터가 축적되었고 그 많은 데이터에서 원하는 데이터를 편하게 가져오기 위해 사용하기 시작하였다.
• 웹은 문서(document) 단위로 정보가 공유되는데 Semantic Web은 이러한 기존의 문서 중심의 웹을 "데이터 중심(data-centric)의 웹"으로 발전시키기 위해 개발되었다.
• Semantic Web서는 RDF(Resource Description Framework), OWL(Web Ontology Language), SPARQL(SPARQL Protocol and RDF Query Language) 등의 기술을 사용하여 컴퓨터가 사람의 언어로 알아들을 수 있게 데이터를 표현한다.
  이러한 기술들은 통해 데이터 간의 연결성을 높이고, 분산된 데이터들이 하나의 큰 데이터베이스처럼 통합되어 활용할 수 있게 해 주었다.

1. semantic tag

Semantic tag는 HTML5에서 추가된 태그로, 문서 구조를 더 명확하게 표현하기 위해 만들어진 태그이다.
Semantic tag는 이름 그대로 요소의 의미를 명확히 표현하는태그로 과거 키워드만으로 접근하던떄보다 가독성과 웹의접근성이 높아져 검색 엔진 최적화(SEO)에 유리하다.

또한 시멘틱 태그는 의미를 가진 태그로 컴퓨터가 요소를 분석하고 이해할 수 있어 스스로 데이터를 활용하여 시멘틱 웹을 실현할 수 있게 해주는 태그이다.
의미를 가진 태그이기때문에 검색엔진에서 보다 정확한 정보를 빠르게 제공할 수 있는 장점이있다.
시멘틱 태그의 종류로는 <form>``<table>``<img>가 대표적이다.

semantic tag	설명
header	머리글, 제목을 나타내는 태그
nav	네비게이션 목차 같이 다른 페이지로 이동할수 있는 링크를 나타내는 태그
aside	좌,우측의 사이드 공간을 의미하는 태그
section	같은 카테고리 별로 구역을 구분하는 태그
footer	문서하단에 들어가는 정보를 구분하는 태그

2. non-semantic tag

non-semantic tag는 요소에대한 기능을 갖고 있지는 않고 가상의 레이아웃을 설계하는데 쓰이기때문에 구성요소에 대한 설명이 없는 태그이다.
div: 다른 요소들의 컨테이너로 사용되나 특정한 의미는 가지고있지않다.
span: inline요소를 그룹화하고 스타일을 지정하는데 사용되나 특정한 의미는 가지고있지않다.
font: 글자의 글꼴,색,크기,스타일같은 속성을 설정하나 그 안에있는 특정한 내용을 보여주지는 않는다.
b,i,u: 굵게,기울임,밑줄같이 스타일을 나타낼때 사용하나 의미를 부여하지는 않는다.

Assignment

"사이트에 이미지를 넣는 방법은 두 가지가 있습니다.
<img> 태그를 사용하는 것과 <div> 태그에 background-image 속성을 추가하는 것.
두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."

<div>태그와 <img>태그 모두 background-image를 넣는데 사용할 수 있다.
<div>태그는 인라인 이미지가 아닌 요소의 배경으로 처리되기때문에 이미지위에 텍스트나 다른 요소들을 표시할 수 있다.

이미지는 div를 사용하여 요소 내에 반복 배치할 수 있다.
하지만 <img>태그는 inline 이미지로 처리되어 페이지의 다른 콘텐츠와 인라인으로 같이 표시된다.

<img>태그에는 배경 속성이 없으며, 요소내에서 반복하여 배치 할 수 없다.

하지만 위치나 크기, 기타 속성을 제어하기 위해 요소에 스타일을 추가 할 수는 있다.

이미지가 더 큰 레이아웃의 일부여야하고 그 위에 다른 콘텐츠를 표시해야 하는 경우 <div>를, 이미지가 요소의 주요 콘텐츠이고 다른 콘텐츠와 함께 인라인으로 표시되어야 하는 경우 <img>를 사용하는것이 더 적합하다.