Notice
Recent Posts
Recent Comments
Link
250x250
«   2025/04   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30
Archives
Today
Total
250x250
관리 메뉴

안뇽

[HTML] layout example 2 본문

개발소발/퍼블리셔

[HTML] layout example 2

Domni 2021. 6. 1. 16:02
728x90
728x90
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Layout</title>
        <style>
            * {padding:0; margin:0;}
            body {background-color: #fdfff5;}
            #wrap {width: 1200px; margin:0 auto;}
            header {width: 100%; height: 150px; background-color: #124512;}
            aside {float:left; width: 30%; height: 700px; background-color: #268826;}
            section {float:left; width: 70%; height: 700px; background-color: #48eb45;}
            footer {clear: both; width: 100%; height: 150px; background-color: #c1eba5;}

            /*화면 너비 0~1200px*/
            @media (max-width: 1220px) {
                #wrap {width: 95%;}
            }
             /*화면 너비 0~768px*/
            @media (max-width: 768px) {
                #wrap {width: 100%;}
            }
            /*화면 너비 0~480px*/
            @media (max-width: 480px) {
                #wrap {width: 100%;}
                header {height: 300px;}
                aside {float: none; width: 100%; height: 300px;}
                section {float: none; width: 100%; height: 300px;}
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <header></header>
            <aside></aside>
            <section></section>
            <footer></footer>
        </div>
    </body>
</html>

 

 

728x90
320x100

'개발소발 > 퍼블리셔' 카테고리의 다른 글

[HTML] layout example 3  (0) 2021.06.01
[HTML] 미디어쿼리 기본  (0) 2021.06.01
[HTML] layout example 1  (0) 2021.06.01
'개발소발/퍼블리셔' Related Articles more
Comments