[html] 개념 학습 <레이아웃>

 

 

 

 

 

• 와이어 프레임 : 웹/앱의 레이아웃의 뼈대를 그리는 단계
• 목업 : 실물 크기의 모형 즉 실제 제품의 모습과 동일한 HTML문서 내에 하드코딩 하는 방식
• 하드코딩 : 변수 사용 없이 하나하나 HTML문서를 입력하는 것

 

 

HTML 구성하기

1. 수직분할 : 콘텐츠가 가로로 배치될 수 있도록 요소를 배치
2. 수평분할 : 콘텐츠가 세로로 배치될 수 있도록 요소를 배치

 

 

 

 

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

 

 

 

레이아웃 리셋(은근 많이 사용) -초기화

 

 

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}