구조를 나타내는 요소
<div>: 특정 구역/구획 분할, 묶을때 통용 컨테이너
아래 여러 아이템 구성, CSS 꾸미기 전 아무것도 안보임, "순수" 컨테이너로서 아무것도 표현 x 의미 x
-span과 차이점 : 가로 모든 공간 차지
< span> : "순수" 컨테이너, 인라인 컨테이너, 구문 컨텐츠
시멘틱 웹
-
semantic : 의미의, 의미론적인
요소의 의미를 고려하여, 구조를 설계하고 코드를 작성한다
non-semantic : 의미에 적합한 태그를 고민의미론적인 마크업
< header > : 소개 및 탐색 도움을 주는 콘텐츠. 제목, 로고, 검색폼, 작성자 이름등. 전체 웹페이지 중 하나만
<header><h1></h1></header>
<article>
<header>
<h2>
</h2>
</header>
</article>< footer > : 플로우 콘텐츠, 전체를 아우르는
nav : 탐색 구획요소. 어떤 상위 내용의 아래에 위치하고 있는지, 상위 링크, 현재페이지 내에도 탐색
- 메뉴, 목차, 색인
<nav>
<ul>
<li>
<a></a>
</li>
</ul>
</nav>
현재 웹페이지를 기준으로
aside : 별도 구획 요소, 간접적으로 연관된 부분. 사이드바, 콜아웃 박스
<article>
<p> 인어공주 <p>
<aside> 부가설명 </aside>
<p> 영화정보 </p>
</article>< main > : 주요 콘텐츠 body내에서 1개만. 인터넷 익스플로러 지원 안됨
article : 문서, 페이지, 애플리케이션 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획
ex) 날씨예보 UI - 날짜별 article태그로 표현
- 식별할 수단 필요. 주로 제목 h1~h6 요소
Section : article - section
article과 구분법 : article을 사용할 수 있는가?
목록과 표
-- ul : Unordered List
-- ol : Ordered List -> type: 로마자/알파벳
--li : cell list
dl : dt = term / dd = desc
<dl>
<dt> Beast & Bomin </dt>
<dd> A large Felive ~~~ </dd>
.
.
.
하나의 용어와 하나의 정의 or 여러개의 용어와 여러개 정의