WEB/CSS

[CSS] ch04-17. clear

밍글링글링 2017. 8. 28.
728x90

17_clear.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>요안도라</title>
<style>
    @import "../css/17_clear.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>

 

17_clear.css

@CHARSET "UTF-8";
.content{
    float: left;
}
aside{
    float: right;
}
footer{
    clear: both;
}

 

728x90

'WEB > CSS' 카테고리의 다른 글

[CSS] ch04-19. tb  (0) 2017.08.28
[CSS] ch04-18. column  (0) 2017.08.28
[CSS] ch04-16. float  (0) 2017.08.28
[CSS] ch04-15. zindex  (0) 2017.08.28
[CSS] ch04-14. visibility  (0) 2017.08.28

댓글