📖 오늘의 수업

• 벤딩머신 레이아웃을 구현해 봄.

💭 오늘의 생각

1. 피그마를 보고 먼저 어떤 식으로 구조를 잡을지 박스로 구분지어서 틀을 짜보라고 하셨다. 몇 번 만들어봤더니 틀 잡고 어떤 태그를 사용해야 할지가 조금 명확해진 느낌이었다. 똑같은 버튼이나 인풋창은 모듈로 만들어서 필요한 부분에 넣어서 사용했는데 쉅 시간에 배운거 잘 활용한 것 같아서 완전 뿌듯했다.

2. 시간이 두 시간 정도 주어졌는데 자판기 왼쪽 부분만 겨우 만들었고 물론 각 아이템에 대한 품절 상태나 이런 디테일한 부분은 아예 건들지도 못했다. 어떤 분은 이미 다 완성하셔서 미디어쿼리까지 만드신걸 보고 더 열심히 해야지 생각했다.

3. 자판기에서 아이템들이 배치되는걸 flex로 할지 grid로 할지 잠깐 생각했다가 flex가 조금 더 손에 익었다는 하찮은 이유를 가지고 스타일링을 했다. 그런데 강사님께서 float, flex, grid 중 어느것을 선택하든 이유가 있는 선택이 필요하다고 하셨다.
   벤딩머신 6개를 flex로 배치한다면 wrap을 써서 반응형으로 떨어지게 만드는 목적으로, 혹은 아이템이 더 늘어날 부분을 고려한 이유. grid를 사용했다면 6개의 아이템을 픽스할 생각이고, UI가 깨지지 않도록 하려는 이유.
   이런 부분들을 전혀 고려하지 않고 그냥 손에 익었다는 이유로 ㅋㅋㅋㅋㅋㅋㅋ 어우 ... 너무 부끄러웠다. 그래서 이왕 flex로 한거 모바일일 때 딱 떨어지는 반응형을 위해 사용하는 것이다라고 리마인드하면서 만들었다😙💦