interactive
HTML5로 레이아웃 제작하기 본문
*소스코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Menu | System</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
<style>
/* common */
html,body{width:100%;height:100%}
html{overflow-y:scroll}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,form,fieldset,p,button{margin:0;padding:0}
body,h1,h2,h3,h4,input,button{font-family:NanumGothicWeb,verdana,dotum,Helvetica,sans-serif;font-size:13px;color:#383d41}
body{background-color:#fff;*word-break:break-all;-ms-word-break:break-all}
img,fieldset,iframe{border:0 none}
li{list-style:none}
/* layout */
#wrap{width:760px;margin:0 auto}
header{margin-top:20px;padding:20px;border:1px solid #000;background:#474747}
hgroup{overflow:hidden;padding-bottom:20px}
hgroup h1{float:left;font-size:18px;color:#fff}
hgroup h2{float:right;font-weight:normal;color:#fff;opacity:0.8}
nav{clear:both;overflow:hidden}
nav li{float:left;padding-right:5px;font-family:verdana}
nav li span{display:inline-block;padding:3px 10px;border-radius:5px;background-color:#fff}
section{float:left;width:518px;margin-top:15px;margin-bottom:20px;padding:20px;border:1px solid #ccc;line-height:20px}
article{margin-bottom:20px}
article h3{font-size:16px}
aside{float:right;width:163px;padding:10px;margin-top:15px;border:1px solid #ccc;line-height:20px}
aside .ad{height:100px;margin-bottom:20px;background-color:#ebebeb}
footer{clear:both;padding:20px;border:1px solid #ccc}
</style>
</head>
<body>
<div id="wrap">
<header>
<hgroup>
<h1>html5 레이아웃 제작하기</h1>
<h2>ek study</h2>
</hgroup>
<nav>
<ul>
<li><span>header tag</span></li>
<li><span>hgroup tag</span></li>
<li><span>nav tag</span></li>
<li><span>article tag</span></li>
<li><span>section tag</span></li>
<li><span>aside tag</span></li>
<li><span>footer tag</span></li>
</ul>
</nav>
</header>
<section>
<article>
<h3>header tag</h3>
소개 또는 내비게이션 그룹을 나타냅니다.
</article>
<article class="aritldi">
<h3>hgroup tag</h3>
섹션의 제목을 나타냅니다. 이 요소는 섹션의 제목이 몇 개의 레벨을 가질 때(단계를 가질 때, 예를 들어 부제목이나 태그 영역tagline 등)h1~h6 요소들을 그룹짓기 위해 사용됩니다.
문서에서 중요한 뼈대가 어떤것인지를 쉽게 알 수 있도록 합니다.
</article>
<article>
<h3>nav tag</h3>
다른 페이지 또는 동일 페이지의 다른 부분으로 이어주는 섹션, 즉 내비게이션 링크로 구성된 섹션을 나타냅니다.
(웹사이트나 페이지내 메뉴 영역을 정의)
</article>
<article>
<h3>article tag</h3>
문서나 페이지, 또는 사이트의 독립적인 부분을 구성하는 섹션을 나타냅니다.
이것은 포럼에 올라온 글, 잡지나 신문의 기사, 블로그 항목, 사용자가 제시한 의견, 상호작용적인 위젯이나 가젯, 기타 모든 독립 아이템일 수 있습니다.
</article>
<article>
<h3>section tag</h3>
일반 문서나 프로그램의 섹션(제목으로 시작하는 컨텐츠의 의미적 그룹)을 나타냅니다.
제목을 붙여서 콘텐츠 그룹을 정의.
스타일 적용이나 스크립트를 사용하기 위해 콘텐츠 중 일부를 묵고싶다면.
</article>
<article>
<h3>aside tag</h3>
요소는 주위 요소의 내용과 접점을 이루는 섹션으로, 보통 사이드바 형태로 표현됩니다
본문을 표시하고 남는 내용을 정의.
관련페이지, 콘텐츠, 사이드바, 답글 영역, 전체 인용, 용어집 등..
</article>
<article>
<h3>footer tag</h3>
문서나 글의 꼬리말 부분에 해당하는 영역을 정의
</article>
</section>
<aside>
<p class="ad">광고</p>
<ul>
<li><b>div tag</b> : 특별한 의미를 가지고 있지 않은 영역 구분.</li>
<li><b>html5란?</b></li>
<li><b>css3란?</b></li>
</ul>
</aside>
<footer>
<address>by ek</address>
</footer>
</div>
</body>
</html>
'Design' 카테고리의 다른 글
| HTML5 Canvas 기본형태 (0) | 2012.10.31 |
|---|---|
| HTML5 Canvas 소개 (0) | 2012.10.29 |
| HTML5 DTD설정하기 (0) | 2012.09.05 |
| [HTML5] 사이트로 제작한 사이트들 (0) | 2012.08.27 |
| [CSS3] border-radius 속성알아보기 (0) | 2012.08.24 |
