TIL #018

오늘 개발한 것

BookStack📚

FE

• [x] StackPage 구현 마무리
  • [x] Stack List 순서 거꾸로 되도록
  • [x] Stak List 애니메이션 구현
  • [x] ProfilePage 이동 라우팅

BE

• [x] /stack GE API 구현 마무리
  • [x] bookCount & pageCount 정보 추가
  • [x] profileImage 정보 추가

오늘 공부한 것

emotion에서 animation 사용하기

import keyframes

import { keyframes } from '@emotion/react'

const ANIMATION_NAME = keyframes`
	// animation 내용들
`;

const container = styled.div`
		animation : ${ANIMATION_NAME} 0.3s ease-out;
`

animation 속성

아래 순서가 차례대로 적용

• animation-name
• @keyframes로 선언된 animation name을 가리키는 속성
• animation-duration
• 애니메이션이 한 사이클을 완료하는데 걸리는 시간 (6s, 120ms…etc)
• animation-timing-function 애니메이션이 실행되는데 적용되는 속도 등을 설정 (linear, ease-in-out, steps(5, end)…etc)
• animation-delay
• 애니메이션이 시작할 시점을 지정 가능 (250ms, 2s, -2s … etc )
• animation-iteration-count
• 애니메이션이 실행될 횟수 (0, 2, 1.5 … etc)
• animation-direction 애니메이션 진행 방향 설정 (normal, reverse, alternate… etc )
• animation-fill-mode 애니메이션 실행 전과 후에 대상에 스타일을 적용하는 방법 (none, forwards, backwards, both)
• animation-play-state 애니메이션 진행을 멈추고 다시 진행시킬수 있는 속성 (paused, running)

animation 적용 예시

// 중간에 생략된 속성들은 기본값이 적용됨
animation : ANIMATION_NAME 0.5s ease-out 2s forwards;

CSS

Aspect ratio

aspect-ratio : 16/1;

Div 텍스트 선택 차단

user-select: none;