CoCoa Talk 3 - 1 create chat.html

이제 세번째 페이지인 chat페이지를 만들어 보자.

 

자 이번 페이지는 잘 생각해보면 간단하다.

이전에 만들었던 friends.html페이지에서 필요없는 부분 빼고 몇 부분만 수정 해주면 된다.

 

아 그리고 수정하기에 앞서 friends & chat페이지의 네브바에 default로 해놨던 #대신에 각각 링크에 연결될 html주소를 적어주자

 

그리고서 friends.html을 전부 복사해 chat.html에 붙여넣고

필요없는 부분을 살펴보면~~~ 상단 friends name display부분이 필요없으니 삭제 해주고

메인의 friends-screen에서 두번째 user-component칼럼부터는 아에 필요없다. 삭제 해주자.

 

이제부터 변경해야 할 부분을 찾아보자

먼저 nav-bar부분! user 아이콘이 변화가 있다. fontawesome에서 찾아서 변경 해주자.

 

이어서 헤더 부분 타이틀 변경 해주고 코멘트 아이콘 추가해주자.

 

메인 태그에서는 먼저 메인 클래스 네임을 변경해주고 이름이 나타나는 부분 아래 서브타이틀을 달아주자

&& 두번째 칼럼에 채팅 시간과 뱃지를 달아 준다~

뱃지는 네브바에서 이미 사용했었기에 뱃지.css를 하나 만들어 주고 네브바에서 적용된 position을 빼고 잘라서 넣어주자

그리고 네브바에 badge 클래스를 추가하고 메인에도 맹글어 주자~

 

자 완성본을 보자.

not bad 다음 시간에~