728x90
16_float.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>요안도라</title>
<style>
@import "../css/16_float.css";
body {
font: 14px 맑은 고딕;
}
.content {
background-color: #FFFFFF;
padding-top:5px;
padding-left:10px;
width: 60%;
}
aside{
width: 30%;
height:auto;
background-color:#DFD;
padding-top:20px;
padding-left:10px;
padding-right:10px;
}
footer {
padding: 10px 0;
background-color: #030;
color: #fff;
text-align: center;
}
.container {
width: 90%;
margin: 0 auto;
background-color: #fff;
border: 1px solid #E7E7E7
}
header {
height: 280px;
margin-top: 0;
background-image: url(../img/bg.png);
background-repeat: no-repeat;
background-position: left top;
background-size: cover;
}
h4 {
font-size: 12px;
color: #FF3300;
}
aside img {
display: block;
margin-bottom: 5px;
margin-left: 5px;
}
header, section, footer, aside, article, figure {
display: block;
}
</style>
</head>
<body>
<div class="container">
<section class="content">
<h2>예약 방법 및 요금</h2>
<article>
<h3>¤ 예약 방법</h3>
<p>
요안도라 예약의 가장 빠른 방법은<br> 인터넷 전화 070.4529.8743으로 직접 통화하시거나 문자를
남기시는 것입니다.<br> 인터넷 전화라 시외전화 요금이 부과되지 않습니다.
</p>
</article>
</section>
<aside><!-- 책 본문 내용 중 참고사항 느낌 -->
<img src="../img/1.jpg" alt=""> <img src="../img/2.jpg" alt="">
</aside>
<footer>
<p>제주특별자치도 남제주군 성산읍 수산리 000 번지 요안도라</p>
<p>Copyright ⓒ. All rights reserved.</p>
</footer>
</div>
</body>
</html>16_float.css
@CHARSET "UTF-8";
.content{
float: left;
}
aside{
float: right;
}
728x90
'WEB > CSS' 카테고리의 다른 글
| [CSS] ch04-18. column (0) | 2017.08.28 |
|---|---|
| [CSS] ch04-17. clear (0) | 2017.08.28 |
| [CSS] ch04-15. zindex (0) | 2017.08.28 |
| [CSS] ch04-14. visibility (0) | 2017.08.28 |
| [CSS] ch04-13. fixed (0) | 2017.08.28 |
댓글