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

14) 메세지 버블 만들기

chat.css 화면

메세지 버블에 배경색을 주고

padding을 주고 모서리를 둥글게 함.

 

 

적용된 모습

메세지 버블이 생김.

 

 

15) 시간 밑으로 내리기

chat.css 화면

flex 해주고 flex-end 해주어 밑으로 내림.

 

 

적용된 모습

메세지 버블과 시간이 밑으로 조금 내려간 것을 볼 수 있음.

 

 

 

16) 시간 스타일 하기

chat.css 화면

시간을 메세지 버블과 약간의 거리를 두고

글자색을 연하게 하고 글자 크기를 키움.

 

 

적용된 모습

이때 시간의 글자색과 크기는 이름과 동일함.

 

 

 

17) 메세지 버블 말풍선 모양으로 만들기

chat.css 화면

원하는 위치의 border를 선택하여 (border-top-left)

radius를 0으로 해줌.

 

 

적용된 모습

말풍선 처럼 변경된 것을 볼 수 있음.

 

 

chat.css 화면

글자 크기를 더 키워줌.

 

적용된 모습

말풍선처럼 생긴 메세지 버블이 만들어짐!