aaa
a<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
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>목차</span>
<ul>
<li><a href="http://www.google.com" target="_blank">Google</a></li>
<li><a href="http://www.apple.com" target="_blank">Apple</a></li>
<li><a href="http://www.w3.org" target="_blank">W3C</a></li>
<li><a href="http://www.oracle.com" target="_blank">Oracle</a></li>
<li><a href="http://www.adobe.com" target="_blank">Adobe</a></li>
<li><a href="http://www.amazon.com" target="_blank">Amazon</a></li>
<li><a href="http://www.Mysql.com" target="_blank">Mysql</a></li>
<li><a href="http://www.ptu.ac.kr" target="_blank">2018142055김민성</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>