코코아 클론 챌린지 9일차

배울 점, 기억 할 점

Element State

avtive는 누르고 있을 때.
hover는 마우스가 위에 있을 때. 클릭이 아님.
focus는 키보드로 선택되었을 때.
visited는 링크에만 적용됨. 방문했을 때 하이퍼링크의 상태 변경
focus-within은 focused인 자식을 가진 부모의 상태.

button:active { }
button을 누르고 있을 때, button의 스타일 변경.
form:hover input { }
form 위에 마우스가 올라가고, 그 안에 input이 있을 때, input 스타일 변경.
form:hover input:focus { }
form 위에 마우스가 올라가고, input이 키보드로 선택되었을 때, input의 스타일 변경.

css에서 변수 선언
—로 시작해서 공백은 -로 채우기
:root {
    —main-color: color;
}

Transition : 어떤 상태에서 다른 상태로 가는 변화를 애니메이션화 한 것.
transition이란 속성은 state가 없는 요소에 적어야함.
state를 기준으로 바뀌는 요소들만 transition 가능.
transition은 root에 있어야(state가 없는 요소) 마우스를 갑자기 떼도 원래 상태로 바로 돌아가지않음.
linear - 시작부터 끝까지 일정한 속도
ease-in - 시작과 끝이 빠름
ease-out - 시작과 끝이 느림
ease-in-out - 시작이 빠르고 끝이 느림
cubic-bezier(0, 0, 0, 0); 으로 직접 설정할수도 있다.

Transformation : 한 요소를 변형시키는 것
box element를 변형시키지 않음. margin과 padding이 적용되지 않음.
transfom의 translateX, translateY는 다른 요소에 영향을 주지 않음. 다른 요소와 겹칠 수 있음. 다른 요소의 box를 변형시키지않고 원하는 요소를 이동시키고 싶을 때 사용.
tranform mdn

Animations : 마우스가 없어도 애니메이션 가능.
예시 1
@keyframes 애니메이션 이름 {
   from { }
   to {}
   }

img {
   animation: 애니메이션이름 재생시간 옵션 (infinite)
  }

예시 2
@keyframes 애니메이션 이름 {
   0% { }
   50% { }
   100% { }
}

꼭 transform만으로 애니메이션을 만드는건 아님. 다른거도 되긴하는데 안되는 것도 있음.

https://animista.net/