1. flex

• 1차원적(행, 열) 레이아웃

• 독립적인 박스이기 때문에 공백문자가 생기지 않는다.

• 🎁 container 속성 / 🍬 items 속성

• 🎁display

  flex block-flex

  inline-flex inline-flex
  

• 🎁flex-direction
  메인축을 정해준다.

  row column row-reverse column-reverse
  

• 🎁 justify-content
  메인축을 기준으로 움직인다.

  flex-start flex-end center space-between space-around space-evenly

• 🎁 align-content
  교차축을 기준으로 움직인다.

  flex-start flex-end center space-between space-around space-evenly stretch

• 🎁 align-items
  아이템을 개별적으로 조작하는 속성

  flex-start flex-end center baseline stretch

• 🎁 flex-wrap
  줄 바꿈 허용 속성

  wrap nowrap wrap-reverse

• 🎁 gap
  아이템들 사이의 갭

• 🍬 order
  아이템의 순서 설정
  0이 default값, 양수가 되면 뒤로 밀리고 음수가 되면 앞으로 이동한다.
  

• 🍬 flex-basis
  아이템의 크기를 지정한다. ( = width )

  box-sizing auto min-content max-content fit-content

• 🍬 flex-grow
  비어있는 영역만큼 확장한다.
  0이 기본값

• 🍬 flex-shrink
  비어있는 영역만큼 줄어든다.
  1이 기본값
  

• 🍬 align-self
  자기 자신에 대한 설정

  auto flex-start flex-end center baseline stretch

🏷️단축 속성

flex : grow shrink basis (grow 는 기본값)

flex-flow : flex-direction wrap

2. grid

• 2차원 (행, 열, 병합 등) -> 레이아웃의 끝판왕👑

• 라인 기반으로 배치된다.

• 🎁 display
grid block-grid
  inline-grid inline-grid

• 🎁 grid-template-columns
  열에 대한 크기 및 개수 설정
  

• 🎁 grid-template-rows
  행에 대한 크기 및 개수 설정
  

• 🍬 align-self
  자기 자신에 대한 설정

  auto flex-start flex-end center baseline stretch
  

3. 회고

어제 flex를 조금 예습해간게 도움이 되었다. float만 알고 있었어서 flex가 어려울 까봐 걱정됐는데 다들 flex가 쉽다고 하는게 공감이 안됐었는데 오늘 배우면서 UI 작업을 하니까 이해가 갔다. float으로 할 수 있는 작업을 flex로는 두줄만 추가하면 배치를 완성할 수 있었다. 더이상 뻘짓을 안해도 된다는게 좋았다. 하지만 현업에서는 flex보다 float을 많이 사용한다고 해서 아쉬웠다. 내가 혁신적이어도 회사가 레거시하면 나도 레거시하게 변한다... 무슨 말인지 알 것 같았다. 또 grid를 배웠는데 수코딩 계산기 클론 코딩을 하면서 조금 접했던 거라 어렵지 않았다. 이래서 예습예습하는건가... 속성 이름이 어렵긴 하지만 나에게는 emmet 기능이 있어! 사랑한다 emmet💙 emmet 기능 덕분에 오타를 많이 줄이는 것 같다.

오늘은 수업 예제를 나가기 전에 조금의 시간을 주고 먼저 코드를 쳐보는 시간을 많이 가졌다. 대체 다들 어떻게 그렇게 빨리 코드를 짜는거지..? 난 구조 생각하는 거부터 오래 걸려서 인증샷 올라오는거 보면서 좌절감을 느꼈다. 속도가 느리더라도 성장하는 과정이라 생각하몀 위로 하긴 하지만 마음처럼 그게 되지는 않는다. 그러다 나의 좌절감에 폭탄을 터트리는 속성을 배웠다. 바로 transform ! 처음 배우는 것이고 오늘은 UI 작업하면서 개념 설명없이 넘어간 거라 깊게 배운 건 아니지만 강사님이 설명해주시는데 하나도 이해못했다. transformX , transformY... 예습해야지 했는데 오늘꺼 복습하고 중간에 너무 힘들어서 자느라고 못했다. 또 다시 찾아온 똥줄타임💩 후우 언제쯤 코린이에서 벗어날 수 있을까ㅠㅠㅠ 그래도 flex 게임을 하면서 복습을 했더니 개념이 이해가 갔다. 가장 마지막 단계에서 막혔지만 팀원분의 도움으로 해결할 수 있었다. 왜 나는 응용력이 떨어질까... 똥멍충이!!!