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

18) 반대쪽 메세지 버블 만들기

chat.html 화면

메세지 버블을 복사하여 밑에 붙여넣음.

 

 

적용된 모습

메세지 버블이 두 개가 됨.

 

 

 

19) 스타일 변경하기

chat.html 화면

필요없는 부분인 이미지와 이름을 삭제함.

 

 

적용된 모습

메세지 버블이랑 시간만 남음.

 

 

chat.css 화면

메세지 버블을 반대쪽으로 이동시킴.

 

 

적용된 모습

두 개의 메세지 버블이 서로 반대쪽에 위치하게 됨.

 

 

chat.css 화면

메세지 버블이 반대로 이동하였으니

말풍선의 모양도 변경되어야 함.

 

색을 기존에 사용했었던 노란색으로 변경하고

기존에 0px인 부분은 다시 15px로 만들고

반대쪽에 0px을 줌.

 

 

변경된 모습

두 메세지 버블의 모습이 다르게 됨.

 

 

 

20) 메세지 버블과 시간 위치 바꾸기 (order)

chat.css 화면

노란색 메세지 버블에

order:1을 해줌.

 

 

적용된 모습

메세지 버블과 시간의 순서가 서로 바뀜.

 

현재 message__info는 flex 상태임.

 

flex의 자식들에게는 order라는 기능이 있고

flex의 자식들에게는 순서가 있음.

 

0이 앞이고 숫자가 커질수록 뒤의 자식을 가리킴.

order: 1; 을 하게 되면 두 번째 자리가 되는 것임.

 

 

그러나 이 방법은 코드가 너무 길고 복잡함.

다른 방법으로도 간단히 변화를 줄 수 있음.

 

 

 

21) 메세지 버블과 시간 위치 바꾸기

chat.css 화면

메세지 버블과 시간이 들어 있는 부모 태그인

message__info에 row-reverse를 하여

자식들의 순서가 거꾸로 되게 함.

 

 

적용된 모습

메세지 버블과 시간이 간단히 서로 위치가 바뀜.

 

 

 

22) 세부사항 변경하기

chat.css 화면

메세지 버블의

기존에 있던 오른쪽의 공간을 없애고

왼쪽에 공간을 주어 시간과 거리를 둠.

 

 

적용된 모습

왼쪽에 공간이 생겨 시간과 떨어진 모습을 볼 수 있음.

 

 

chat.html 화면

메세지의 내용과 시간을 다르게 작성해봄.

 

 

변경된 모습

두 메세지 버블이 서로 다른 메세지를 보내고 있고

서로의 스타일도 조금씩 다른 것을 볼 수 있음.