흠~~ 간단하게 기존처럼 한번 마크업을 해보았다..;;
<!doctype html>
<html>
<head>
<title> HTML5마크업 </title>
<meta charset="UTF-8">
<style>
hr {display:none;}
img,fieldset {border:0 none;}
dl,ul,ol,li {list-style: none;}
table {border-collapse:collapse;}
input,select,textarea {vertical-align:middle;}
body, td, th {font-size:12px;line-height:1.5;color:#333;font-family:/*"Malgun Gothic",*/ AppleGothic,New Gulim,Gulim,sans-serif;}
em {font-style:normal;}
h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,li,ol,th,td,p,blockquote,form,fieldset,legend {margin:0;padding:0;}
h1,h2,h3,h4,h5,h6,caption {display:none;}
a, a:visited, a:link {text-decoration:none;}
a:active, a:hover {text-decoration:none;}
button {cursor:pointer;}
.clr{clear: both;}
#navi > a {width:100px; }
</style>
</head>
<body style="width:100%;">
<div style="margin:0px auto;width:800px;">
<div style="width:100px;height:200px;float:left;">
<nav id="navi">
<a href="#">왼쪽1</a>
<a href="#">왼쪽2</a>
<a href="#">왼쪽3</a>
<a href="#">왼쪽4</a>
<a href="#">왼쪽5</a>
</nav>
</div>
<div style="width:240px;height:200px;float:left;">
<section>
<h1>첫번째내용</h1>
<p>첫번째는 별거없다.</p>
</section>
<section>
<h1>두번째내용</h1>
<p>두번째도 별거없다.</p>
</section>
<section>
<h1>세번째내용</h1>
<p>세번째도 별거없다.</p>
</section>
<section>
<h1>4번째내용</h1>
<p>4번째는 별거없다.</p>
</section>
<section>
<h1>5번째내용</h1>
<p>5번째는 별거없다.</p>
</section>
</div>
</div>
</body>
</html>
'프로그래밍 > HTML5관련' 카테고리의 다른 글
| 웹용 포토샵~! (0) | 2011.04.20 |
|---|---|
| html5 배우기 사이트 (0) | 2011.03.28 |
| HTML5 관련 사이트 (0) | 2010.10.18 |
| HTML5 캔버스 강좌 유투브 동영상~! (0) | 2010.09.29 |
| (펌)HTML5를 활용하여 빠른 웹 애플리케이션 개발하기 (0) | 2010.09.03 |