<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
html,body{
width: auto;
height: auto;
padding: 0; margin: 0;}
#header{
background-color: yellow;
width: 100%;
height: 20%;
padding-bottom: 10px;}
h1{
text-align: center; margin: 0;}
#nav{background-color: orange;
width: 20%;
height: 50%; float: left;}
#section{background-color:lightblue;
width: 80%; height: 72%; float: left;}
#footer{background-color: plum; clear:both;
width:100%; height: 8%; padding: 20px 0px 20px 0px;}
</style>
<body>
<div id="header">
<h1>스마트폰</h1>
<p>스마트폰은 컴퓨터를 결합한 무선 휴대전화기이다. PC에서 실행되는 운영체제보다 작게 만든 모바일 운영체제를 탑재하여
인터넷 검색, 전자우편, 간단한 문서 편집, 카메라, 오디오 및 비디오 재생 등 PC의 기능을 거의 모두 갖추고 있다.
</p>
<audio src="media/EmbraceableYou.mp3" controls autoplay hidden></audio>
</div>
<div id="nav">
<h2>목차</h2>
<ul>
<li><a href="#history">역사</a></li>
<li><a href="#android">안드로이드폰</a></li>
<li><a href="#iphone">아이폰</a></li>
<li><a href="#sample">샘플</a></li>
</ul>
</div>
<div id="section">
<h2 id="history">
<a href="https://ko.wikipedia.org/wiki/%EC%8A%A4%EB%A7%88%ED%8A%B8%ED%8F%B0" target="_blank">역사</a>
</h2>
<p>최초의 스마트폰은 사이먼(Symon)으로 추정된다. IBM사가 1992년에 설계하여 그 해에 미국 네바다 주의 라스베이거스에서
열린 컴댁스에서 컨셉 제품으로 전시되었다.</p>
<h2 id="android">
<a href="https://ko.wikipedia.org/wiki/%EC%95%88%EB%93%9C%EB%A1%9C%EC%9D%B4%EB%93%9C" target="_blank">안드로이드</a>
</h2>
<p>안드로이드(영어: Android)는 휴대 전화를 비롯한 휴대용 장치를 위한 운영 체제와 미들웨어, 사용자 인터페이스 그리고
표준 응용 프로그램(웹 브라우저, 이메일 클라이언트, 단문 메시지 서비스(SMS), 멀티미디어 메시지 서비스(MMS)등)을 포함하고 있는
소프트웨어 스택이자 모바일 운영 체제이다.</p>
<h2 id="iphone">
<a href="https://ko.wikipedia.org/wiki/%EC%95%84%EC%9D%B4%ED%8F%B0" target="_blank">아이폰</a>
</h2>
<p>아이폰(영어: iphone)은 2007년 1월 9일, 애플이 발표한 휴대 전화 시리즈이다.
미국 샌프란시스코에서 열린 맥월드 2007에서 애플의 창업자 중 한명인 스티브 잡스가 발표했다.</p>
<h2 id="sample">샘플</h2>
<table>
<caption>스마트폰샘플</caption>
<tbody>
<tr>
<td><img src="media/galaxys7.png" width="100" height="200"></td>
<td><img src="media/iphone6.png" width="100" height="180"></td>
<td><img src="media/tizen.png" width="100" height="150"></td>
<td><img src="media/windowphone.PNG" width="100" height="180"></td>
<td><img src="media/nokia.PNG" width="100" height="200"></td>
</tr>
</tbody>
</table>
</div>
<div id="footer">
<a href="survey3.html" target="_blank">설문조사</a>
<p>Copyright 2017 by Kitae</p>
</div>
</body>
</head>
</html>
처음 body에서 width와 height를 100%라 두니 section의 스마트폰 사진 부분이 footer에 겹치게 되었고
너비 길이를 auto로 두니 겹치는 부분은 사라졌지만 nav의 영역이 72% 적용이 안 되는 상황이 되었습니다.
nav의 길이를 72%가 되게 하려면 어떻게 해야할까요?
