CSS (5) 썸네일형 리스트형 CSS // 전 const sizeStyles = css` /* 크기 */ ${(props) => props.size === "large" && css` height: 3rem; font-size: 1.25rem; `} ${(props) => props.size === "medium" && css` height: 2.25rem; font-size: 1rem; `} ${(props) => props.size === "small" && css` height: 1.75rem; font-size: 0.875rem; `} `; // 후 const sizes = { large: { height: "3rem", fontSize: "1.25rem", }, medium: { height: "2.25rem", fontSize: .. 18 - animation animation 요소에 애니메이션을 설정/제어 animation: 애니메이션이름 지속시간 [타이밍함수 대기시간 반복횟수 반복방향 전후상태 재생/정지]; @keyframes 2개 이상의 애니메이션 중간 상태(프레임)을 지정 @keyframes 애니메이션이름{ 0% { 속성: 값;} 50% { 속성: 값;} 100% { 속성: 값;} } 1. animation-name @keyframes 규칙(애니메이션 프레임)의 이름을 지정 값 의미 기본값 none 애니메이션을 지정하지 않음 none @keyframes 이름 이름이 일치하는 @keyframes 규칙의 애니메이션을 적용 2. animation-duration 애니메이션의 지속 시간 설정 (기본값: 0s) 3. animation-timing-function.. 17 - transform (변환 속성) 속성 의미 transform-origin 요소 변환의 기준점을 설정 transform-style 3D 변환 요소의 자식 요소도 3D 변환을 사용할지 결정 perspective 하위 요소를 관찰하는 원근 거리를 설정 perspective-origin 원근 거리의 기준점을 설정 backface-visibility 3D 변환으로 회전된 요소의 뒷면 숨김을 설정 transform-origin 요소 변환의 기준점을 설정 값 의미 기본값 X축 left, right, center, %, 단위 50% Y축 top, bottom, center, %, 단위 50% Z축 단위 0 transform-style 3D 변환 요소의 자식 요소도 3D 변환을 사용할지 설정 값 의미 기본값 flat 자식 요소의 3D 변환을 사용하지 .. 17 - transform (변환 2D, 3D 속성) 요소의 변환 효과(변형)를 지정 transform: 변환함수1 변환함수2 변환함수3... ; transform: 원근법 이동 크기 회전 기울임; (괄호가 들어가면 함수!) transform 2D 변환 함수 값(변환함수) 의미 단위 translate(x, y) 이동(X축, Y축) 단위 translateX(x) 이동(X축) 단위 translateY(y) 이동(Y축) 단위 scale(x, y) 크기(X축, Y축) 없음(배수) scaleX(x) 크기(X축) 없음(배수) scaleY(y) 크기(Y축) 없음(배수) rotate(degree) 회전(각도) deg skew(x-deg, y-deg) 기울임(X축, Y축) deg skewX(x-deg) 기울임(X축) deg skewY(y-deg) 기울임(Y축) deg ma.. 16 - transition CSS 속성의 시작과 끝을 지정(전환 효과)하여 중간 값을 애니메이션 값 의미 기본값 transition-property 전환 효과를 사용할 속성 이름 all transition-duration 전환 효과의 지속시간 설정 0s transition-timing-function 타이밍 함수(https://easings.net/ko) 지정 ease transition-delay 전환 효과의 대기시간 설정 0s 보통 바뀌기 전 상태에 transition 추가함. ease : 빠르게-느리게 linear : 일정하게 ease-in : 빠르게-느리게 ease-out : 빠르게-느리게 ease-in-out : 느리게-빠르게-느리게 steps(n) : n번 분할된 애니메이션 이전 1 다음