3. 레이아웃 : 화면 나누는 법

[레이아웃 : 화면을 나누는 방법]

1. HTML 구성하기

대부분의 경우 콘텐츠의 흐름은 좌 > 우, 상 > 하 로 진행된다.

CSS로 화면을 구분할 때에는 수직분할/수평분할을 차례대로 적용하여 콘텐츠의 흐름에 따라 작업을 진행.

 

a.     수직 분할 : 화면을 수직으로 구분하여, 콘텐츠가 가로로 배치될 수 있도록.

b.     수평 분할 : 분할된 각각의 요소를 수평으로 구분하여, 내부 콘텐츠가 세로로 배치될 수 있도록.

 

[Flexbox로 레이아웃 잡기]

박스를 유연하게 늘리거나 줄여 레이아웃을 잡는 방법.

 

1.display: flex 분석하기

display: flex 는 부모 박스 요소에 적용해, 자식 박스의 방향과 크기를 결정하는 레이아웃 구성 방법.

 

EX) <div>요소를 자식으로 가진 <main>.

<main>

         <div>box1</div>

         <div>box2</div>

         <div>box3</div>

</main>

 

EX) CSS로 <main>에 빨간색 점선, <div>에 초록색 실선으로 테두리 설정과 전체적으로 margin, padding 10픽셀.

main {

  border: 1px dotted red;

}

div {

  border: 1px solid green;

}

* {

  margin: 10px;

  padding: 10px;

}

<출력 결과>

여기서 부모 요소 <main>에 display: flex 속성 적용.

main {

  **display: flex;**

  border: 1px dotted red;

}

...

<출력 결과>

이처럼 Flexbox속성들을 활용하면 요소의 정렬, 요소가 차지하는 공간을 설정해줄 수 있다.

[부모 요소에 적용해야하는 Flexbox 속성들]

 

[1. flex-direction: 정렬 축 정하기]

Flex-direction 속성은 부모 요소에 설정해주는 속성, 자식 요소들을 정렬할 정렬 축을 정한다.

아무 설정도 해주지 않으면, 기본적으로 가로 정렬.

 

Row (기본값) : 좌 > 우 정렬

Column (세로) : 상 > 하 (좌측부터)

Row-reverse : 우 > 좌

Column-reverse : 하 > 상 (좌측부터)

 

[2. flex-wrap : 줄 바꿈 설정하기]

Flex-wrap 속성은 하위 요소들의 크기가 상위 요소의 크기를 넘으면 자동 줄 바꿈을 할 것인지 정한다.

아무 설정도 해주지 않으면, 줄 바꿈을 하지 않는다.

 

 [3. Justify-content: 축 수평 방향 정렬]

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

요소들이 가로로 정렬되어 있다면 어떻게 정렬할 것인지, 세로 정렬이면 어떻게 정렬할 것인지 정하는 속성.

주요 속성값으로는 flex-start, flex-end, center, space-between, space-around가 있다.

 

 [4. Align-items : 축 수직 방향 정렬]

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

요소들이 가로로 정렬되어 있다면 세로 방향으로는 어떻게 정렬할 것인지,

세로로 정렬되어 있다면 가로 방향으로 어떻게 정렬할 것인지를 정하는 속성.

주요 속성값으로 stretch, flex-start, flex-end, center, baseline 이 있다.

 

 

[Flex 속성의 하위 속성]

 

-자식 요소에 적용해야 하는 Flexbox 속성-

 

[1. Flex 속성의 값]

Flex 속성에는 세 가지 값을 지정해줄 수 있다.

 

[1-1. Grow(팽창지수)] : 크기가 늘어나야 할 때 얼마나 늘어날 것인지를 의미.

>> 팽창지수는 자식 요소의 grow값/자식 요소들의 grow값의 총합의 비율로 빈 공간을 가져감.

절대적 크기가 아닌 총합에서의 비율로 빈 공간을 차지.

 

[1-2. Shrink(수축지수)] : 크기가 줄어들어야 할 때 얼마나 줄어들 것인지를 의미.

>> 동일하게 총합에서의 비율로 빈 공간을 차지. grow속성으로 비율 변경 시, shrink는 기본값인 1로 두어도 무방.

 

[1-3. Basis(기본크기)] : 늘어나고 줄어드는 것과 상관없이 요소의 기본 크기는 얼마인지를 의미.

>> 자식 박스가 flex-grow나 flex-shrink에 의해 늘어나거나 줄어들기 전에 가지는 기본 크기.

Flex: grow shrink basis, flex: 0 1 auto.

Or

flex-grow: 0;

flex-shrink: 1;

flex-basis: auto;

 

grow속성 값이 0인 경우에만, basis 속성의 값이 유지된다.

Width와 flex-basis를 동시에 적용하는 경우, flex-basis가 우선된다.

컨텐츠가 많아 자식 박스가 넘치는 경우, width가 정확한 크기를 보장하지 않는다.

Flex-basis를 사용하지 않으면, 컨텐츠가 많아 자식 박스가 넘치는 경우를 대비해, width 대신 max-width를 쓸 수 있다.

 

시험해 볼 수 있는 URL : https://flexboxfroggy.com/#ko