# Layout

- 화면에 Element들을 어떻게 배치할 것인가?

display 속성

div { 
	display : none | block | inline | flex;
}

• display : none;
  - element를 화면에서 숨기기 위해 사용
  - <script>태그의 display 속성 기본값은 display:none;
• display : block;
  - 블록 단위로 element를 배치, 새로운 줄에 시작해 전체 줄을 차지
  - <p>,<div>,<h1> ~ <h6>태그의 display 속성 기본값이 display:block;
• display : inline;
  - element를 라인 안에 넣은 것
  - <span>태그의 display 속성 기본값이 display:inline;
• display : flex;
  - element를 블록 레벨의 flex container로 표시
  - container이기 때문에 내부에 다른 element들을 포함

---

visibility
- 가시성

div {
	visibility : visible | hidden;
}    

- visible: 화면에 보이게함
- hidden : 화면에서 안 보이게 감춤. but, 화면에서 영역은 그대로 차지한다

---

position
- 위치

div {
	position : statice | fixed | relative | absolute;
}    

• statice
  - 기본값으로 element를 원래의 순서대로 위치시킴
• fixed
  - element를 브라우저 window에 상대적으로 위치시킴
• relative
  - element를 보통의 위치에 상대적으로 위치시킴, element를 기준으로 공간을 생성
• absolute
  - element를 절대 위치에 위치시킴, 기준은 첫번째 상위 엘리먼트

---

가로, 세로 길이와 관련된 속성

div {
	width: auto | value;
    height: auto | value;
    min-width: auto | value;
    min-height: auto | value;
    max-width: auto | value;
    max-height: auto | value;
}

css의 값의 단위

---

Flexbox

flex container {flex item, flex item, flex item}

flex와 관련된 대표적인 속성

div {
	display : flex;
    flex-direction : row | column | row-reverse | column-reverse;
    align-items: stretch | flex-start | center | flex-end | baseline;
    justify-content : flex-start | center | flex-end | space-between | space-around;
}

flex-direction 속성의 값들

• row
  - 기본값이며 아이템을 행(row)을 따라 가로 순서대로 왼쪽부터 배치
• column
  - 아이템을 열(column)을 따라 세로 순서대로 위쪽부터 배치
• row-reverse
  - 아이템을 행(row)의 역(reverse)방향으로 오른쪽부터 배치
• column-reverse
  - 아이템을 열(column)의 역(reverse)방향으로 아래쪽부터 배치

row :
123

row-reverse :
321

column :
1
2
3

column-reverse :
3
2
1

축

row인 경우
main axis : 왼쪽에서 오른쪽, 정해진 방향대로
cross axis : 위에서 아래, 정해진 방향을 가로 지르는 방향

column인 경우
main axis : 위에서 아래, 정해진 방향대로
cross axis : 왼쪽에서 오른쪽, 정해진 방향을 가로 지르는 방향

---

align-items
- cross axis를 기준으로 정렬한다

• stretch
  - 기본값으로써 아이템을 늘려서(stretch) 컨테이너를 가득 채움. 길이를 모두 늘려서 정렬 -> | | |
• flex-start
  - cross axis의 시작 지점으로 아이템을 정렬
  - 천정에 나란히 정렬
• center
  - cross axis의 중앙으로 아이템을 정렬
  - 길이가 다른 컨테이너들이 가운데 정렬
• flex-end
  - cross axis의 끝 지점으로 아이템을 정렬
  - 바닥에 나란히 정렬
• baseline
  - 아이템을 baseline 기준으로 정렬

---

justify-content
- 컨테이너 내에서 아이템들을 어떻게 나란히 맞출지 결정
- main axis를 기준으로 정렬

• flex-start
  - main axis의 시작 지점으로 아이템을 맞춤
  - 왼쪽으로 붙어서 정렬
• center
  - main axis의 중앙으로 아이템을 맞춤
  - 가운데로 정렬
• flex-end
  - main axis의 끝 지점으로 아이템을 맞춤
  - 오른쪽으로 붙어서 정렬
• space-between
  - main axis를 기준으로 첫 아이템은 시작 지점에 맞추고 마지막의 아이템은 끝 지점에 맞추며, 중간에 있는 아아템들 사이(between)의 간격(space)이 일정하게 되도록 맞춤
  - 첫번째 컨테이너는 맨 왼쪽에, 마지막 컨테이너는 맨 오른쪽에, 그 사이에 나머지 컨테이너들이 간격을 맞춰 정렬
• space-around
  - main axis를 기준으로 각 아이템의 주변(around) 간격(space)을 동일하게 맞춤
  - 주변은 아이템의 시작과 끝을 말함

flexbox