Notice
Recent Posts
Recent Comments
Link
«   2024/05   »
일 월 화 수 목 금 토
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 31
Tags more
Archives
Today
Total
관리 메뉴

블로그

flex로 레이아웃짜기 본문

웹디자인기능사

flex로 레이아웃짜기

오구리 2020. 9. 8. 00:34 
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            outline: 1px solid red;
        }

        .wrap {
            width: 1200px;
            margin: 0 auto;
        }
        .top{
            height: 100px;
            display: flex;
        }
        .top1{
            flex: 1;
        }
        .top2{
            flex: 6;
        }
        .ban{
            height: 300px;
        }
        .cont{
            height: 200px;
            display: flex;
        }
        .cont>div{
            flex: 1;
        }
        .info{
            height: 100px;
            display: flex;
        }
        .info1{
            flex: 1;
        }
        .info2{
            flex: 6;
        }
        .info3{
            flex: 1;
        }

    </style>
</head>

<body>


    <div class="wrap">
        <header class="top">
            <div class="top1"></div>
            <div class="top2"></div>
        </header>
        <section class="ban"></section>
        <section class="cont">
            <div class="con1"></div>
            <div class="con2"></div>
            <div class="con3"></div>
        </section>
        <footer class="info">
            <div class="info1"></div>
            <div class="info2"></div>
            <div class="info3"></div>
        </footer>
    </div>

</body>

float익히느라

미쳐 해보지도못한 flex로 레이아웃짜기

정말 쉽다...

 

정말 구세주여..

 

저작자표시

'웹디자인기능사' 카테고리의 다른 글

저도 해냈습니다 여러분!! 웹디자인기능사 3회 실기 합격후기!!♡(+공부팁)  (0) 2020.09.26
웹디자인기능사 실기 3회차 시험후기!  (0) 2020.09.07
웹디자인기능사 시험전 마지막날 연습 - on쇼핑몰  (0) 2020.09.06
웹디자인기능사 실기 9일차 A-2유형 남율건설  (0) 2020.09.05
웹디자인기능사 실기8일차 - c-3유형 해변빛축제  (0) 2020.09.02
'웹디자인기능사' Related Articles more