본문 바로가기

분류 전체보기

 (989)
CSS 애니메이션 : 접근성 전정기관 장애가 있는 사람들에겐 잘못된 애니메이션이 불쾌감을 유발할 수 있음 미디어 쿼리의 prefers-reduced-motion를 통해 애니메이션 효과를 줄일 수 있는 옵션 제공하기 1. 애니메이션 디폴트, 설정으로 끄기 .fancy-box { width: 100px; height: 100px; transform: scale(1); transition: transform 300ms; } .fancy-box:hover { transform: scale(1.2); } @media (prefers-reduced-motion: reduce) { .fancy-box { transition: none; } } 2. 애니메이션 없음 디폴트, 설정으로 on .fancy-box { width: 100px; heigh..
CSS 애니메이션 : 설계 Types of animation 작가 Rachel Nabors는 그녀의 놀라운 책 “Animation At Work”에서 애니메이션의 5가지 일반적인 범주를 설명합니다. Transition : 한 페이지에서 다른 페이지로 이동 모달 열기 또는 닫기, 다음 단계로 이동하는 다단계 마법사와 같이 페이지의 내용을 상당히 변경합니다. Supplements : "위치" 또는 작업을 변경하지 않고 페이지에서 정보를 추가하거나 제거합니다. 예를 들어 알림이 모서리에 나타날 수 있습니다. Feedback : 사용자가 애플리케이션이 사용자 입력에 어떻게 응답했는지 이해하는 데 도움이 됩니다. 예를 들어, 양식을 제출할 때 나타나는 오류 메시지 또는 클릭 시 아래로 미끄러지는 버튼이 눌러져 있음을 나타냅니다. Demon..
CSS 애니메이션 : 성능 느린 애니메이션은 사용자 경험을 망칩니다. 우리의 뇌가 애니메이션을 부드럽게 인식하려면 초당 60프레임이 필요합니다. 이는 각 프레임 업데이트에 16ms 정도만 소비해야 한다는 것입니다. 안그러면 사용자는 버벅거림을 느끼게 됩니다. 애니메이션 성능은 깊고 심오한 주제임으로 필수 사항만 짚고 넘어갑니다. 픽셀 파이프라인 화면의 픽셀 색상을 업데이드 하는 경우, 다음과 같은 단계의 파이프라인이 있습니다. 스타일 재계산 — 먼저 어떤 CSS 선언이 어떤 요소에 적용되는지 파악해야 합니다. 레이아웃 — 다음으로 각 요소가 페이지에서 어디에 위치하는지 파악해야 합니다. 페인트 — 모든 것이 어디에 있는지 알게 되면 페인트를 시작할 수 있습니다. 이것은 모든 픽셀이 어떤 색상이어야 하는지 파악("래스터화")하고 채..
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..

티스토리툴바