[Wireframe]레이아웃

프레임워크(framework)

레이아웃의 뼈대를 그리는 단계

영역에서 사용할 주요 태그를 메모하는 형식으로 와이어프레임 작성

---

HTML 구성하기

[수직 분할] 화면을 수직으로 구분, 콘텐츠가 가로로 배치 [수평 분할] 분할된 요소를 수평으로 구분, 내부 콘텐츠가 세로로 배치, 수평으로 구분된 요소에 height 속성을 추가하면 직관적

<div id="container">
  <div class="col w20">
    <div class="icon">아이콘 1</div>
    <div class="icon">아이콘 2</div>
  </div>
  <div class="col w40">
    <div class="row h40">영역1</div>
  </div>
  <div class="col w50">
    <div class="row h80">영역2</div>
    <div class="row h20">영역3</div>
  </div>
</div>

.w20 {
  width: 20%;
}
.h20 {
  height: 20%;
}

---