[작업 일기] 카카오뱅크 메뉴 클론 코딩(flex, jQuery 기초 개념 응용)

kakaobank   >>>>>>>>

---

  지난번에 이어 카카오뱅크 메뉴 클론 코딩을 완성 해보았다. 일전에는 작업 도중 jQuery가 잘 생각나지 않아 다시 기본 개념부터 익히고 돌아왔다. (영상을 봤을 때 흐름이나 이해는 가지만 막상 쓰려고 하면 쓰지를 못하겠다 ㄷㄷ;;)

 

처음에 이 예제를 접했을 때는 생각보다 난이도가 좀 있다고 느껴졌다. jQuery를 포함하여 잘 안되고 막히는 부분이 몇가지 있었기 때문이었다.

하지만 부분 부분 완성적 개념으로 맞춰 본다면, 사실 난이도 상의 어려운 예제는 아니었다는 생각이 든다.

(완성을 했기 때문에 그런 생각이 드는 것일까... 진짜 거짓말이 아니고 들어갈 때, 나올때 심정이 많이 다른 것 같다. 하기전에 다소 어렵게 느껴졌는데)

 

왜 팍팍 완성을 시키지 못하고 해맸을까 라는 생각을 해보면, 아직 기본 개념에 대해 흔들린다는 점이다. 이미 숙지 했다고 느꼈던 position의 적용(메뉴 아이템의 백그라운드의 클래스는 어디에 만들 것인가? relative는 어디다가 적용 시킬 것인가?) 가상 클래스 ::affer, transition, visibility 적용 등등을 작업하면서 한 번에 적용시키지 못하였거나 잘 못 사용하여 시간을 지연시켰다.

 

어쨌든 어찌어찌 완성을 시켰지만, 눈감고도 할만큼 숙지 하진 못한것 같고 다른 것을 같이 하면서 로테이션 한다는 느낌으로  해봐야겠다는 생각이다. 그리고 제이쿼리!!!! 지금은 기본 of 기본 밖에 못하지만, 언젠가는 정복하고 말것이다!!!!

 

카카오 뱅크 메뉴바 클론 코딩 >>>

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

 

이 예제를 하면서 익히고 점검해야 될 사항은

1. flex box 기본 개념에 대해서 숙지 하였는가

2. transition의 개념을 알고 있는가

3. position: absolute, fixed 이해도

4. 가상 클래스 ::after의 사용 이해도

5. visibility의 개념 이해도

6. jQuery의 기본 개념 이해도