[Section1] 페이지 레이아웃(Page Layout), 웹, 앱 화면 설계하기

수직분할과 수평분활

CSS로 화면을 구분할 때에는 수직분할과 수평분할을 차례대로 적용하여 콘텐츠의 흐름을 따라 작업을 진행합니다. 수직분할은 화면을 수직으로 분할하는 것으로, 콘텐츠는 가로로 배치가 됩니다. 그 후 분할된 요소를 수평으로 구분하여, 내부 콘텐츠가 세로로 배치되도록 합니다.

부모 요소에 display: flex;가 적용된 상태에서 정렬 축을 먼저 정한다.

flex-direction 속성은 부모 요소에 설정해주는 속성으로, 자식 요소들을 정렬할 정렬 축을 정함. 아무 설정도 하지 않으면 기본적으로 가로 정렬

• row
• column
• row-reverse
• column-reverse

flex-wrap 속성은 하위 요소들의 크기가 상위 요소의 크기를 넘으면 자동 줄 바꿈을 할 것인지 정함. 설정해주지 않으면 줄 바꿈을 하지 않음.

• nowrap
• wrap
• wrap-reverse

justfy-content 속성은 자식 요소들을 축의 수평 방향으로 어떻게 정렬할 것인지 정함.

• flex-start
• flex-end
• center
• space-between
• space-around

align-items 속성은 자식 요소들을 축의 수직 방향으로 어떻게 정렬할 것인지 정함.

• stretch
• flex-start
• flex-end
• center
• baseline

위 내용까지는 부모요소에게 적용해야 하는 속성들이었다면 아래 내용은 자식 요소에 적용해야 하는 flexbox 속성이다

flex 속성에는 세 가지 값을 지정해줄 수 있음 각 값이 의미하는 내용은 flex: grow(팽창지수) shrink(수축 지수) basis(기본크기)
grow(팽창 지수)는 요소의 크기가 늘어나야 할 때 얼마나 늘어날 것인지, shrink(수축 지수)는 요소의 크기가 줄어들어야 할 때 얼마나 줄어들 것인지, basis(기본 크기)는 늘어나고 줄어드는 것과 상관없이 요소의 기본 크기는 얼마인지를 의미함

자식 요소에 flex 속성을 따로 설정해주지 않으면 기본값이 적용됨
flex: 0 1 auto;

웹, 앱 화면 설계

oven 사이트에서 당근마켓 중고거래 상품내역 화면의 와이어 프레임 설계