천진난만 코딩 스토리
14. Friends 화면 만들기 (css-navigation bar 2, border box사용) 본문
노마드코더/코코아톡 클론코딩
14. Friends 화면 만들기 (css-navigation bar 2, border box사용)
Wisdom_1104 2022. 11. 11. 16:491) 아이콘 하단에 고정하기
position: fixed; 을 하여
고정시킨 다음,
bottom: 0; 을 하여
아래쪽에 고정되게 함.
아이콘이 아래에 고정된 것을 볼 수 있지만
아이콘이 몰려 있음.
2) 아이콘 간격 넓히기
width: 100%; 를 하여
아이콘의 간격을 넓혀줌.
아이콘의 간격이 넓어진 것을 볼 수 있음.
하지만 padding 때문에 아이콘 하나가 화면 밖으로 벗어남.
3) 아이콘 모두 화면에 위치시키기
box-sizing: border-box; 을 하여
아이콘이 화면에 모두 위치하게 만듬.
(border-box에 대한 내용은 다음 포스팅에..!)
(지금은 사용한 모습만 보여줌)
아이콘이 화면에 모두 위치하면서 스크롤을 내려도 고정되어있게 만듬.
(확인하기 위해
body를 길게하여 스크롤을 만들어 줌)
4) status-bar 상단에 고정하기
navugation bor와 같은 방식을 사용함,
position:fixed;을 하여
고정시킴.
top: 0; 을 하여
상단에 고정하도록 함.
width: 100%; 을 하여
아이콘의 사이를 넓혀주고
box-sizing: border-box; 을 하여
한 화면에 모두 들어오도록 함.
스크롤을 아무리 내려도
status bar와 navigation bar가 고정되어 있는 모습을 볼 수 있음.
'노마드코더 > 코코아톡 클론코딩' 카테고리의 다른 글
16. Friends 화면 만들기 (css-navigation bar 2) (0) | 2022.11.11 |
---|---|
15. Friends 화면 만들기 (Border Box) (0) | 2022.11.11 |
13. Friends 화면 만들기 (css-navigation bar 1) (0) | 2022.11.11 |
12. Friends 화면 만들기 (html-상태바, navigation bar) (1) | 2022.11.11 |
11. Log in 화면 만들기 (css- 파일분할, date 보내기) (0) | 2022.11.10 |