Cocoa Talk 7 - 4 chat.html

이제 할일은 아래 텍스트 입력창과 키보드를 만드는 일이다~

먼저 텍스트를 입력해서 전송할 것이기 때문에(여기서는 백단은 하지 않으므로 보이기만)

reply클래스의 form태그를 생성한다

form태그 안에 plus버튼의 칼럼과 채팅창과 이모티콘 엔터를 입력할 칼럼 두개를 만들어주자

div.reply__column *  2를 만들고서 첫번째 칼럼에는 +아이콘을 배치해주고

두번째 칼럼은 텍스트를 입력할 input을 만들어준다 input아래에는 스마일 아이콘과 입력버튼을 만들고 버튼안에 다시 arrow아이콘을 넣는다.

이제 꾸미기만 하면 된다.

 

입력창은 하단에 고정이되어야 하기 때문에 fixed해주고

가장하단부분인 bottom 0으로 값을 준다. width가 설정이 안되어 있으니 100%

배경화면은 흰색으로 바꾸고 flex해준뒤 space-between으로 간격을 준다.

align-items를 센터로 고정

input태그의 크기 조절을 해주고 width 100%, 간격조정

근데 width가 먹히지 않는다. 이유는 부모요소인 column이 width를 갖고 있지 않기 때문이다.

두개의 column중 첫번째 10% 두번째 90%를 주자~ 먹힌다

그리고 스마일 아이콘과 버튼을 포지션 absolute로 위치 조절을 해준다

하기 위해 부모 column을 relative포지션을 주자.

앱솔루트로 조절시 last-child:column에 직속 자식과 버튼을 설정해서 해야한다 안그러면 

버튼 안의 아이콘도 위치가 바뀌기 때문이다.

그리고 아이콘과 버튼의 간격을 조절

그리고 버튼의 색상과 크기 조절

버튼에 focus, active를 주고 outline을 없애주자

placeholder의 색상도 변경해주고 input에 패딩을 줘서 간격을 조금 준다.