부스트캠프 회고 - 멤버십 2주차 day1

<Today I Learned>

• CSS Flex Layout 사용법
  • 참고자료: heropy.blog/2018/11/24/css-flexible-box/

CSS Flex(Flexible Box) 완벽 가이드

• Flex Container
  • display: container 끼리의 정렬
    • flex(세로정렬), inline-flex(가로정렬)
  • flex-flow: main axis + item 줄바꿈
    • main axis: row, row-reverse, column, column-reverse
    • 줄바꿈: nowrap(한줄), wrap, wrap-reverse
  • justify-content: main axis 정렬법
  • align-content: cross axis 정렬법
  • align-items: cross axis 정렬법 (Items 한줄일때, align-content: stretch)
• Flex Item
  • order: item 정렬 순서
  • flex
    • grow: item 너비 증가 비율
    • shrink: item 너비 감소 비율
    • basis: item 기본 너비
  • align-self: cross axis 정렬방법(일부 item만)CSS Cascading
    • Importance > Specificity > Source Order
    • Specificity
      • inline > id > class > element
• Chrome 개발자도구 사용법
  • 참고자료: developers.google.com/web/tools/chrome-devtools
  • Computed: html & css logic에 따라 최종 렌더링 된 상태
  • Inline에 편집해서 수정사항 확인하기
  • element창 밑의 tree 구조 참고하기

<오늘의 느낀점>

• Figma를 써보려고 했는데 생소함을 이기지 못해서 실패했다.
  • 포토샵을 써본 경험이 있다면 더 잘 썼을듯...
  • 마우스 드래그가 손으로 그리는 편리함과 자유로움을 제한하는 느낌이다. (아날로그 세대...?)
  • 손으로 대충대충 그리면 AI가 자동으로 따주면 좋을텐데
• CSS는 어렵다
  • 예전에도 제대로 모르긴 했지만, 정말 배울게 산더미다...
  • 현업 FE 개발자들은 웬만한 태그를 다 외우고 알고 쓰는걸까?
  • Flex Layout에 대해서 더 공부해야겠다.

<오늘의 칭찬>

• 바로 코딩으로 들어가려는 욕구를 참고 미리 계획을 세웠다.
  • Layout 손으로 그려서 설계하기
  • Notion에 구현사항 정리하기
  • Github Issue에 구현사항 등록하기

<개선점 & Reminder>

• 크롬 개발자도구로 보고 모방하기 보다는 직접 구현방법이나 레이아웃을 생각해서 적용해보자
• 일찍자고 일찍 일어나기! (11pm - 7am이 목표)