Semantic Web, Tag

Semantic Web

• 시멘틱 웹은 컴퓨터가 보다 유용한 웹 시스템을 개발하도록 웹페이지, 질문, 정보, 어휘 등의 데이터를 구성하여 데이터에 의미와 관련성을 부여하고 인간의 상호작용을 지원할 수 있게 만들어서 활용할 수 있도록 데이터웹을 만드는 것이다.

Semantic Tag

• HTML5 부터 도입된 태그이며, 개발자와 브라우저에게 의미있는 태그를 제공한다.
• 이 태그들은 자신의 컨텐츠의 의미를 명확하게 정의하여 개발자가 태그만 보더라도 어떤 컨텐츠들이 있는지 확인할 수 있다.

태그            설명
<article>		내용을 정의한다.
<aside>			페이지 콘텐츠를 제외한 콘텐츠를 정의한다.
			링크, 광고, 사이드바 표시 등.
<details>		사용자가 보거나 숨길 수있는 추가 세부 정보를 정의한다.
<figcaption>		<figure> 요소에 대한 캡션을 정의한다.
<figure>		일러스트레이션, 다이어그램, 사진, 코드 목록 등과 같은 자체 포함 된 콘텐츠를 지정한다.
<footer>		문서 또는 섹션의 바닥글을 지정한다.
			주로 저작권, 연락처 정보 등 내용이 삽입되며
			<header>, <section>, <article> 등 다른 레이아웃 사용가능.
<header>		문서나 섹션의 머릿글을 지정한다.
			사이트 맨 위쪽이나 왼쪽에 사용하며 헤더 안에 <form> 태그를 이용, 검색창을 넣거나 <nav>태그를 이용해 사이트메뉴를 넣는다. 
<main>			문서의 주요 내용을 지정한다.
<mark>			강조표시된 텍스트를 정의한다.
			형광펜을 칠한 것처럼 노랗게 칠해진다.
<nav>			네비게이션 링크를 정의한다.
			같은 사이트내의 링크나 다른 사이트로의 링크들의 모음이다.
<section>		<header>, <footer>와 함께 문서의 구역을 정의한다.
			<section>안에 <section>을 넣을 수도 있고, <article>을 이용해 내용을 넣는다.
<summary>		<details> 요소를 위한 눈에 보이는 제목을 정의한다.
<time>			날짜/시간을 정의한다.



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

• img태그를 사용하여 이미지를 삽입할 경우 태그만 보더라도 이 태그가 img를 뜻하여 가속성이 좋고 alt를 사용하여 검색엔진에도 상위 노출이 가능하다.

• background-image는 배경이미지를 삽입할 때 사용하지만 브라우저 가독성이 떨어지며 css에 넣기 때문에 html에서는 확인이 불가능하다.