18.Friends 화면 만들기 (css-header)

1) screen-header.css 파일 만들기

파일 만든모습

css 폴더의

components 폴더의

screen-header.css 파일을 만듬.

 

 

작성한 모습

만든 파일은

styles.css 파일에 import 해주어야 함.

 

 

 

2) 글자와 아이콘 정렬하기

작성한 모습

박스를 flex 하여

가로로 여유 공간을 flex 항목 사이의 공간을 일정하게 주고

세로로 중앙에 위치하도록 만들고

padding을 줌.

 

 

적용된 모습

글자와 아이콘이 정렬된 것을 볼 수 있음.

 

 

 

3) 글자 크기와 두께 변경하기

작성한 모습

글자의 크기를 크게 하고

두께도 두껍게 해줌.

 

 

적용된 모습

글자의 크기와 두께가 변경됨.

 

 

 

4) 아이콘에 margin 주기

작성한 모습

아이콘에 margin을 주어야 하므로

span에 magin을 줌.

 

 

적용된 모습

margin이 적용되어 간격이 넓어진 것을 볼 수 있음.

 

 

header 스타일은 여기까지 끝!