KokoaTalk Clone Coding: chat-room screen 2

chat-room middle screen html css 작성

chat-room screen

 

div.message-row에 프로필 image와 대화 content

 

.massage-row의 상위의 .chat-room이 

 

위와 같이 중간정렬로 설정되어있기 때문에, message-row: 100%; 로 설정해야 디폴트 왼쪽으로 정렬됨

 

width: 100%를 작성하지 않았을 때

 

width: 100%를 작성했을 때

 

image와 이름 css 적용

 

align-items: flex-end; 를 적용하면

 

해당 높이 내에서 끝으로 정렬이 됨 → buble은 움직일 높이가 없기 때문에, 시간만 끝으로 이동

 

bubble의 왼쪽 상단 border-radius를 위와 같이 변경해주면,

 

왼쪽 상단 모서리가 변경됨

 

다음 메세지는 위의 메세지를 복사+붙여넣기 해서 수정 할 예정

 

복사한 message-row에 message-row--own 이라는 클래스를 추가해서 modifier를 만들어주고 image와 author 삭제

 

.message-row에는 이미 display: flex;가 적용되어 있기 때문에, justify-content: flex-end; 만 작성

 

border-radius를 이용해서 각진 모서리 방향을 변경

 

bubble과 time의 순서를 변경

→부모인 message-row__info에 display: flex; 로 적용되어 있기 때문에, order의 기능을 이용해서 순서를 바꿔줌

 

이 방법은 코드 작성이 길어지기 때문에, 다른 방법을 사용하려면

 

열에서 순서를 바꿔줌

 

margin을 위의 buble과 반대방향으로 만들어주기 위해서, 위와 같이 작성