카카오톡 클론 코딩 #5 Navigation Bar

이번시간에는 하단에 위치한 (3) navigation bar, 네비게이션 바를 만들어 보도록 하겠습니다.

 

 

먼저, navigation을 줄인 nav라는 클래스명을 가진 nav태그를 입력해 주겠습니다.

 

 

5개의 버튼은 리스트로, link태그를 이용하기 위해서는, ul을 먼저 만들어 주어야 합니다.

 

 

li.nav__list-item*5>a.nav__list-link 입력 후, li태그 안에 a태그를 이용하면,

 

 

nav__list-item이라는 클래스명을 가진 li태그와, 그 안에 nav__list-link라는 클래스명을 가진 a태그를 만들 수 있습니다.

하이퍼링크에 ./friends.html을 입력하여, 친구창으로 이동할 수 있도록 해 주겠습니다.

 

 

차례대로 채팅창,

 

 

검색창,

 

 

게임창, (game.html을 추가해 주었습니다)

 

 

마지막으로 더보기창까지 하이퍼링크로 연결해 주었습니다.

 

 

그럼 이제 링크가 모두 준비 되었으므로, 아이콘을 넣어주도록 하겠습니다. 

Font Awesome을 이용해서 유저, user 아이콘을 먼저 넣어 주겠습니다.
채팅창에서는 색칠되어 있지 않은 유저이기 때문에, regular style을 복사-붙여넣기 해 줍니다.

 

 

다음, 채팅창의 말풍선은 저번시간에 쓰였던 말풍선, commet의 solid style로 복사-붙여넣어 줍니다.

 

 

검색창은 hashtag로 검색해서, 복사-붙여넣어 줍니다.

 

 

게임창은 star로 검색해서 복사-붙여넣어 주고,

 

 

마지막으로 더보기창은 ellipsis로 검색해서, 복사-붙여넣어 주면 됩니다.
(여기서도 regular style로 해 주면 좋겠지만.. 유료라서 solid style로 선택해 주었습니다..)

 

 

이제 각 아이콘을 클릭해 보면, 원하는 페이지로 넘어가는 것을 확인할 수 있습니다.

 

 

이렇게 navigation bar, 네비게이션바를 완성했고, 이제 다른 창에도 똑같이 만들어 주도록 하겠습니다.

코드를 모두 복사하여, 다른 창에 붙여 넣은 다음, title과 header title, 그리고 아이콘을 solid로 각각 고쳐 주겠습니다.

먼저, find, 검색창을 고치고, 

 

 

friends, 친구창을 고치고,

 

 

Game, 게임창,

 

 

마지막 더보기창, more.html까지 고쳐 보았습니다.

 

 

이처럼, regular style에서 solid style로 변경해주면서, 아이콘이 선택된 것을 나타낼 수 있습니다.