Summary

웹, 앱의 레이아웃을 어떻게 구성할 것인가.
결국 사람을 연구해야 할 것이다.

Layout

공간에 각 구성요소를 목적에 맞게 배치하는 것

와이어 프레임

원래 의미: 컴퓨터 그래픽에서 3차원 물체 형상을 나타내기 위해 물체의 형상을 수 많은 선의 모임으로 표시하여 입체감을 나타낸 것.

웹에서의 와이어 프레임: 웹, 앱 개발 시, 레이아웃의 뼈대를 그리는 단계
와이어 프레임은 단순하게 레이아웃과 제품의 구조를 보여준다. 이는 어떤 목적을 갖는 프로그램인지 유추하게 돕는다.

목업(Mock-up)

실물 크기의 정적 모형
웹, 앱에서의 목업 = HTML 문서 내 하드코딩
하드코딩: 데이터를 코드 내부에 직접 입력하는 것. => 값을 고정시켜 놓는 것
소프트코딩: 값이 고정되지 않고 가변적인 것.
만약 역동적인 앱을 생성한다면, 값을 동적으로 담아야 한다.
목업 단계에서는 아직 변수 입력을 모르기 때문에, HTML 문서에 값을 하나하나 입력해야 한다.

와이어 프레임과 목업은 건물을 지을 때 설계도를 디자인하는 것과 같다.

화면 분할

콘텐츠의 흐름 1. 좌 - 우 / 2. 상 - 하
CSS 화면 구분: 수직분할, 수평분할

수직분할: 화면을 수직으로 구분(콘텐츠 가로 배치)
수평분할: 분할된 요소를 수평으로 구분(내부콘텐츠 세로 배치)

레이아웃 리셋

HTML 문서는 기본적인 스타일을 갖고 있다.
정확히 (0,0)에서 시작하고 싶다면, body 태그가 갖는 기본 스타일의 여백을 CSS 코드로 바꿔야 한다.

• {
  box-sizing: border-box;
  }

body {
margin: 0; -> body의 외부 여백을 0
padding: 0; -> body의 내부 여백을 0
}