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

11) 타임스탬프 스타일하기

chat.css 화면

타임스탬프의 배경색을 조금 더 어두운 색으로 변경하고

글자색과 글자크기를 변경함.

padding을 주고 border를 둥글게 변경함.

 

 

적용된 모습

타임스탬프의 스타일이 변경됨.

 

 

chat.css 화면

main 파트에 flex를 하여

주축과 교차축을 바꾸어 요소들이 세로로 정렬되게 함.

주축과 교차축이 변경되었기 때문에

가로에서 중앙에 위치하게 하려면

align-items를 중앙으로 해주어야 함.

 

 

적용된 모습

타임스탬프가 만들어짐.

 

 

 

12) 메세지 만들기

chat.html 화면

main의 타임스탬프 코드 밑에

메세지 코드를 작성함.

 

프로필 사진과 닉네임,

대화내용과 시간을 작성해줌.

 

 

적용된 모습

작성한 것들이 나타남.

 

 

 

13) 메세지 스타일 변경하기

chat.css 화면

이미지의 크기를 작게 줄이고

모서리를 둥글게 해줌.

 

 

적용된 모습

 

 

chat.css 화면

widht:100% 를 해주고

요소들이 가로로 위치해야 하기 때문에

이미지와 내용들이 가로로 올 수 있도록 flex 해줌.

 

 

적용된 모습

메세지 박스가 왼쪽 끝으로 이동되었고

요소들이 가로로 위치하게 됨.

 

 

chat.css 화면

이미지의 오른쪽에 공간을 줌.

 

 

적용된 모습

이미지와 내용들이 떨어짐.

 

 

chat.css 화면

상대방 이름을 연하게 하고 글자 크기를 줄임.

block으로 바꾸어주고 밑에 margin을 줌.

 

 

적용된 모습

이름과 대화 내용 사이에 공간이 생김.