navgation bar html, css 작성
index.html 을 그대로 복사해서 <head>와 status-bar, <script> 부분만 남기고 전부 삭제
단축키를 사용해서 하단 navigation-bar 만들기
nav(nav)>ul(nav__list)>li(nav__btn)>a(nav__link)
위치 아래로 고정
.nav {
position: fixed;
bottom: 0;
width: 100%;
}
마지막 아이콘이 옆으로 밀려나서 보이지 않음
width: 100% -> navigation-bar가 width를 100% 차지하게 만들고,
padding: 20px 50px; -> padding을 양쪽에 50px씩 주면서
width를 100% 유지하기 위해 왼쪽부터 50px씩 밀려남(box가 padding의 50px*2만큼 커짐)
-> box-sizing: border-box;
padding을 줘도 박스사이즈가 변하지 않게함
아이콘 앞에 <span>추가해서 메시지 알림 추가
border-radius는 height와 width의 반 크기로 하면 원형으로 작성됨
박스의 위치를 조금씩 옮기려면 display: absolute로 작성 -> 그러면 상위 container가 아닌 body기준으로 위치가 움직여짐
상위 container(nav__link)에 display: relative를 작성하면, 상위 container를 기준으로 옮겨짐
'HTML CSS' 카테고리의 다른 글
| KokoaTalk Clone Coding: friends screen 3(friends' display) (0) | 2021.05.17 |
|---|---|
| KokoaTalk Clone Coding: friends screen 2(header) (0) | 2021.05.17 |
| KokoaTalk Clone Coding: sign up screen recap and form (0) | 2021.05.12 |
| KokoaTalk Clone Coding: sign up screen 4(status-bar, header) (0) | 2021.05.12 |
| KokoaTalk Clone Coding: sign up screen 3(status-bar, header) (0) | 2021.05.11 |
