Cocoa Talk 7 - 2 Chat.html

자 저번 시간에 이어 chat창을 만들어 보자.

우선 상단에 status-bar와 header를 포지션 고정 시키고

위치값 조정하고 레이어 순서를 z-index를 통해 정렬 해주었다.

이제 메인 태그로 돌아와 main-chat을 손보자

메인태그는 고정된 스테이터스바와 헤더와 다른 레이어이므로 고정된  애들과 같이쓰면 겹치게 되어 안보이니

마진탑으로 위치를 조정해주고 태그들을 만들어 나간다.

마진탑 120정도 주고 타임스탬프의 글씨는 흰색 배경색은 회색 비스꾸리한걸로 조정한다

박스에 패딩을 15정도 주고 글씨크기 보더의 둥글기 조절해주고

박스가 가운데 오도록 하기 위해 flex해주고 flex-direction을 column으로 바꿔주자

그런 다음 align-items:center로 중앙 정렬 해주면 끝!

flexbox에 대한 mdn은 여기서 확인하자

developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

flexbox의 기본 개념 - CSS: Cascading Style Sheets | MDN

그리고 메세지박스인 message-row는 행의 형태로 아래로 쌓여나간다.

먼저 수신 메세지를 작성한다.

수신메시지는 이미지가 들어가는 칼럼과 아이디,메세지, 시간이 들어가는 칼럼 두개가 보인다.

먼저 이미지를 넣고 메세지 컨텐트 칼럼을 만들어 주자

메시지 컨텐트 안에는 아이디가 들어가는 span과 메세지 내용과 시간이 들어갈 div박스를 만들어주자

다시 div박스안에 span태그 두개에 메세지 내용과 시간을 작성해준다.

이제 css로 정렬을 해주자.

message-row를 width 100%로 해주고 flex해주자

img사이즈 조절하고 옆 박스와 margin-right으로 간격을 준다,

타임 스탬프와 메세지 로우의 간격을 타임스탬프에 margin-bottom을 줘서 간격을 주자

이제 메세지 작성자 아이디가 들어가는 부분을 조정해주고 아래 메세지박스와 간격을 주자

span태그니까 block으로 바꿔줘야 아래 간격을 줄 수있다.

그리고 메세지 박스 이미지는 없으므로 비슷하게 만들어준다

박스의 배경색을 하얗게 해주고 패딩을 준다. 그리고 border-radius로 각을 둥글게 해준다

border-top-left-radius 를 통해 왼쪽 상단은 레디우스값을 0으로 만들어주면 비슷하게 만들어진다~!

좌우상하단을 저렇게 조절해서 모양을 바꿀 수 있다.

그리고 위치 조정을 위해 message_info부분을 flex화 해주고 align-items를 flex-end해주면 booo ya!

긋긋이다~ 근데 flex-end가 조금 헷갈리네.. 다시 잘 찾아보자