2022/06/25 (6) 썸네일형 리스트형 CSS 애니메이션 : Keyframe 응용 Fill Modes 왜 사라졌다 다시 나타나지? from 및 to 블록의 선언은 애니메이션이 실행되는 동안에만 적용됩니다. @keyframes fade-out { from { opacity: 1; } to { opacity: 0; } } .box { animation: fade-out 1000ms; } HTML 삽입 미리보기할 수 없는 소스 즉, 기본값인 불투명도 1로 돌아가는 건데요, 그러면 애니메이션 종료 시의 속성을 선언해줘야 하나? @keyframes fade-out { from { opacity: 1; } to { opacity: 0; } } .box { animation: fade-out 1000ms; /* Change the "default" value for opacity, so that .. CSS 애니메이션 : Keyframe CSS 키프레임 애니메이션은 @keyframes at-rule을 사용하여 선언됩니다. 한 세트의 CSS 선언에서 다른 세트로의 전환을 지정할 수 있습니다. @keyframes slide-in { from { transform: translateX(-100%); } to { transform: translateX(0%); } } 각 @keyframes 문에는 이름이 필요합니다! 이 경우 이름을 slide-in으로 지정했습니다. 이것을 전역 변수처럼 생각할 수 있습니다. 키프레임 애니메이션은 일반적이며 재사용할 수 있습니다. animation 속성을 사용하여 특정 선택자에 적용할 수 있습니다. .box { animation: slide-in 1000ms; } 동일한 keyframe 선언에 여러 애니메이션을 .. CSS 애니메이션 : Transition Tansform으로 변환을 했다면, Transition으로 이전과 이후를 이어줍니다. 전환은 고도로 구성할 수 있지만 두 가지 값만 필요합니다. 애니메이션을 적용하려는 속성의 이름 애니메이션의 지속 시간 여러 속성에 애니메이션을 적용하려는 경우 쉼표로 구분된 목록을 전달할 수 있습니다. all도 가능하지만... 애니메이션은 소금과 같습니다. 너무 많으면 요리가 망합니다. .btn { transition: transform 250ms, opacity 400ms; } .btn:hover { transform: scale(1.2); opacity: 0; } Timing functions 웹에서 "모션"에 대해 이야기할 때 실제로는 시뮬레이션된 동작에 대해 이야기하고 있습니다. 픽셀 자체는 디스플레이에서 움직이.. CSS 애니메이션 : Transforms Translation in flow 위치에서의 이동. 해당 요소의 이동이 grid, flex 타 요소 배치에 영향주지 않음. 픽셀 transform: translate(0px, 20px); % : 원래 자신의 크기 transform과 left의 차이점 Scale 배수를 나타내는 단위없는 값 좌우따로 너비나 높이 수정 시 모든 요소들의 위치를 계산해서 다 변경해야함. transform은 대상만 움직이고 확대하기에 성능에 좋음 Rotate 시계 방향으로 돌림 degree : 회전 각도 turn : 회전 수 Skew 거의 안씀. 대각선 레이아웃 만들 때나 씀 : https://9elements.com/blog/pure-css-diagonal-layouts/ 디폴트 X축. Y축 가능 Transform or.. Styled-Components(CSS-in-js) 잘 활용하기 원문 보기 :https://www.joshwcomeau.com/css/styled-components/ The styled-components Happy Path styled-components is a wonderfully powerful styling library for React, and over the years I've learned a lot about how to use it effectively. This article shares my personal “best practices”. www.joshwcomeau.com CSS Variables Backdrop 컴포넌트에 불투명도와 색상 props가 필요하다고 가정해 보겠습니다. function Backdrop({ opacity, colo.. The Difference Between VAC(View Asset Component) Pattern and Container/Presenter Pattern https://www.patterns.dev/posts/presentational-container-pattern/ Container/Presentational Pattern Enforce separation of concerns by separating the view from the application logic www.patterns.dev https://wit.nts-corp.com/2021/08/react에서-view의-렌더링-관심사-분리를-위한-vac-패턴-소개/ React에서 View의 렌더링 관심사 분리를 위한 VAC 패턴 소개 | WIT블로그 React에서 View의 렌더링 관심사 분리를 위한 VAC 패턴 소개 시작하며 FE개발에서 View는 정보의 시각화 뿐만 아니라 사용자와 상호작용.. 이전 1 다음
