카카오 모빌리티 부분모작 (완성)

• https://www.kakaomobility.com/

카카오모빌리티

 

 

+) 로고 색상 변경

https://codepen.io/EONJENOG/pen/eYwjZVe

ㄴ img {  filter: invert(1); }

 

0단계

https://codepen.io/EONJENOG/pen/qBzyboj

 

 

1단계: 레이아웃

https://codepen.io/EONJENOG/pen/KKjBVeP?editors=1000

 

 

2단계: 로고

- 이미지태그

https://codepen.io/EONJENOG/pen/dyBjGgd?editors=1000

- background-image

https://codepen.io/EONJENOG/pen/ZEdjQwO?editors=1000

 

 

3단계: 메뉴

https://codepen.io/EONJENOG/pen/JjQBGQO?editors=1000

 

 

4단계: 우측

https://codepen.io/EONJENOG/pen/YzojqzO?editors=1000

 

 

5단계: 호버

https://codepen.io/EONJENOG/pen/OJewNNK?editors=1000

 

 

6단계: 2차메뉴 구조

https://codepen.io/EONJENOG/pen/zYVLqNP?editors=1000

 

 

7단계: 2차메뉴 호버

- 실패

https://codepen.io/EONJENOG/pen/eYwjMpK?editors=1100

- 성공

 https://codepen.io/EONJENOG/pen/dyBjmWy?editors=1000

ㄴ fork 안해서 8단계임

 

 

8단계: 2차메뉴 모두 적용

- 실패

https://codepen.io/EONJENOG/pen/XWLBEao?editors=1100

- 성공

https://codepen.io/EONJENOG/pen/dyBjmWy?editors=1000

 

 

9단계: 로고 이미지 색상 변경

https://codepen.io/EONJENOG/pen/WNqKzKM?editors=1000

 

 

10단계: 로고 이미지 호버

- 선생님 정답

https://codepen.io/EONJENOG/pen/vYqaRVX?editors=1100

- 도전 성공

https://codepen.io/EONJENOG/pen/QWXBmeV?editors=1100

 

 

11단계: 배경

https://codepen.io/EONJENOG/pen/yLdqjBZ?editors=1100

 

 

12단계: 2차메뉴 그림자 디테일

https://codepen.io/EONJENOG/pen/WNqKJjL?editors=0100

 

 

13단계: 메인

- 왼쪽

https://codepen.io/EONJENOG/pen/ExBpLXP?editors=0100

- 오른쪽

https://codepen.io/EONJENOG/pen/eYwjrjp?editors=1000

 

 

14단계: min-height

https://codepen.io/EONJENOG/pen/JjQBvqy?editors=1100

 

 

15단계: 상단바 sticky

- 텍스트 줄바꿈 안되도록

https://codepen.io/EONJENOG/pen/vYqarYa?editors=1100

- 상단바

https://codepen.io/EONJENOG/pen/BagPVNe?editors=1000

 

 

---

완성

https://codepen.io/EONJENOG/pen/BagPVNe?editors=1000