프로그래밍/HTML5관련

html5 nav태그 테스트~!!!

긴자손-1 2010. 10. 18. 16:24
반응형

흠~~ 간단하게 기존처럼 한번 마크업을 해보았다..;; 


<!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>

하지만 css가 먹지 않는다...ㅠㅠ 왜일까~? 하는 고민고민에 display:block를 넣어봤따... 

그제 서야 먹는다.. 흠~~ nav안에 있는 a태그는 display:block가 있어야 먹나보다... 흠흠..;;

테스트 브라우저 - FF : 3.6.10 , 크롬 : 6.0.472.63, 사파리 : 5.0 

반응형