[SEB FE] Section1 unit6 회고 | html 레이아웃과 css flexbox

💡레이아웃

📌와이어프레임

: 웹을 만들기 전 각 요소의 배치를 미리 그려두는 것
  와이어프레임 만으로도 어떤 목적의 웹인지 알 수 있어야 함

📌화면 나누는 방법

(1) 수직분할 : 요소들이 가로로 배치된다
(2) 수평분할 : 요소들이 세로로 배치된다
                   height 속성 추가하면 직관적인 분할 가능

초기화

* {
	margin: 0;
    padding: 0;
    box-sizing: boader-box;
   }

💡flexbox

📌부모 속성에 적용

• display : flex;
  • flex-direction
    : colunm , row, colunm-reverse, row-reverse
    : 어떤 방식으로 자식 요소를 배치할 것 인지
  • flex-wrap
    : nowrap, wrap, wrap-reverse
    : 줄 바꿈
  • justify-content
    : flex-start, flex-end, center, space-around, space-between
    : flex-direct의 수평방향 배치 방법
  • align-items
    : strech, flex-start, flex-end, center, baseline
    : flex-direct의 수직방향 배치 방법

📌자식 속성에 적용

• flex : grow shrink basis;
  기본값은 flex : 0 1 auto;

📌주의사항

shrink와 grow를 한번에 사용하지 않는다.
shrink는 정확히 줄어드는 값을 알 수 없으므로 1로 두고,
grow를 바꾼다.

📌basis 0과 auto의 차이

0은 고정된 값이다.
auto는 컨텐츠의 크기만큼의 값으로 지정된다.

😥부족한 점

display-flex 의 속성을 정확히 외우지 못했다.
flexbox를 이용한 동적 목업을 만드는 데에 어려움을 겪었다.
grow와 shrink의 차이를 명확히 알기가 어렵다.