04/28/22 [HTML/CSS] flexbox로 레이아웃 만들어보기

 ↑이 상태로 삽질을 열심히하다가 ↑결국 나름대로 완성해본 결과

오늘의 할일을 내일로 미루지 말라고 그 말을 어제 생각해냈어야 했는데 그러지 못해서 오늘 엄청 고생했다............... 당장 대충 덮어놓은 html, css 기초 개념부터 다시 뒤적거려봐야 했고 그러다보니 정작 정규 시간에 마쳤어야 할 미니 과제는 밤이 되어서야 손을 댈 수 있었다. 물론 필수도 아닌 해도 안 해도 아무도 모르는 걍...... 그런 사실상 과제도 아니지만 이런 거 안 하고 살면 찝찝하다. 그래서 해봄.

 

그리고 물론 한번에 성공 못했고 삽질로 시간 좀 버렸다.

처음에 삽질한면서 실패한 이유

1. flex를 어디에 넣어야 하는지 감을 못 잡음

2. flex를 이용한 정렬이나 너비, 높이 설정 등 개념 부족으로 이상한 값을 이상하게 넣고 있음

3. 클래스 선택할 때 selector를 제대로 적용하지 못했음

해결한 방법

1. div로 큰 구역 잡아주는 것부터 시작

2. flex 제대로 알기 - 자식 박스 크기 조절하기

3. flexbox의 중첩

 

사실 해결 방법이나 과정이 거창할 정도로 어려운 문제도 아니었다. 다만 내가 flexbox 개념을 엄청 듬성듬성, 알듯 말듯 알고 있어서 애매하게 적용해보는 과정에서 오히려 더 꼬여버린 게 문제였다. 결국 학습이 부족했고, 보충해서 해결했다. 

이번에야말로 CSS Flex를 익혀보자

이번 개념을 학습하면서 이것저것 많은 자료를 많이 봤는데 이 페이지를 보자마자 바로 이해가 돼서 수월하게 삽집을 그만두고 수정할 수 있었다........ 감삼다 감삼다 선생님,,

🐑 Daily 회고

귀찮고 재미없고 대충 아는 것 같은 개념이라고 넘어가지 말고 처음 볼 때 꼼꼼히 보는 게 중요한 것 같다. 특히 암기가 필요한 정의나 속성의 특징 같은 건 대충 넘겨버리니까 나중에 데 꼬여버려서 답이 없었다. 당장 외울 수 없다면 따로 메모나 필요할 때 볼 수 있는 레퍼런스 페이지를 마크해놓는 게 중요한 것 같다.

총평 ⭐⭐

어제 놀고 오늘 개고생. 오늘 할 일은 오늘 끝내자. 제발.