37. Chat Screen 화면 만들기 (html,css - 채팅화면 1)

1) chat.html 기본설정

chat.html 화면

chat.html 파일을 생성함.

 

 

chat.html 화면

settings.html 파일에서 코드를 복사해서 붙여넣음.

 

 

chat.html 화면

title을 변경해줌.

 

 

 

2) 페이지 연결하기

chats.html 화면

chat.html 파일이 아닌

chats.html 파일의 user-component에

chat.html로 가는 링크를 걸어줌.

 

 

적용된 모습

chats 화면에서 클릭하면 chat화면으로 감.

 

 

 

3)  불필요한 부분 삭제

불필요한 것들

이번 화면에서 필요없는 main 파트의 내용과

navigation bar를 지워줌.

 

 

chat의 header

chat의 header 부분을 수정함.

제목을 변경하고

아이콘을 추가함.

 

 

적용된 모습

제목이 채팅 상태의 이름이 되고

아이콘이 추가됨.

 

 

 

4) chat.css 파일 만들기

chat.css 화면

스타일을 하기 위해 chat.css 파일을 만듬.

 

 

style.css 화면

물론 chat.css 파일도 import 해주어야 함.

 

 

chat.html 화면

     chat.html 파일의 body에 class를 부여함.

(스타일을 하기 위함.)

 

 

 

5) 화면 배경색 변경하기

chat.css 화면

body에 배경색을 줌.

 

 

변경된 모습

배경색이 변경됨.