05.24

 #footer {width: 1200px; display: flex;;}
        #footer .logo {width: 20%; height: 100px; background-color: aliceblue;}
        #footer .menu {width: 80%; height: 50px; background-color: antiquewhite;}
        #footer .copyright {width: 80px; height: 50px; background-color: aqua;}

 

---

 

이럴때는 css를 어떻게 쓰면 좋을까?

: footer menu와 footer copyright를 한번 더 감싼걸 쓴다!

 

#footer {width: 1200px; display: flex;;}
        #footer .logo {width: 20%; height: 100px; background-color: aliceblue;}
        .footer_right {width: 80%;}
        .footer_right .menu {width: 100%; height: 50px; background-color: antiquewhite;}
        .footer_right .copyright {width: 100%; height: 50px; background-color: aqua;}

 

---

 

이제 B유형 연습

<div id="wrap">
        <header id="header">
            <div class="header_container">
                <h1 class="logo"></h1>
                <div class="nav"></div>
            </div>
        </header>

 #wrap {width: 100%;}
        #header {width: 100%; height: 100px; background-color: #aaa;}
        #header .header_container {width: 1200px; margin: 0 auto; display: flex;}
        #header .header_container .logo {width: 20%; height: 100px; background-color: rgb(251, 115, 115);}
        #header .header_container .nav {width: 80%; height: 100px; background-color: rgb(255, 184, 184);}

 

header안의 logo와 nav를 header_container로 묶어줘야 하는이유.

: 전체 브라우저 너비는 100%인데, 실제 내용이 들어가는 영역은 가운데 정렬된 1200px이기 때문에,

header는 브라우저 전체 너비를 담당하고,

header_container는 안쪽의 1200px 가운데 정렬 영역을 담당하게 만들기 위해서.