Enjoy Programming

네브바에 애니메이션 추가하기. 우선 네브바 버튼중 채팅창 버튼에 notification부분에 애니메이션 효과를 준다. 간단하다 @keyframes를 이용해 0%일때 트랜스폼은 none이고 50%일때 트랜스폼은 Y축으로 trasnlate -5px rotate 180도를 준다 100%일때는 transform을 다시 none으로 만들어 준다. 그런다음 notification속성에 애니메이션을 넣어주면 된다 계속 지속되기 위해 infinite특성을 붙여주자 그리고 네브바에 버튼들이 아래서 차례대로 올라오는 효과를 주자. nav_btn 클래스들에 @keyframes를 이용해 메소드를 하나 만들어 준다 Y축으로 50픽셀 아래서 올라오는 효과인데 transform: trasnlateY(50px)을 keyframes에..

진행중 한가지 문제가 생겼다, 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% 배경화면은 흰색으로 바꾸..

자 이번엔 아래 내가 작성한 메세지를 만들어주자 일단 외부 메세지를 복붙하자 복붙하고 아래로 간격을 주자 필요없는 이미지 태그와 작성자 태그는 삭제를 해주고 메세지 박스가 왼쪽에 있는걸 오른쪽으로 당겨와야 한다~ 이때 message-row의 modifier를 만들어주자 클래스명 하나를 더 생성후 이미 message-row는 flex상태이므로 modifier의 justify-content를 flex-end로 오른쪽으로 정렬 시킨다. 그리고 modifier의 mesaage__bubble의 배경색을 전역으로 설정한 --yellow색상으로 바꿔주고 border-top-right-radius:0; border-top-left-radius: 15px 로 설정해서 오늘쪽 상단을 뾰족하게 만들어준다. 이제 메세지 인포..

자 저번 시간에 이어 chat창을 만들어 보자. 우선 상단에 status-bar와 header를 포지션 고정 시키고 위치값 조정하고 레이어 순서를 z-index를 통해 정렬 해주었다. 이제 메인 태그로 돌아와 main-chat을 손보자 메인태그는 고정된 스테이터스바와 헤더와 다른 레이어이므로 고정된 애들과 같이쓰면 겹치게 되어 안보이니 마진탑으로 위치를 조정해주고 태그들을 만들어 나간다. 마진탑 120정도 주고 타임스탬프의 글씨는 흰색 배경색은 회색 비스꾸리한걸로 조정한다 박스에 패딩을 15정도 주고 글씨크기 보더의 둥글기 조절해주고 박스가 가운데 오도록 하기 위해 flex해주고 flex-direction을 column으로 바꿔주자 그런 다음 align-items:center로 중앙 정렬 해주면 끝! f..

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