Musthave HTML&CSS Day5

yoonjin·2022년 12월 11일
0

MustHave_HTML&CSS

목록 보기
3/4

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)

: 깃허브 저장소에 있는 파일을 가져오는 작업

0개의 댓글