HTML Basic Layout

1. div 가운데 정렬도 display : block; margin-left : auto; margin-right : auto 사용

2. margin은 바깥 여백, padding은 안쪽 여백

3. 모든 div, p, h1, li등은 display: block 속성이 내장되어 있음

4. box-shadow

5. float

• 요소를 공중에 띄워 왼쪽/오른쪽 정렬하는 float 속성

<div>
  <div class="left-box"></div>
  <div class="right-box"></div>
</div>

.left-box {
  width : 100px; 
  height : 100px;
  float : left;
}
.right-box {
  width : 100px; 
  height : 100px;
  float : left;
}

• float를 쓰고나면 항상 clear 속성을 사용
• float: none도 추가해주는 것도 좋음

<div>
  <div class="left-box"></div>
  <div class="right-box"></div>
  <div class="footer"></div>
</div>

.footer {
  clear : both
}