한화생명 다이렉트 상단바 모작 (완성)

한화생명 다이렉트 홈페이지

한화생명 다이렉트

 

 

[상단바]

fw-700

fs-18

fc-272B2F , FA6600

lh-1.5

[2차 메뉴]

fw-300

fs-16, 20, 30  

fc-fff, 7E7C7A  

 

---

상단바 구현

드라이브

0단계 - 세팅하기

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

 

1단계 - 레이아웃

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

 

2단계 - 로고

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

 

3단계 - 1차메뉴

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

 

4단계 - 사용자메뉴

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

 

5단계 - 1차메뉴 호버 텍스트 디테일

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

 

6단계 - 2차메뉴 구조 위치잡고 이벤트 확인

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

 

7단계 - 2차메뉴 구조_1

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

 

수정)

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

 

8단계 - 2차메뉴 구조_왼쪽

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

 

9단계 - 2차메뉴 구조_오른쪽

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

- 이 단계에서부터 클래스 네임 변경

- 로고에 h1태그 사용

 

10단계 - 고객센터 2차메뉴

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

- 2차메뉴 flex-grow를 space-between으로 변경하여 너비값을 유연하게 수정

- 전체상품 2차메뉴 좌측 클래스 이름 배너로 변경

 

ㄴ 질문

- svg가 인라인속성이기 때문에 알 수 없는 여백이 생기는 것이다.

- display: block;으로 변경하여 문제를 해결한다.

 

+) 어째서인지 font weight 클래스가 작동하지 않음...

 

11단계 - 2차메뉴 정리 및 호버 이벤트

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

 

 

12단계 - 2차메뉴 배경

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

ㄴ 11단계에서 fork 안됨

 

 

---

상단바 구현 완성

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