<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* border 굵기랑 width, margin 길이까지 다 잘 맞춰야지 저렇게 깔끔하게 되는거여*/
div{
border: 3px solid blue;
}
.fix {
overflow: auto;
}
nav {
float: left;
width: 200px;
border: 3px solid #73AD21;
}
section {
margin-left: 206px;
border: 3px solid red;
}
</style>
</head>
<body>
<div class="fix">
<nav>
<span><center>목차</center></span>
<ul>
<li><a target="_blank" href="http://google.com">Google</a></li>
<li><a target="_blank" href="http://www.apple.com">Apple</a></li>
<li><a target="_blank" href="http://www.w3.org">W3C</a></li>
<li><a target="_blank" href="http://oracle.com">Oracle</a></li>
<li><a target="_blank" href="http://adobe.com">Adobe</a></li>
<li><a target="_blank" href="http://amazon.com">Amazon</a></li>
<li><a target="_blank" href="http://Mysql.com">Mysql</a></li>
</ul>
</nav>
<section>
<span>section 1</span>
<p>float 속성은 시맨틱 문서 구조에 유용하게 사용할 수 있습니다. 예를 들면 nav나 aside에 float속성을 추가하면 떠다니는 내비게이션 또는 사이드바를 만들 수 있습니다.</p>
</section>
<section>
<span>section 2</span>
<p>시맨틱 문서 구조에 float 속성을 적용할 때는 footer 부분에 적용되지 않도록 해야 합니다.</p>
</section>
</div>
</body>
</html>
