Custom Properties, Transition, Transformation, Animation, Media Query

Custom Properties

CSS에서 사용할 값들을 변수처럼 저장하여 사용 가능

예시

---

 

Transition

어떤 상태에서 다른 상태로의 변화를 보여주는 애니메이션

transition: 바꿀요소 시간 바꿀타입

가장 기본이 되는 곳에 작성해야 한다. 예) a:hover보다는 a 에 작성

---

 

Transformation

한 요소를 변형시킬 때 사용

3D까지 가능

box element를 변형시키지 않음

일종의 3D transformation이기 때문에 margin, padding이 적용되지 않는다.

---

 

Animation

애니메이션을 원하는 만큼 만들고 재생시킬 수 있음

@keyframes 로 시작

ease-in-out 등 대신 infinite를 적으면 애니메이션이 무한으로 반복

---

 

Media Query

CSS만을 이용하여 스크린 사이즈를 알 수 있으며 이를 이용하는 방법

and 를 이용하여 조건들을 덧붙일 수 있음

portrait: 세로모드, landscape: 가로모드

---