레이아웃이란?
웹사이트 내 각각의 요소를 목적에 맞게 배치하는 것을 '레이아웃' 이라고 한다.
와이어프레임
웹 또는 어플리케이션을 개발할 때 레이아웃의 뼈대를 그리는 단계를 의미한다.
이는 단순한 선이나, 도형으로 웹, 앱의 인터페이스를 시작으로 묘사한 것으로 UX를 반영한 복잡한 설계도가 아닌 아주 단순한 제품의 구조 를 보여주는 용도이다.
- 이때, 레이아웃의 가장 큰 목적은 화면의 영역을 구분하고 해당 영역의 주요 태그를 메모 하는 것이다.
목업이란?
산업에서 목업은 실물 크기의 모형을 의미한다.
그렇다면, 웹이나 앱에서는 목업을 어떻게 만들까?
이는 실제 제품과 동일하게 HTML 문서를 작성하는 방식으로 제작한다. 이때 HTML 문서가 실제로 작동하는 것처럼 태그 내부에 모든 내용을 직접 입력하는 하드코딩 방식으로 작성한다.
화면을 나누는 방법?
CSS로 화면을 구분할 때는 수직 분할 과 수평 분할 을 차례로 적용한다.
이때, HTML 문서는 기본적인 스타일을 가지고 있으므로 정확한 레이아웃 구성을 위해 해당 스타일을 초기화할 필요가 있다. 예시는 다음과 같다.
- body 요소에 존재하는 기본 여백을 제거하기 위해
body {
padding : 0px;
margin : 0px;
}- box-sizing의 기본 값으로 인해 width, height를 파악하기 어려운 경우
* {
box-sizing : border-box;
}이 외에도 브라우저마다 상이한 여백 및 글꼴 등등이 있다...
성장하는 개발자, 이민훈입니다.