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 3 본문

개발소발/퍼블리셔

[HTML] layout example 3

Domni 2021. 6. 1. 16:04
728x90
728x90
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>layout2</title>
        <style>
            * {margin:0; padding:0;}
            #wrap { width : 100%; }
            header { width: 100%; height: 150px; background-color: #81c784;}
            aside { float: left; width : 30%; height: 700px; background-color: #66bb6a;}
            section { float: left; width : 40%; height: 700px; background-color: #4caf50;}
            article { float: left; width :30%; height: 700px; background-color: #43a047;}
            footer { clear:both; width: 100%; height: 150px; background-color: #388e3c;}

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

728x90
320x100

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

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