스타벅스 클론코딩 # 02. Header

코린이·2022년 5월 18일
0

오늘 한 일

  • HEADER 컴포넌트 구현
    - HEADER 구성하기
    - 드롭다운 메뉴 구현

Header.js에 header코드를 다 넣으면 코드가 너무 길어질 것 같아서 header 요소들을 나누어서 구현했습니다.

💻 간단한 코드

1. Header.js

<TopMenu><BottomMenu>flex-direction: column 속성으로 수직 방향으로 정렬을 설정하고, justify-content: space-between을 사용하여 요소들 사이에 동일한 간격을 두어 각각 맨 위와 맨 아래에 위치시켰습니다.

2. TopMenu.js

border-right을 이용하니 짝대기가 너무 길어보여 각 메뉴 사이에 있는 | 는 after을 사용하여 구현하였다.

3. BottomMenu.js

4. 드롭다운 메뉴

hover을 사용하여 마우스가 요소에 올라갔을 때 하위 메뉴들이 펼쳐지도록 하였다.

profile
초보 개발자

0개의 댓글