Day5_VSCODE_CSS CSS 2D+Transform

🟢CSS 2D
도형에 관한 처리

 

🟢 css animation
- 요소의 현재 스타일을 다른 스타일로 변환

🟡@ketframe
시작:0%  or from

과정:1% or 5% or 10%

끝: 100% or to

[원리]
0%      5%      50%.....    100%
장면1   장면2   장면3       마지막 장면


🟡animation-name: 애니메이션의 이름을 설정 ✔

🟡animation-fill-mode: 애니메이션이 끝난 후 어떻게 처리할지 설정
    forwards: 애니메이션 완료시, 마지막 프레임을 유지

🟡animation-direction: 애니메이션의 지정 방향 설정
    reverse: 반대 순서로 진행
    alternate: 정해진 순서로 진행 했다가, 다시 반대순서로 돌아감
    reverse-alternate: 반대 순서로 진행 했다가, 다시 정해진 순서로 돌아감

🟡animation-duration: 애니메이션이 일어나는 시간을 설정

🟡animation-iteration-count: 애니메이션이 몇 번 반복할지 설정
    infinite: 무한반복
    숫자: 숫자만큼 반복

 

🟢 css 우선순위 계산
1. 동일한 속성을 적용할 경우 나중에 적용한 것이 우선

2. 외부 스타일시트와 내부 스타일시트의 적용은 순서에 따라 나중에 적용한 것이 우선

3. 내부, 외부, 인라인 스타일 시트 중 인라인을 우선시한다.

4. 계산식 
    -inline:1000점
    -id속성: 100점
    -class,속성 선택자: 10점
    -element: 1점

5. !important: 어떤 것을 사용하든 제일 우선순위

 

 

🟡transform
- 2차원 좌표에서 요소를 변형시키는 속성
    translate:이동
    rotate: 회전
    scale: 확대 축소
    skew: 경사, 비틀기

 

🟡transition
- 요소에 추가할 css 스타일 전환효과를 설정
- 추가할 전환효과나 지속시간도 설정가능
    property: 요소의 추가할 전환효과 설정
    timing-function: 전환 효과의 값을 설정
        linear: 처음부터 끝까지 일정한 속도
        ease: 전환효과가 천천히 -> 빨라지고 -> 천천히 -> 끝
    
    duration: 전환효과를 나타내는 시간을 설정
    delay: 설정한 시간만큼 대기하다 전환 효과를 나타냄