display:flex / step3

by Kim Ara

HTML

<div id="wrap">
  
  <header>헤더</header>
  
  <section id="sec-area1">
    <div class="cont1">슬라이더</div>
    <div class="cont2">갤러리</div>
    <div class="cont3">인기 검색어</div>
  </section>
  
  <section id="sec-area2">
    <div class="cont5">최근 글</div>
    <div class="cont4">인기 글</div>
    <div class="cont3">배너</div>
    <div class="cont2">소셩 네트워크</div>
  </section>
  
  <footer>푸터</footer>
  
</div>

CSS

*{margin:0;padding:0}
header{width:100%;height:44px;background:red;color:#fff}
section{display:flex;width:100%;max-width:1280px;height:300px;margin:0 auto;color:#fff}
section div{width:33.3%}
footer{width:100%;height:50px;background:#000;color:#fff}
.cont1{background:blue}
.cont2{background:green}
.cont3{background:pink}
.cont4{background:yellow}
.cont5{background:purple}