ReSet ORIGINAL
[CSS] HTML5 레이아웃 예제 소스 목록
  • 글쓴이 : IN-BEST 작성일 : 13-09-09 16:35 조회 : 12,152
\\ Source Explanation
HTML5 레이아웃 예제 소스
Source Code

 
<!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>
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}
#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>
 
· 출처 : 그누보드- 허본좌
10.0 (1명)
평가해주세요. 비회원 가능!