[프론트엔드] CSS 6

CSS 2D
transform
- 이차원 좌표에서 요소를 변형시키는 속성
- 이동(translate), 확대/축소(scale), 회전(rotate), 경사(skew) 등을 만들 수 있음

벤더 프리픽스(vender prefix)
- 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때
  이전 버전의 웹 브라우저에 그 사실을 알리기 위해 사용하는 접두사를 의미
- 아직 CSS 권고안에 포함되지 않은 기능이나,

  포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용할 때 앞에 붙여준다. 

linear-gradient(방향, 색상1, 색상2)
background : linear-gradient(right, yellow, blue);

- 벤더 프리픽스를 사용하는 방법은 해당 속성이 적용되지 않았을 경우
  표현해야 할 코드를 가장 먼저 작성해야 하며, 표준 문법 코드는 가장 마지막에 작성해야 한다. 

 

* transition
- 요소에 추가할 css 스타일의 전환효과를 설정
- 추가할 전환효과나 지속될 시간도 설정

transition : property timing-function duration delay

- property : 요소에 추가할 전환효과를 설정
- timing-function : 전환효과의 값을 설정(변화되는 속도를 설정)
- linear : 일정한 속도로 변환
- ease : 전환효과가 천천히 시작 ~ 빨라졌다가 ~ 천천히 끝(ease-in, ease-out, ease-in-out)
- duration : 전환효과의 시간 설정
- delay : 전환효과의 대기시간 설정

hover 전

hover 후

컨테이너 위에 마우스 올리면 상자 굴러감, 아래 상자는 1초 뒤 구르기 시작해서 둘 다 동시에 도착

CSS 애니메이션
요소의 현재 스타일을 다른 스타일로 변화
@keyframes 애니메이션명{
from 혹은 0%
}
정수%{
중간지점에 적용할 스타일
}
to 혹은 100%{
마지막에 적용할 스타일
}
}

이거에서

이거로 바뀜

perspective()
- 3D 환경을 만들기 위해 사용자의 관찰자 시점(투영점)을 구체화해서 입체감을 부여하는 속성,

스크린에서 해당 px만큼 떨어진 곳에 관찰자가 있다는 것을 근거로 구성

* CSS 우선순위 * 
0. important -> 무조건 우선
1. 인라인 -> 1000점
2. id 속성 -> 100점
3. class 속성, 속성 선택자 -> 10점
4. element -> 1점
5. 동일한 점수인 경우 나중에 적용한 것이 우선