COCOATALK 2 - 1 navigation bar

이틀 쉬었으니 열심히 다시 달려보자~~~

오늘은 노마드코더 강의로 내비게이션 바를 만들고 강의를 주욱 들어보겠다

 

보통 네브바는 ul로 구성되고 그 안에 많은 리스트들로 구성된다고 한다~ 반드시는 아니지만 보통 그렇다 하니 그렇게 연습해보자

 

developer.mozilla.org/ko/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines

HTML 구획과 개요 사용하기 - 웹 개발자 안내서 | MDN

 

friends.html로 index.html을 복사해서 넣어주고 필요없는 welcom header와 form 은 삭제해주고

바디에 들어갈 내용을 수정한다

 



이러한 네브바를 만들어 줄텐데

네브바아래 언오 더 리스트 하나 안에 리스트 4개와 각각에 링크를 걸어준다.

이번부터는 id를 사용하지 않고 class만을 이용해 css를 해준다.

각 리스트들이 block형태이니 flex로 main-axis로 정렬시킨다.

space-between으로 일정하게 떨어 뜨려 주고 navbar자체의 배경색을 지정해준다. 상단 보더라인을 그려준 뒤 각각 간격을 패딩을 통해

일정한 간격을 조정해주고 navbar는 항상 보여야 하기 때문에 position을 fixed 한다. 아래로 붙이기 위해 bottom을 0으로 하고

포지션이 고정되면서 뭉개진 각 박스들을 width값을 100%로 해서 조정한다

100% 로하니 패딩 때문에 ellipsis icon 이 어딘가로 숨어버렸다. 

해결방법은 box-sizing속성 값을 border-box로 주니 전부 잘 보인다!

 

box-sizing의 원리를 알아보자.

기본적으로 css의 box 모델은 내가 박스 크기를 지정했다면 그 크기를 유지하려고 한다.

그러므로 padding을 주고 width가 100%라면 padding만큼 박스는 커져있고 그 상태에서 content가 밀려서 다음 칸? 암튼 어딘가로 숨어버리는 거다. 그래서 내가 width를 얼마를 주든 padding을 얼마나 주든 상관없이 내가 지정한 박스 사이즈를 넘기지 말라고

box-sizing을 border-box로 지정한 거라고 한다. 어느 정도 이해는 되는데 좀 더 써봐야겠다.

그런 다음 메시지가 들어오면 알림이 뜨는 기능을 보여주자

 

chat 링크 태그에 span태그 하나를 만들어 주고 css를 해준다.

적당한 높이와 너비 그리고 백그라운드 색상을 만들어주고 span은 인라인 요소이므로 flex 해주고

main & cross axis에 모두 센터화하고 위치를 조정해준다.

여기서!!! 고정된 위치에서 위치를 조정하는 것은 position - absolute인데!  그냥 absolute를 주면 body에 상속되어

위치 조정 시 body태그를 기준으로 옮겨 다닌다;; 

그러므로! 앞에서 배웠다시피 조상중 relative 한 속성을 가진 태그에 상속받으므로 chat링크에 포지션 relative를 해주자!

과제로 ellipsis 부분도 만들라고 하셔서 점찍어서 만들어 봤다. 뭐 채팅 인포보다는 코드량이 적긴 한데 만들어지긴 했다.

요렇게 끝!!!!

 

다음은 friends screen 작업을 해본다.