Cocoa Talk 2 - 2 Friends

자 이번 시간엔 네브바도 끝났으니 2번째 페이지의 헤더를 만들어 보자

 

간단하다

 

header 태그를 만들어주고 타이틀 h1태그랑 div 박스 하나 만들어주고 그안에 아이콘 세개 넣을 span태그 세개 만들어준당

머 똑같이 fontawesome에서 아이콘 가지고 오고 ~기본 html을 작성 해준다.

 

이제 css로 박스들을 인라인 블럭으로 만들어 줄테니 flex를 해주고 역시 space-between으로 간격을 준다.

그리고 정렬이 제대로 안되니 align-items로 cross axis를 센터로 정렬해준다

클론할 간격을 맞추고 타이틀 글자 맞추고 아이콘 간격 마진값을 설정해준다.

 

간단한 작업이었당.

 

음 그리고 페이지 마다 자주 사용되는 레이아웃은 components로 설정하고 개별로 사용하는 부분은 screen폴더에 따로 css를 저장하고 있다. 이게 차후 어떻게 적용되는지 진행하며 봐야겠다~ 

 

이어서 스크린 부분에 들어가는 개인 프로필 아이디랑 채팅방 부분을 작성 해보자.

 

간단한 링크로 friends names display부분 작성

링크 안에 텍스트 적어주고 center에 놔두고 컬러값 주고 아이콘 배치하고 역시 컬러 조정 해주고 ~ 간격 조절 ~