Header.js에 header코드를 다 넣으면 코드가 너무 길어질 것 같아서 header 요소들을 나누어서 구현했습니다.
<TopMenu>
와 <BottomMenu>
를 flex-direction: column
속성으로 수직 방향으로 정렬을 설정하고, justify-content: space-between
을 사용하여 요소들 사이에 동일한 간격을 두어 각각 맨 위와 맨 아래에 위치시켰습니다.
border-right
을 이용하니 짝대기가 너무 길어보여 각 메뉴 사이에 있는 | 는 after
을 사용하여 구현하였다.
hover을 사용하여 마우스가 요소에 올라갔을 때 하위 메뉴들이 펼쳐지도록 하였다.