[작업 일기] 플렉스 박스(flex box) - 카카오뱅크 메뉴 및 컨텐츠 클론 코딩

카카오뱅크 메뉴 및 컨텐츠 따라해보기(flex 개념 응용)

 

  오늘은 flex개념을 응용한 사이트 메뉴와 컨텐츠 일부를 따라서 만들어 보았습니다. 처음에 만들 때는 flex box 개구리 게임처럼 뭔가 쉽게 쉽게 될 것 같다는 생각으로 임했었는데, 생각보다 많은 시도를 하면서 개념을 비로소 이해하고 완성하게 되었네요. 역시 실전연습이 정말 중요한 것 같습니다.

 

사이트 메뉴 모작을 하면서 가장 어렵게 느껴지는 점들이 있었는데, 

 

그 중 첫번째는 적응형, 반응형, 최소 너비가 잡혀 있는지 등에 따라 html 구조가 달라지게 되는데, 바로 바로 유형 적용을 못해 시간이 지연되거나 헷갈렸다는 점이네요. 그래도 기본 예제를 통해 몇 번 연습해보니 어느 정도 이해가 되는 부분 이었습니다. 사실 몰랐다기 보다는 전에 확실히 하지 않고 넘어갔기 때문에 잊어 버렸거나, 혼동 됐던 부분이 컸던 것 같습니다.

 

두번째, html 상속 개념과 높이의 상관 관계 대한 부분 이었습니다. flex를 쓰게 될 경우 그의 자식은 높이가 stretch 되어서 최대로 쭉쭉 늘어나게 됩니다. 하지만 flex를 쓰지 않았을 때는 그 높이가 무조건적으로 상속 되는게 아닙니다. 그렇기 때문에 어떤 상속 관계를 가지고 높이를 적용해야 하는지 유심히 생각해봐야 하며 또 확실히! 알아야 할 부분으로 느꼈습니다.

 

  결국 실전 예제를 통해서 느낀점은, 기본 개념에 대해 확실히 이해를 하고 넘어가야 한다는 점입니다. "이게 왜 이렇게 됐지?! 라는 끊임없는 물음을 자신에게 던져보는 자세가 중요할 것 같네요.

코딩을  하다보면 이해를 했다고 생각했던 부분이 사실은 그냥  숙달되면서 자연스럽게 외워지기도 하는 것 같습니다. 하지만 시간이 지나 다시 코딩을 했을 때,  이런 부분은 대개 잘 안되는 쪽으로 향하는 것 같아요. 원리를 이해 했다면 다시 이해하는데 오래 걸리지도 않을 뿐더러 잘 잊어버리지도 않을 것 입니다.  코딩 특성상 모든걸 이해하고 넘어가기에는 제한이 될수도 있겠지만, 최대한 이해하고 넘어가는 것이 좋은 것 같다는 생각이네요. 

 

※ 오늘의 한줄 요약 기본기는 너무나 중요하다!! 될수록 이해하고 넘어가자!

 

 

flex 개념 응용 > 카카오뱅크 메뉴 및 컨텐츠 따라 해보기 

See the Pen xxEgLbo by issue72y (@issue72y) on CodePen.