layout 연습01

layout 연습01

1. 연습해볼 사이트를 찾는다.
2. 사이트를 분해하여 보자.
3. 레이아웃을 잡아보자
4. header, nav, main으로 나누어 보자
5. main을 section, aside으로 나누어 보자
6. section을 article1, article2, article3으로 나누어 보자
7. aside을 article4, article5으로 나누어 보자
8. 레이아웃을 표시해 보자

HTML

<div id="all">
    <header id="header">검색공간</header>
    <nav id="nav">메뉴</nav>
    <main id="main">
        <section id="section">
            <article class="article1">광고</article>
            <article class="article2">뉴스</article>
            <article class="article3">광고</article>
        </section>
        <aside id="aside">
            <article class="article4">로그인</article>
            <article class="article5">광고</article>
        </aside>
    </main>
</div>

CSS

* {
    margin: 0;
    padding: 0;
    font-size: 50px;
}
body {
    background-color: #F1F8E9;
}
#all {
    width: 1190px;
    height: 1080px;
    margin: 0 350px 0 380px;
}
#header {
    width: 1190px;
    height: 160px;
    background-color: #DCEDC8;
}
#nav {
    width: 1190px;
    height: 60px;
    background-color: #C5E1A5;    
}
#main {
    height: 860px;
    display: flex;
}
#main #section {
    width: 800px;
}
#main #section .article1{
    width: 800px;
    height: 155px;
    background-color: #AED581;
}
#main #section .article2{
    width: 800px;
    height: 400px;
    background-color: #9CCC65;
}
#main #section .article3{
    width: 800px;
    height: 305px;
    background-color: #8BC34A;
}
#main #aside {
    height: 860px;
}
#main #aside .article4 {
    width: 390px;
    height: 155px;
    background-color: #7CB342;
}
#main #aside .article5 {
    width: 390px;
    height: 705px;
    background-color: #CCFF90;
}