Enjoy Programming

https://codesandbox.io/s/a11blueprint-forked-0q4pq?file=/src/movieController.js a11Blueprint (forked) - CodeSandbox a11Blueprint (forked) by lee-tae-eon using @babel/core, @babel/node, @babel/preset-env, axios, body-parser, express, mongoose, pug codesandbox.io mongoDB 이용하기..

이번엔 채팅창 애니메이션을 추가해보자 먼저 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헤더이다 보니~ 너무 내려간다.. 알트헤더부..