css - flexbox 레이아웃

- 화면 레이아웃 할 때 고려사항(블록, 인라인)

• block 형태
  - box 는 그 옆에 아무 요소도 올 수 없다. (div, header, main, section 등), 블록은 높이와 너비가 있다.
  - 블록은 큰 세가지 특징이 있다.
  1. margin : box의 border(경계)의 '바깥'에 있는 공간, 값이 하나면 상하좌우 같은값 적용된다. 두개 값을 주면 상하, 좌우 적용. 네개 값을 주면 시계방향 순서로 적용.
     collapsing margin : 두 박스의 margin이 하나로 취급되는 현상, 요소의 border가 같을때(조건) 위아래 쪽에서만 일어난다.
  2. padding - box의 경계로부터 '안쪽'에 있는 공간,
  3. border - 인라인에도 적용 가능. 15px solid balck; 식으로 작성, border-radius 등의 속성이 있다.
• inline(=in the same line) 형태
  - span은 바로 옆에 다른 요소들이 올 수 있다. (span, a, link, image 등), 인라인은 높이와 너비가 없다.
  - 인라인은 margin 위아래 적용 x 좌우만 적용. padding은 사방에 적용 o.

** block이 아닌 종류를 기억하는 것이 훨씬 편하다.

• block은 옆에 아무 요소도 올 수 없지만 display 속성 값을 inline, inline-block 등으로 지정해 인라인처럼 사용할 수 있다.
  - inline-block : 블록으로 인식하게 하면서 바로 옆에 다른 요소가 올 수도 있음. 근데 쓰기에 불편함. 정해진 형식이 없고 박스간 공백 생김. 반응형 디자인을 지원하지 않는다.(창 크기에 영향을 받음)

---

- flexbox

- 박스를 어느 곳에든 둘 수 있다. `display: flex`
- 지켜야할 규칙이 세개 있다. 
 1. 자식 요소에 명시하지 않고 직접적인 부모 요소에만 명시해야 한다. 
   자식들을 움직이려면 부모를 `display: flex`로 만든다.(부모 = flex container) 

이렇게 지정한 후에 주축, 교차축 적용 배치가 가능함
2. 주축(main axis, 디폴트로 세로방향, 부모 요소에 적용)
속성 justify-content: center, flex-end, flex-start(기본값), space-between 등 사용해 배치한다. 주축에 적용.
3. 교차축(cross axis, 디폴트로 세로방향)
속성 align-items: center, stretch, 등 사용. 교차축에 적용.

** height: 100vh; -------> vh단위: viewport(=screen) height, 100vh = 화면 높이의 100% 의미. 화면 크기에 따라 높이가 바뀐다.

** 자식요소도 flex container가 될 수 있다.

flexbox 속성

• flex-direction : 메인 축을 설정하는 속성
  flex-direction: column 일 경우 메인 축(justify-content)이 세로, 교차 축(align-items)이 가로를 의미
  (row: 디폴트값, 메인축(justify-content)이 가로방향, column-reverse: 밑에서 시작해서 위로 올라감 등)
• flex-wrap: flex의 하위 요소들이 flex를 선언한 영역을 벗어날 경우, 강제로 한 줄로 배치할 지 행을 나눠서 배치할 지 결정하는 속성.
  flex-wrap: wrap 을 선언한다면, flex를 선언한 영역을 벗어날 경우 행을 나눠서 배치. 명시된 사이즈를 반영함.
  flex-wrap: nowrap(초기 사이즈를 신경쓰지 않고 강제로 한 줄로 배치), wrap-reverse 등

position 속성

• position: 위치를 이동시키고 싶을 때 사용.
  fixed(초기 위치 고정),
  static(처음 위치하는 곳에 두는 것, 디폴트),
  relative(요소가 처음 위치한 자리를 기준으로 상하좌우로 옮길 수 있다.),
  absolute(가장 가까운 relative 부모를 기준으로 이동. 부모를 relative하게 만들어야 한다. 없으면 body를 기준으로 함)

** positon: fixed일 때 top, left, right, bottom 중 하나라도 설정하게 되면 요소는 다른 레이어에 위치(가장 위에 위치)하게 된다.