14. Friends 화면 만들기 (css-navigation bar 2, border box사용)

1)  아이콘 하단에 고정하기

고정시킨 모습

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가 고정되어 있는 모습을 볼 수 있음.