[HTML CSS] Semantic Web, Semantic Tag

Sementic Web   

Sementic : 의미론적인; 개요를 명확히하기 

말 그래도 관념적인 Web 이다. CSS를 효율성을 높일 수 있는 방법으로 전체적인 레이아웃을 짜고 하는 것이 중요하다. 

레이아웃없이 짜게 되면 그때그때마다 레이아웃을 변경해야하는 번거로움이 있기때문에 개요를 명확히 할 필요가 있다. 

 

여기서 Semntic Web이 등장했다. 

CSS 가독성과 효율성을 높이기 위해 레이아웃을 잡고 시작하는 웹이라고 이해하면 된다. 

글쓰는 과정을 비유한다면, 개요가 명확해지면 글내용만 채우면 되는 것과 같다. 

 

그렇다면 Sementic Tag는 무엇이 있을까? 

 

Sementic Tag

<header> <main> <aside> <footer> 

<header> : 주로 머릿말 제목을 쓸 공간
<main> : 주된 내용이 들어갈 공간 
<aside> : 사이드바로 본문 이외의 공간 
<footer> : 간략한 정보 저작권 등 표시 

<nav> <section> <article> 

<nav> 네비게이션 주로 메뉴에 사용 위치에 영향을 받지 않는 공간 
<section> 본문 콘텐츠를 담고 있는 핵심내용 공간 <section>안에 <section>도 가능 
<article> 실질적인 내용을 담는 공간 <section>은 기사분류 <article> 기사내용 이라고 생각할 것 

<mark> <summary> <detail> <time> ...등등 

<mark> : 강조표시된 텍스트를 정의 이줄에 있으면 형광펜 노란색이 됨. 
<summary> : 디테일요소를 위한 제목설정 공간
<detail>: 사용자가 보거나 숨길 수 있는 추가 세부정보 정의하는 공간
<time> : 날짜 시간 정의하는 공간