플렉스를 활용한 네비게이션 바 만들기 4

플렉스를 활용해서 에어비앤비 네비게이션 바를 만드는 작업은 오늘로 마무리 되겠네요. 어서 마무리하고 다음 시간엔 더 재밌는 것을 만들어보겠습니다. 

네비게이션 바 만들기 1 - 준비운동

네비게이션 바 만들기 2

네비게이션 바 만들기 3

지난 시간에 설명했던 것들은 알고 있으신 것으로 생각하고 빠르게 넘어갑니다. 혹시 기억이 나지 않으시면 위의 링크를 클릭해서 복습해주세요 ! 

margin에 auto 값 주기

---

지난 시간까지의 결과물입니다.

우선 에어비앤비에서는 로고는 왼쪽 끝에 위치하고, 나머지 글들은 오른쪽 끝에 위치했습니다. 로고를 제외한 나머지 리스트들을 오른쪽 끝으로 이동시켜 보겠습니다. 어떻게 해야할까요? 

첫번째 리스트(로고)의 오른쪽에 마진값을 auto로 지정하면 어떻게 될까요? 컨테이너 안에 있던 여유공간이 지정한 곳으로 이동하게됩니다. 준비운동에서 설명드린 바 있습니다.

li:first-child{
  margin-right: auto;
}

리스트의 글자부분들이 오른쪽으로 이동했습니다.

  

소스코드를 복사해서 붙여넣으시면 그림과 같이 변한 것을 볼 수 있습니다. 그리고 로고와 나머지 리스트들을 살펴보면 로고에 비해서 글목록들이 묘하게 위로 올라가 있다는 것을 느끼실 수 있을겁니다. flex를 선언하면 주축과 교차축이 생기게 되고, 지금은 리스트를 교차축 방향으로 이동시켜야 합니다. 당연히 교차축을 기준으로 이동시킨다면 align-items를 떠올리셨겠죠?

ul{
  display: flex;
  list-style-type: none;
  align-items: center;
}

교차축으로 이동까지 시켰다면 에어비앤비 홈페이지에서 봤던 네비게이션 바와 아주 비슷한 모양으로 변한 것을 알 수 있습니다. 

마우스를 올렸을 때 효과주기

---

이제는 마우스를 올렸을 때 밑줄이 생기는 것만 구현하면 다 완성되었다고 볼 수 있겠네요.

여기서도 :hover라는 수도 클래스가 등장합니다.

:hover는 마우스를 엘리먼트 위에 올리는 순간, 그 엘리먼트를 선택할 때 사용합니다.

li:hover를 선택해서 모두에게 효과를 주면 될까요? 그럼 이미지를 눌렀을 때도 똑같은 효과가 생길겁니다. 그래서 첫번째 리스트인 로고를 제외하고 효과를 주어야 합니다.

li:not(:first-child) a:hover{
  border-bottom: 2px solid black;
}

:not(selector)는 괄호안에 포함되는 셀렉터만 제외하고 선택하게 해주는 수도 클래스입니다. 

리스트들 중에서 첫번째 리스트만 제외하고 선택한 후, 그 리스트들 밑에 있는 <a>태그에 마우스가 위에 올 경우 테두리 밑선이 생기도록 하였습니다. 테두리 밑선이 생기는 것을 확인하셨나요?

그리고 마지막으로 태그들의 경우 다른 설정을 하지 않으면 기본적으로 마진이나 패딩값을 가지고 있습니다. ul{margin:0; padding:0;}을 추가하면 더 깔끔한 모양의 네비게이션 바를 볼 수 있습니다.

깃허브에서 전체코드 확인

네비게이션 바를 완성했습니다. 좋은 연습이 되었나요? 다음시간부터는 반응형 웹을 만들어보도록 하겠습니다.

공감은 제작자에게 큰 힘이 됩니다.