CSS 애니메이션
1. 전환(transition)
: 시간에 따른 상태를 지정하는 애니메이션
- 필수 속성
전환 속성값
전환 시간
- 선택 속성
전환 타이밍
전환 지연
전환 속성값(transition-property)
: 전환될 속성을 지정
개별 속성 또는 전체(all) 속성에 지정 가능
전환 시간(transition-duration)
: 전환을 시작해서 끝날 때까지의 시간을 지정
s, ms 지정 가능
전환 타이밍(transition-timing-function)
: 전환이 이루어지는 시점을 지정
linear, ease(기본값), ease-in, ease-out, ease-in-out, step-start, step-end
전환 지연(transition-delay)
전환이 시작되는 시기를 지정
2. 변형(transform)
회전(rotation)
: 지정된 각도(deg)만큼 요소를 시계(양수) 또는 반시계(음수) 방향으로 회전시킴
transform: rotate(deg)
기울이기(skew)
: 요소의 X축과 Y을 제공된 값에 따라 기울임
transform: skew(deg)
skew/ skewX/ skewY
크기(scale)
: 요소 크기를 늘리거나(>1) 줄임(<1)
transform: scale(n)
transform: scale(n m)
scale/ scaleX/ scaleY
이동(translate)
: 요소를 상하좌우로 이동, 주어진 값이 양수이면 양의 방향, 음수이면 음의 방향으로 이동
transform: translate()
translate/ translateX/ translateY
*애니메이션은 지정한 요소의 형제 요소에는 영향을 미치지 않음
3. 키프레임(keyframe)
@keyframes animationname {keyframes-selector {css-styles;}}
애니메이션은 개수 제한없이 키프레임 형성 가능
- 백분율(0-100%) 지정 방식
- from to 지정 방식
깃/깃허브
깃 : 문서나 소스 코드 같은 파일의 변경 이력을 관리해주는 시스템, 코드 버전 관리 소프트웨어
깃허브 : 협업 및 버전 관리에 사용되는 소스 코드 호스팅 플랫폼, 깃을 SaaS(Software as a Service) 형태로 제공
핵심 개념
저장소(repositories)
브랜치(branch)
: 버전별 저장소 (메인 브랜치, 서브 브랜치)
서브 브랜치를 메인 브랜치에 병합하기 전까지 서브 브랜치에 수정한 내용은 메인 브랜치에 영향을 주지 않음
클론(clone)
: 깃허브 저장소에 있는 파일들을 로컬 컴퓨터로 복사본을 만드는 작업
에드(add) -> 커밋(commit) -> 푸시(push)
커밋 : 변경사항
풀(pull)
: 깃허브 저장소에 있는 파일을 가져오는 작업