13. Friends 화면 만들기 (css-navigation bar 1)

1) nav-bar.css 파일 만들기

파일을 만듬

navigation bar를 스타일 하기 위해

nav-bar.css 파일을 만듬.

 

 

적용한 모습

스타일이 html 파일에 적용될 수 있도록

styles.css 파일에 import를 해줌.

 

이 때 파일의 순서는 중요함.

 

만약 reset.css 파일이 status-bar나 혹은 그 밑으로 가게 된다면

파일이 제대로 작동하지 않음.

 

 

 

2) 아이콘 위치 스타일 하기

스타일 한 모습

flex해주고 space-between을 해주어

아이콘들이 같은 간격으로 떨어져있게 함.

 

 

적용한 모습

아이콘들이 떨어져있는 것을 볼 수 있음.

 

 

스타일 한 모습

nav에 배경색을 주고

padding을 줌.

 

 

적용된 모습

배경색이 생기고

아이콘이 padding을 가지고 있는 모습을 볼 수 있음.

 

 

 

3) 아이콘 사이즈 변경하기

스타일을 한 모습

아이콘의 사이즈를 키우기 위해 모든 아이콘의 사이즈를

fa-2x를 해주어 크게 만들어줌.

 

이 때 편하게 하는 팁은?!

원하는 단어를 드래그하여 선택한 후

(맥 기준으로) cmd키를 누른 상태로 D키를 누르면

같은 단어가 하나씩 더 선택됨.

이렇게 해서 수정하면 한번에 수정할 수 있음.

 

 

변경된 모습

아이콘의 크기가 커짐.

 

 

 

4) 경계선 만들기

아이콘의 윗 부분에 경계선을 넣어주어 구분을 해보자.

 

 

스타일을 한 모습

윗 부분에 투명도를 연하게 하여

원하는 경계선을 넣음.

 

 

변경된 모습

경계선이 생긴 것을 볼 수 있음.

 

 

 

5) 아이콘 색 변경하기

스타일 한 모습

아이콘의 색을 변경하기 전에

reset.css 파일에

a의 색은 부모에게서 상속받고 기본 데코는 없앰.

그 후,

nav-bar.css 파일에서

원하는 색을 입력함.

 

 

변경된 모습

아이콘의 색이 변경된 것을 볼 수 있음.