카카오톡 클론 코딩 #15 네비게이션 바 CSS

이번 포스팅에서는 네비게이션 바를 만들어 보도록 하겠습니다.

앞선 포스트에서 했던 방식대로,
제일 먼저 CSS폴더에 nav-bar.css라는 새 파일을 만들고, style.css에 nav-bar.css를 @import합니다.

그럼 네비게이션 바에 배경색을 지정해주면, 네비게이션 바가 잘 선택 되어있는 지 확인할 수 있습니다.

 

상태표시줄, 헤더, 네비게이션바는 화면을 스크롤하더라도 그 자리 그대로를 지키고 있습니다. 
그래서 position: fixed;를 이용하여 자리를 고정시켜 주겠습니다. (body의 padding에 둘러싸여 있도록 한 설정 제거)

position: fixed는 기존에 있던 위치에서 다른 위치에 고정시키도록 설정한 것이기 때문에,
position: fixed를 쓸 때는 꼭 width를 설정해 줘야 합니다. 그리고 원하는 위치를 입력해 줍니다.

padding값을 설정하기 위해,
page ruler redux를 이용해 보니 양 옆은 30px, 위 아래는 10px이기 때문에,
padding: 10px 30px;라고 입력합니다. 

네비게이션 바의 색깔이 하얀색이 아닌 #F9F9FB이기 때문에, 배경색을 수정해 줍니다.

이번에는 네비게이션 바 위에 구분선으로 보이는 border를 표시해 주겠습니다.

border의 크기는 1px(page ruler redux이용), 색은 #E7E7E9(page color picker active이용)이므로,
border-top: 1px solid #E7E7E9;를 입력해 줍니다.

 

이제 네비게이션 바에 있는 아이콘들을 가로 정렬 시켜 보겠습니다. 

그 전에 모든 element에 box-sizing: border-box;라는 스타일을 입혀 줘야 됩니다.
그 이유는 다음 포스팅에 업로드 하겠습니다. 

위와 같은 방식으로 상태표시줄과 헤더도 위치를 고정시킬 수 있습니다.