2020.10.12 TIL

CSS 루트에 변수 지정하여 여러번 활용하기

:root {
  --main-color : #0000000
} 

p {
  background-color : var(--main-color)
}

 

 

var(--변수명) 이런 식으로 루트에 메인 컬러를 변수로 지정하고 사용할 수 있다.

 

 

transition

transition 은 state (:active, :hover ...)에 따라 property가 달라질 때 사용한다.

transition 은 state가 아니라 root 가 되는 element 에 있어야 한다.

a {
  background-color : tomato;
  color : wheat;
  transition : all 5s ease-in-out //배경과 글자 모두 변화
}

a:hover {
 background-color : wheat;
 color : tomato;
}

 

 

Animation

@keyframe 변수명지정을 통해 from에서 to 까지 변화 내용을 정하고 난 뒤, 본 엘리먼트에서 애니메이션의 속도 및 변화 방법, 반복 횟수 등을 정할 수 있다. 만약 애니매이션의 변화를 세분화 주고 싶을 떈 from - to 대신에 0%, 10% ... 100% 로 세분화 하여 지정할 수 있다.

@keyframe fadeInOut {
  from {
    transform : rotateX(0);
  }
  to {
    transform : rotateX(360deg);
  }
}

a {
  animation : fadeInOut 5s ease-in-out infinite;
}

 

CSS 그동안 대충 하고 넘어가고, 매번 스트레스 받았는데 역시 대충 알고 넘어가서 그런 것...

뭐든 배우고 깊게 하다보면 재밌는 것을... 시간과 싸우느라 그 기쁨을 잠시 잊고 있었던 것 같다.