레이아웃

레이아웃: 각각의 요소를 목적에 맞게 배치하는 것

 

1.와이어프레임
와이어프레임: 웹 또는 애플리케이션을 개발할때 레이아웃의 뼈대를 그리는 단계
와이어프레임은 말 그대로 "와이어로 설계된 모양"을 의미

와이어프레임의 가장 큰 목적은 화면의 영역을 구분하는일이다!
단순한 선이나, 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사한 것
아주 단순하게, 레이아웃과 제품의 구조를 보여주는 용도
전환 효과나, 애니메이션, 사용자 테스트 같은 스타일링 요소나 UX(사용자 경험, User Experience)를 판단하는 것이 아닙니다.

#목업 (Mock-up)
대부분의 산업에서 목업은 실물 크기의 모형을 뜻합니다. 
목업은 실제 제품이 작동하는 모습과 동일하게 HTML 문서를 작성합니다. 
예를 들어, 트윗 작성자, 트윗 내용, 작성한 날짜 등을 HTML 문서 내에 하드코딩하는 방식입니다.

#하드코딩이란?
우리가 역동적인 웹 애플리케이션을 만들기 위해서는, HTML 문서에 트윗 작성자, 내용을 변수로 관리하여 값을 동적으로 담아야 합니다.
그러나 아직 우리는 <div> 요소 내에 변수의 값을 전달하는 방법을 배우지 않았습니다. 
아직은 변수를 이용할 수 없기 때문에, HTML 문서에 아래와 같이 하나하나 입력해야 합니다.
 이런 방식을 하드코딩이라고 합니다.
<div class="writer">김코딩</div>
<div class="content">SNS는 인생의...</div>

와이어프레임과 목업을 작성하는 단계를 반드시 진행해 주세요. 
HTML 문서를 통해 화면을 다 그려보지 않으면, JavaScript를 적용한 완성본이 어떤 형태를 가질지 상상하기 어렵습니다. 
마치 설계도 없이 건물을 짓는 것과 같습니다.

2. 화면을 나누는 방법
#HTML 구성하기
대부분의 경우 콘텐츠의 흐름은 좌에서 우, 위에서 아래로 흐릅니다. 
CSS로 화면을 구분할 때는 수직 분할과 수평 분할을 차례대로 적용하여 콘텐츠의 흐름을 따라 작업을 진행합니다.
첫째, [수직 분할] 화면을 수직으로 구분하여, 콘텐츠가 가로로 배치될 수 있도록 요소를 배치합니다.
둘째, [수평 분할] 분할된 각각의 요소를 수평으로 구분하여, 내부 콘텐츠가 세로로 배치될 수 있도록 요소를 배치합니다.
수평으로 구분된 요소에 height 속성을 추가하면, 수평 분할을 보다 직관적으로 할 수 있습니다.

#레이아웃 리셋
HTML 문서는 기본적인 스타일을 가지고 있습니다. 
때때로 HTML 문서가 갖는 기본 스타일이, 레이아웃을 잡는 데 방해가 되기도 합니다. 
이러한 수요에 따라 초기화(리셋)을 위한 다양한 라이브러리(Normalize.css)가 등장했지만, 
사실 굳이 라이브러리를 사용할 필요는 없으며, 위에 언급한 문제를 해결할 몇 줄의 코드를 적용시키면, 
기본 스타일링을 제거하여 디자인한 대로 레이아웃을 구현할 수 있습니다.