반응형 CSS3 [Framer] css애니메이션을 더 쉽고 아름답게 만들어주는 framer-motion 우선 애니메이션을 보다 쉽고 아름답게 만들어주는 framer를 사용하려면 우선 모듈부터 다운받아주어야 한다. yarn add framer-motion 예전에 만들어서 내 TIL에도 올렸던 회원가입과 로그인도 framer를 사용한 것이다. 페이지를 옆으로 넘어가게 하는 효과 같은 것과 버튼 모두다 framer를 이용하였다. https://www.framer.com/docs/introduction/ Introduction | Framer for Developers Get started with Motion and learn by exploring interactive examples. www.framer.com 2022. 2. 10. [CSS] Flex CSS display: flex; 기본적으로 justify-content는 row(가로)로 되어있기 때문에 main axis는 가로 / cross axis는 vertical(세로)로 되었다. 그러나 flex-direction: column을 하게되면 반대로 main axis는 vertical cross axis는 row로 변경되게 된다. 반응형으로 적용을 했을 때 박스모양이 망가지는 것을 방지하려면 flex-warp: warp을 사용하면 된다. 박스모양의 순서를 뒤집고 싶으면 flex-warp: warp-reverse 를 해주면 된다. 👍flex-grow : 자신이 가질 수 있는 최대 즉 여백의 값까지 가지게 된다. (반응형때 유용) flex-shrink : 만약 flex-shrink값을 2를 주었다면 그 값을.. 2021. 8. 13. [CSS] ul, li 태그 사용시 점 없애기 ul코드 사용할시 점이 생기는데 css에 아래쪽과 같이 ul{list-style:none;padding-left:0px;} 사용하고 코딩하면 그때부터 점이 생기지 않게 된다. 2021. 6. 4. 이전 1 다음
