1) active : 대상을 클릭하고 있는 상태
2) hover : 마우스가 대상 위에 있을 때의 상태
3) focus : active와 비슷하다고 생각될 수 있는데, 키보드로 선택되었을때를 말한다 !
4) visited : 링크에만 적용된다. 그 링크에 방문했다면 그 안에 스타일이 적용이 된다.
5) focus-within : focuse된 자식을 가진 부모 엘리먼트의 상태를 말한다
즉, 위의 예시에서 form은 그 자식들인 input이 focuse가 되면 form의 모습을 바꾼다는 것이다
state들을 다른 엘리먼트와 연계해서 사용할 수도 있다
1) 부모의 state에 따라 조정
form:hover input {
background-color: slateblue;
}
즉, form이 hover일경우 input의 백그라운드 컬러가 바뀌게된다.
부모의 state에 따라 자식의 state를 조정할 수 있다.
2) 부모와 자식의 state에 따라 조정
form:hover input:focus {
background-color: teal;
}
form이 hover이면서 input이 focus된 경우에 백그라운드 컬러가 바뀌게 된다.
transition은 다른 상태로의 변화를 보여줌
- state가 없는 요소에 붙어야 함.
ex) a:hover{...}에 작성되면 안됨. a{...}안에 작성해야함.- transition은 변화를 보여주는 속성이기 때문에 변화시키고자 하는 요소를 꼭 반응속성 요소에 포함시켜야 함.
a {...transition: color 5s each-in-out}을 넣어서 색변화를 잡고 싶다면 a:hover {color : black}처럼 a:hover 속성에 color 속성을 추가시켜야 함.
transition 은 상태에 따라 바뀌는 요소가 있을때 사용한다.
상태변화의 종류 : hover, active, focus, focus-within...
transition : all ~ : 변화 요소를 한번에 다룬다.
ex)transition : color 1s ease-in-out, border-radius 2s ease-out;
transition은 root(기본 요소)에 들어가야 변화하고 되돌아오는 과정을 거친다.(state에 존재하면 X)
transformation: 말 그대로 한 요소를 변형시킬 수 있음.
border-radius에 50%를 주면 원이 됨.
rotateX/Y/Z(각도deg) : 해당 요소를 3d상에서 각 축에 따라 회전
scale(숫자) : 해당 요소를 숫자배만큼 크기를 조정
translateX/Y/Z : 해당 요소를 3d상에서 각 축으로 이동
@keyframes 이름{} 으로 만든 후 안에 어디서부터 어디까지 애니메이션을 만들지 선택.
<style>
@keyframes superSexyCoinFlip {
from {
transform: rotateX(0);
}
to {
transform: rotateX(360deg);
}
}
</style>
from{} to{} 사용.
사용방법 : 애니메이션을 사용하고 싶은 요소 안에 animation: (애니메이션 이름) (시간) (ease-in funtion) (infinite 여부)
img {
animation: superSexyCoinFlip 3s ease-in-out infinite;
}