<body>
    <!-- flex 방식 작업시 시멘틱태그로 바꿔줄게요 -->
    <div id="wrap">
        <header id="header"></header>
        <nav id="nav"></nav>
        <main id ="main">
            <aside id="aside"></aside>
            <section id="section"></section>
            <article id="article"></article>
        </main>
            <footer id="footer"></footer> 
    </div>
</body>
<style> 
* {
                    margin: 0;
                    padding: 0;
                }
                body {
                    background-color: #E8F5E9 ;
                }
                /* 블록구조를 가운데정렬 할때 width값과 같이 margin 0 auto 주면됨. */
                /* flex시 랩은  width 값 px로냅둠 */
                #wrap {
                    width: 1200px;
                    margin: 0 auto;      
                }
                #header {
                    height: 100px;
                    background-color: #C8E6C9;
                }
                #nav {
                    height: 100px;
                    background-color: #A5D6A7;
                }
                #main {
                    display: grid;
                    grid-template-columns: 30% 40% 30% ;
                    grid-template-rows: 780px;
                }
                #aside {
                    background-color: #81C784;
                }
                #section{
                    background-color: #66BB6A;
                }
                #article {
                    background-color: #4CAF50;
                }
                #footer {
                    height: 100px;
                    background-color: #43A047;
                    clear: both;
                }
                /* 미디어 쿼리 */
                /* 오류유형01 미디어 쿼리 할때 자식들도 퍼센트로 바꿔주기 */
                @media(max-width : 1300px){
                    #wrap {
                    width: 96%;
                    }
                }
                @media(max-width : 768px){
                    #wrap{
                        width:100%;
                    }
                    /* display :grid는 안갖고와도됨 */
                    #main {
                    grid-template-areas: 
                    "aside section"
                    "article article";
                    grid-template-columns: 30% 70% ;
                    grid-template-rows: 630px 150px;
                    }
                    #aside {
                    grid-area: aside;
                    }
                    #section{
                    grid-area: section;
                    }
                    #article {
                    grid-area: article ;
                    }
        
                    }
                @media(max-width : 480px){
                    #main {
                    grid-template-areas: 
                    "aside"
                    "section"
                    "article";
                    grid-template-columns: 100%;
                    grid-template-rows: 200px 430px 150px;
                    }
                    #aside {
                    grid-area: aside;
                    }
                    #section{
                    grid-area: section;
                    }
                    #article {
                    grid-area: article ;
                    }
                }
</style>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.