WEB, boostcourse, FE, css layout-2

배경색이 사라지게 된 이유?

[원인] float를 사용했기 때문에 떠있게 되고, .wrap는 .left와 .right를 자기 자식으로 생각하지 않게 되었다 [해결] overflow 속성을 주면 float를 자기 자식으로 인식하게 되어있다

footer가 올라오는 이유?

[원인] .left와 .right가 float를 사용했기 때문에 떠있게 되고, 빈 부분에 footer가 채우러 올라가게 되었다 [해결] clear:left 또는 right/both를 사용해서 left를 인식해서 올라가지 않도록 한다

<header>부스트코스는 정말 유익합니다.</header>
<div id="wrap">
   <nav class="left">
      <ul>
         <li>menu</li>
         <li>home</li>
         <li>name</li>
      </ul>
   </nav>
   <div class="right">
      <h2>
         <span>반가워요!</span>
         <div class="emoticon">:-)</div>
      </h2>
   <ul>
      <li>crong</li>
      <li>jk</li>
      <li>honux</li>
      <li>pobi</li>
   </ul>
   </div>
   <div class="realright">
      oh~ right
   </div>
</div>
<footer>코드스쿼드(주)</footer>

li {
   list-style:none;
}

header {
   background-color : #eee;
}

#wrap {
   overflow:auto;
   margin:20px 0px;
}

.left, .right, .realright {
   float:left;
   height: 200px;
}

.left {
   width:17%;
   margin-right:3%;
   background-color : #47c;
}

.right {
   width : 60%;
   text-align:center;
   background-color : #47c;
}

.realright {
   width: 17%;
   margin-left:3%;
   background-color : #67c;
}

.right > h2 {
   position:relative;
}

.right .emoticon {
   position:absolute;
   top:0px;
   right:5%;
   color:#fff;
}

footer {
   background-color : #eee;
   clear:left;
}

---

Reference

• [6) float 기반 샘플 화면 레이아웃 구성] https://www.edwith.org/boostcourse-web/lecture/16678/
• [온라인 실습] http://jsbin.com