KokoaTalk Clone Coding: chat-room screen 3

chat-room lower screen html css 작성

chat-room screen

 

입력창을 form으로 작성하고 플러스 icon과 메세지창 두 열로 나눠줌

 

reply 창을 아래쪽에 고정시켜줌

 

input 으로 들어간 메세지 입력창에 너비를  100%로 주기위해서

 

각 column에도 너비를 줘야함 

첫번째 column은 너비를 주면서 위치를 움직일 필요가 없고, 두번째 column의 icon들은 위치를 원하는 만큼 움직이기 위해서

먼저 position: absolute; 를 작성하고

 

적용될 icon에 position: absolute; 를 작성 → 위치를 원하는 만큼 움직임

 

icon에 opacity 조정해서 흐리게 만들고

 

button은 opicity: 1; 로 조정

 

아래 입력창은 완성

입력창 아래 키보드는 모바일에서 입력되는 키보드로 대체 → 만들지 않음