Enjoy Programming

진행중 한가지 문제가 생겼다, chat.html만이 아닌 다른 페이지도 statusbar를 고정하기위해 컴포넌트의 statusbar에 포지션을 픽스해줬는데 왠걸 고정하고 헤더에 패딩줬더니 같이 움직인다... 아 골머리 아프다..... 어딘가에 패딩이나 마진을 줘서 고정부위랑 멀어지게 하려고 했는데 도통 통하질 않는다.! 그러나 찾았따..... 기본적인 status-bar에 fixed를 하고 보더박스에 담아준뒤 z-index를 설정해주면 되는거였다. 일단 statusbar는 모두 항상 맨위에서 고정이니 z-index를 높은 값을 주고 헤더에 패딩을 줬더니 잘먹는다!!! ㅋㅋㅋㅋ alt헤더부분은 따로 적용이므로 그쪽에 다시 패딩을 주면 끝 근데 채팅창 헤더도 alt헤더이다 보니~ 너무 내려간다.. 알트헤더부..

이제 할일은 아래 텍스트 입력창과 키보드를 만드는 일이다~ 먼저 텍스트를 입력해서 전송할 것이기 때문에(여기서는 백단은 하지 않으므로 보이기만) reply클래스의 form태그를 생성한다 form태그 안에 plus버튼의 칼럼과 채팅창과 이모티콘 엔터를 입력할 칼럼 두개를 만들어주자 div.reply__column * 2를 만들고서 첫번째 칼럼에는 +아이콘을 배치해주고 두번째 칼럼은 텍스트를 입력할 input을 만들어준다 input아래에는 스마일 아이콘과 입력버튼을 만들고 버튼안에 다시 arrow아이콘을 넣는다. 이제 꾸미기만 하면 된다. 입력창은 하단에 고정이되어야 하기 때문에 fixed해주고 가장하단부분인 bottom 0으로 값을 준다. width가 설정이 안되어 있으니 100% 배경화면은 흰색으로 바꾸..

자 헷갈리지 말자 chats.html 이 있고 chat.html이 있다. chats는 채팅방들이 있는 페이지이고 이번에 만들 페이지는 채팅방에 입장 후 채팅방 페이지이다. 아 여기서 머리좀 아팠다... position: fixed떄문에... 우선 역시 setting.html을 복사 붙여 넣기 해주자. 그리고 필요없는 네브바 지우고 메인 안도 다 삭제 해주자. 일단 헤더부분에 아이콘 하나만 추가하자 마지막 칼럼에 추가해주고 간격 조정 해주자. 그 후 채팅창은 계속 글이 업데이트 되니 뷰포트를 크게 설정 해준다 그러기 위해 body에 id값을 줬다. 다른 곳이랑 혼용되면 안되니까~ 이제 머리가 아팠던... position : fixed차례이다... 앞서 먼저 만들었던 status-bar.css에 다른 페이지..