맹쑤의 FE 일기

4일차 요약

• 와이어프레임은 레이아웃의 뼈대를 그리는 단계이다.
• flexbox는 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는 방법이다.
• 부모 요소에 적용해야 하는 Flexbox 속성
  • flex-direction, flex-wrap, justify-content, align-items
• 자식 요소에 적용해야 하는 Flexbox 속성
  • flex: <grow(팽창 지수)> <shrink(수축 지수)> <basic(기본 크기)>
  • 따로 지정 안하면 기본값 적용 flex : 0 1 auto;
• Flexbox Froggy - CSS flexbox 속성 배우기 게임 
• 클래스 이름과 구현을 1:1로 일치시켜 아주 작은 단위로 CSS를 작성 기법을 Atomic CSS 방법론이라 한다.
  • CSS Architecture: Block-Element-Modifier (BEM) & Atomic CSS — SitePoint

오늘의 후기

     notion에 정리한것을 캡쳐해서 올렸다. 와이어프레임 단계에서 잘 한다면 목업 만들때 편하겠다. 요소들을 위치 시키는 연습을 많이 해야겠다. tr/td의 지옥에서 빠져나올 수 있다!