🔍 Layout

각각의 요소를 목적에 맞게 배치하는 것이다.

와이어프레임(Wireframe)

레이아웃의 뼈대를 그리는 단계로, 단순한 선이나 도형으로 웹,앱의 인터페이스를 묘사한 것이다.
단순히 레이아웃과 제품의 구조를 보여주는 용도로, 스타일링 요소나 UX를 판단하지 않는다.

목업(Mock-Up)

실물 크기의 모형을 뜻하며 웹, 앱의 경우 실제로 작동하는 모습과 동일한 HTML 문서를 작성한다. 이때, 하드코딩으로 작성한다.

• 하드코딩?

코드 내부에 데이터를 직접 입력하는 것으로, 값을 고정시켜 놓는 것이다.

ex) 구구단을 만든다고 가정했을 때, 구구단처럼 보이게 하기위해 각 숫자의 단을 모두 출력

console.log('2 x 1 = 2')
console.log('2 x 2 = 4')
console.log('2 x 3 = 6')
console.log('2 x 4 = 8')

👀 화면을 나누는 방법

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

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

ex) VScode의 layout

<!--위의 레이아웃을 고려의 작성된 HTML-->

<div id="container">
  <div class="col w10">
    <div class="icon">아이콘 1</div>
    <div class="icon">아이콘 2</div>
    <div class="icon">아이콘 3</div>
  </div>
  <div class="col w20">
    <div class="row h40">영역1</div>
    <div class="row h40">영역2</div>
    <div class="row h20">영역3</div>
  </div>
  <div class="col w70">
    <div class="row h80">영역4</div>
    <div class="row h20">영역5</div>
  </div>
</div>

/* Class 이름에 맞는 CSS 구현 */

.w70 { width: 70%; }
.h40 { height: 40%; }

HTML 문서의 경우,`` 요소는 기본적으로 약간의 여백을 가지고 있기때문에 박스에 시작 위치를 (0,0)에 맞추기 위해서는 초기화를 해줘야한다.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

---

🔍 Flexbox

Flexible box라는 뜻으로, 박스를 유연하게 늘리거나 줄이면서 레이아웃을 잡는 방법이다.

👀 부모 요소에 적용해야하는 Flexbox 속성

✔ display: flex

부모 박스 요소에 적용해, 자식 박스의 방향과 크기를 결정한다.

위쪽에서 부터 세로로 정렬, 가로로 넓게 공간 차지(default) -> 왼쪽부터 가로로 정렬, 콘텐츠만큼의 공간 차지

1. flex-direction:

자식요소들을 정렬할 축을 결정한다. 아무 설정도 안 하면 default 가로 정렬.

주요 속성값:

• row(default) : 왼쪽에서부터 가로 정렬
• column: 위에서부터 세로 정렬
• row-reverse : 오른쪽에서부터 가로 정렬
• column-reverse : 밑에서부터 세로 정렬

2. flex-wrap:

자식 요소들의 크기 > 부모 요소의 크기 일때, 자동 줄 바꿈을 할 것인지 결정한다. 아무 설정도 안 하면 default 줄 바꿈 X.

주요 속성값:

• nowrap(default) : 줄바꿈 x
• wrap: 위에서부터 가로 정렬, 줄바꿈 O
• wrap-reverse : 밑에서부터 가로 정렬, 줄바꿈 O

3. justify-content:

자식 요소들을 축의 수평방향으로 어떻게 정렬할 것인지 결정한다.

주요 속성값:

flex-direction : row 라면,

• flex-start : 왼쪽 위에서부터 정렬
• flex-end : 오른쪽 위에서부터 정렬
• center : 가운데 위에서부터 정렬
• space-between : 좌우 양끝에 맞춰 공간 비우고 왼쪽에서부터 정렬
• space-around : 좌우 주변(양끝x)에 맞춰 비우고 왼쪽에서부터 정렬

flex-direction : column` 라면,

• flex-start : 왼쪽 위에서부터 정렬
• flex-end : 왼쪽 밑에서부터 정렬
• center : 왼쪽 가운데에서부터 정렬
• space-between : 상하 양끝에 맞춰 공간 비우고 왼쪽에서부터 정렬
• space-around : 상하 주변(양끝x)에 맞춰 비우고 왼쪽에서부터 정렬

4. align-items:

자식 요소들을 축의 수직방향으로 어떻게 정렬할 것인지 결정한다.

주요 속성값:

stretch, lex-start, flex-end, center, baseline

flex-direction : row 라면,

flex-direction : column 라면,

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

부모 요소에 적용해야 하는 속성: 자식요소들의 정렬 결정
자식 요소에 적용해야 하는 속성: 요소가 차지하는 공간 결정

✔ flex

`flex`속성에 **3 가지 값**을 지정해 줄 수 있다.

• flex-grow: : 팽창 지수, 요소의 크기가 늘어나야 할 때, 얼마나 늘어날 것인지 결정
• flex-shrink: : 수축 지수, 요소의 크기가 줄어들어야 할 때, 얼마나 줄어들 것인지 결정
• flex-basis:: 요소의 기본 크기 결정

/*flex:   <grow>    <shrink>    <basis>*/
flex: 0 1 auto;

1. flex-grow

팽창 지수, 요소의 크기가 늘어나야 할 때, 얼마나 늘어날 것인지 결정한다.

<main>
  <div id="box1" class="box">box1</div>
  <div id="box2" class="box">box2</div>
  <div id="box3" class="box">box3</div>
</main>

box1에만 flex-grow: 1 해주면 공간 차지 비율이box1:box2:box3 = 1:0:0
box1,2에만 flex-grow: 1 해주면, 1:1:0
모두 flex-grow: 1 해주면, 1:1:1

2. flex-shrink

수축 지수, 요소의 크기가 줄어들어야 할 때, 얼마나 줄어들 것인지 결정한다.
비율로 레이아웃을 지정할 경우, shrink는 실제 크기를 예측하기가 어렵기 때문에 grow 속성을 사용하는 것이 좋다. flex-grow 속성으로 비율변경 시, flex=shrink 속성은 1(default)로 두어도 무방하다.

3. flex-basis

요소의 기본 크기를 결정한다. width와 flex-basis를 동시에 사용하는 경우, flex-basis가 우선된다.

flex-grow가 0일때, basis 크기 지정 시 크기가 유지된다.

ex) grow를 0:1:1로 설정한 후 , box1에만 flex-basis: 50px로 설정했을 때,

• flex-basis : auto 와 flex-basis : 0 의 차이?

0은 "width: 0"를 지정하는 것과 같으나, auto는 content의 크기에 맞춰 지정된다.

Reference: 코드스테이츠