Cocoa Talk 7 - 3 Chat.html

자 이번엔 아래 내가 작성한 메세지를 만들어주자

일단 외부 메세지를 복붙하자

복붙하고 아래로 간격을 주자

필요없는 이미지 태그와 작성자 태그는 삭제를 해주고

메세지 박스가 왼쪽에 있는걸 오른쪽으로 당겨와야 한다~ 이때 message-row의 modifier를 만들어주자

클래스명 하나를 더 생성후 이미 message-row는 flex상태이므로 

modifier의 justify-content를 flex-end로 오른쪽으로 정렬 시킨다. 

그리고 modifier의 mesaage__bubble의 배경색을 전역으로 설정한 --yellow색상으로 바꿔주고

border-top-right-radius:0; border-top-left-radius: 15px 로 설정해서 오늘쪽 상단을 뾰족하게 만들어준다.

이제 메세지 인포에 메세지와 시간의 위치를 바꿔줘야 하는데

이때 css에서 order속성을 이용해 위치를 바꿔줄 수 있다.

developer.mozilla.org/ko/docs/Web/CSS/order

order - CSS: Cascading Style Sheets | MDN

order를 통해 flex또는 그리드 안에 박스 순서를 바꿔 줄 수 있는데 작은 숫자일 수록 앞으로 배치된다.

같은 숫자라면 먼저 작성된 순서로 배치된다.

이렇게도 할 수 있지만 일단 두개의 순서만 역순으로 배치하면 되기 때문에

.message-row--own .message__info {

flex-direction: row-reverse;

}

을 통해 역순으로 배치하자~ 간단하다

배치가 잘 되었다~!~!