[코드스테이츠] 백엔드 부트캠프 4일

[회고]

오늘은 css flexbox를 실습해서 페이지 레이아웃을 잡아봤다. 사실 예전에 백엔드 개발자는 html, css를 잘 몰라도 되는 줄만 알았는데, 입력으로 데이터를 어디서 받아야 되고, form 태그의 경우 페이지 이동 액션이 들어가기 때문에 동작원리를 알아야 백엔드 작업을 제대로 할 수 있다.  레이아웃을 연습한 다음에는 와이어프레임 만드는 방법과 목업에 대한 정의를 배웠다. 

 

[페이지 레이아웃]

• HTML만으로도 레이아웃을 잡을 수 있지만 html 요소에는 기본적으로 스타일이 들어가 있기 때문에 정확한 레이아웃을 작성하기 힘들다.
• 따라서 html 기본 스타일을 제거하는 아래의 코드와 flexbox를 이용한 css 파일에서 레이아웃을 작성할 수 있다.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

• flexbox로 레이아웃을 구성한다: 박스를 유연하게 늘리거나 줄여서 레이아웃을 잡는 방법
• display: flex
  • 부모 요소의 속성으로 사용해서 자식 박스 요소의 방향과 크기를 결정한다.
  • 디폴트 값으로 자식요소를 왼쪽에서 오른쪽으로 배치

[콘텐츠 정렬하기]

• justify-content: 자식 박스 수평 정렬하기 
  • 부모 박스 속성
• align-items: 자식 박스 수직 정렬하기
  • 부모 박스 속성
• flex-direction: 자식 요소들의 정렬 방향을 정합니다.
  • 부모 박스 속성
• order: 자식 요소들의 순서를 정합니다.
  • 자식 박스 속성
• flex-wrap: 한 줄에 정렬할지 여러 줄에 정렬할지 정합니다.
  • 부모 박스 속성
• align-content: 여러 줄 사이의 간격을 정합니다.
  • 부모 박스 속성

 

[와이어 프레임(WireFrame)]

 

와이어프레임이란 앱을 개발하기 앞서 앱의 뼈대를 말합니다. 와이어프레임을 보면 앱의 단순한 인터페이스를 알 수 있습니다. 

• 와이어프레임의 목적은 화면 영역을 시각적으로 구분하는 것입니다.
• 활자, 스타일, 색상이 부족합니다. 화면의 어떻게 생겼는지가 아니라 어떤 역할을 하는지에 집중합니다.
• 각 영역의 태그와 id, class를 작성할 수 있습니다.

 

[목업(Mock Up)]

 

목업이란 실물 크기의 모형을 의미합니다. 

• 웹, 앱 제품은 HTML과 CSS를 이용하여 목업을 만듭니다.
• 기능적인 동작은 하지 않습니다.
• 실물과 비슷한 화면을 구성합니다.