겸이네~

이번엔 채팅창 애니메이션을 추가해보자 먼저 fadeIn을 만들어 본다~ @keyframes를 이용해 fadin method를 하나 만들어준다 시작은 translateY(30px)로 투명도 0을 주고 마무리는 transform : none; 투명도 1을 줘서 아래서 위로 올라오는 메소드이다. 원래 메인 챗에 전부 적용 했으나 메세지 박스는 좌우로 페이드인 시켜주기 위해 타임스탬프에 animation효과를 주었다 그리고 좌우측에서 fadein효과를 만드는 메소드를 두개 만들어서 message-row에 좌측 페이드인 message-row--own에 우측 페이드인을 줬다 이어서 reply박스에 효과를 준다. 여기서 focus-within을 사용했다. focus-within pseudo class는 포커스를 받았..

이번엔 설정창으로 들어가는 톱니바퀴에 애니메이션을 준다 역시 @keyframes로 method를 하나 만들어준다 시작은 none; 끝은 z축으로 360도 회전하게 해준다~ 그리고 .screen_header--icons .fa-cog 에 animation 효과로 2초간 linear로 infinite한 효과다. 잘 굴러간다~ 이번엔 find.html의 open-post에 하트 아이콘 애니메이션을 넣어보자 먼저 하트 아이콘의 위치는 .open-post__heart__count안에 있다 여기에 마우스를 가져가면 하트의 색상 변화 및 scale을 조절해 움직이도록 해주자 0%일때는 흰색에 트랜스폼은 논이고 50%일때 컬러가 바뀌고 scale은 1.5로 들어간다 여기서 scale은 x,y축에 따로 줄수 있지만 전체..

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

키보드 만드는건 버리고 애니메이션 추가로 넘어 간다. 첫화면인 friends로 들어가면 카카오톡 화면이 뜨고 사라지는 것이다. div.splash-screen을 만들고 안에 로고? 아이콘을 넣어준다. 백그라운드 색상 변경을 해주고 높이 100vh 너비 100vw top0 flex, center로 만들어준다 내 경우 statusbar가 픽스드 되어 가장 높이 설정되어 있기 때문에 z-index를 100으로 줘서 제일 위로 오게 했다. 이제 전에 배웠던 애니메이션 효과를 주는 @keyframes를 쓴다 from {} to {} 구문을 활용해서 opacity를 조절해주고 #splash-screen에 animation : 애니명 1s ease-in-out을 설정한다 이렇게만 하면 애니메이션이 끝나면 다시 원래 ..

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