<!DOCTYPE html>
<html lang="ko">
<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 type="text/css">
body{
padding:0;
margin:0;
width:100%;
}
#header{
height:20%;
background-color: yellow;
float:left;
margin:0 auto;
position:relative;
}
.class_title{
text-align: center;
}
#snb{width:15%;
height:80%;
background-color: orange;
float: left;
position:relative;
}
#content{
width:85%;
height:80%;
background-color: aqua;
float:left;
position:relative;
}
.photo p{
width:1179px;
height:650px;
background:url(homework/hand.jpg) no-repeat;
text-align: center;
position:relative;
margin:auto;
}
#footer{
width:100%;
height:20%;
background-color: blueviolet;
position:relative;
clear:both;
float:left;
}
</style>
</head>
<body>
<div id="header">
<h1 class="class_title">스마트폰</h1>
<p>
스마트폰은 컴퓨터를 결합한 무선 휴대전화기이다. pc에서 실행되는 운영체제보다 적게 만든 모바일 운영체제를 탑재하여 인터넷 검색, 전자우편, 간단한 문서 편집, 카메라, 오디오 및 비디오 재생 등 pc의 기능을 거의 모두 갖추고 있다.
</p>
</div>
<div id="main">
<div id="snb">
<h2>목차</h2>
<ul>
<li><a href="#">역사</a></li>
<li><a href="#">안드로이드폰</a></li>
<li><a href="#">아이폰</a></li>
<li><a href="#">샘플</a></li>
</ul>
</div>
<div id="content">
<div class="history">
<h2><a href="#">역사</a></h2>
최초의 스마트폰은 사이먼(Symon)으로 추정된다. IBM사가 1992년 설계하여 그해에 미국 네바다 주의 라스베이거스에서 열린 컴댁스에서 컨셉 제품으로 전시되었다.
</div>
<div class="android">
<h2><a href="#">안드로이드</a> </h2>
안드로이드(영어:Android)는 휴대 전화를 비롯한 휴대용 장치를위한 운영 체제와 미들웨어, 사용자 인터페이스 그리고 표준 응용 프로그램(웹 브라우저, 이메일 클라이언트, 단문 메시지 서비스(SNS), 멀티미디어 메시지 서비스(MMS)등)을 포함하고 있는 소프트웨어 스택이자 모바일 운영 체제이다.
</div>
<div class="iphone">
<h2><a href="#">아이폰</a></h2>
아이폰(영어:iphone)은 2007년 1월 9일, 애플이 발표한 휴대전화 시리즈이다. 미국 샌프란시스코에서 열린 맥월드 2007에서 애플 창업자 중 한명인 스티브 잡스가 발표햤다.
</div>
<div class="photo">
<h2>샘플</h2>
<p class="class_photo">스마트폰샘플</p>
</div>
</div>
</div>
<div id="footer">
<h4><a href="#">설문조사</a></h4>
<p>copyright</p>
</div>
</body>
</html>
css 영역에서 snb 영역을 footer까지 내리고 싶은데 어떻게 해야할까요?
