States
-
개발자 도구에서 가장 중요한 selector는 'state'다. Styles의 상단 :hov를 누르면 확인 가능
-
"acative"는 버튼을 누르고 있을 때 파란 배경색을 갖는다.
-
"hover"는 마우스 커서가 대상 위에 있을 때 색이 활성화 된다.(클릭X)
-
button에서 한가지라도 바꾼다면 지정되어 있던 border 속성을 잃는다.
-
디폴트 스타일을 바꾸면 처음부터 다시 스타일 해야한다.
-
"focus"는 키보드로 선택되었을 때 색이 활성화 된다.
-
"visited"는 링크를 다녀왔을 때, 방문했다는 의미로 스타일에 변형을 줄 수 있다.
-
"focus-within"은 focused인 자식을 가진 부모 엘리먼트에 적용된다.
→ ex) form:focus-within {} 이 엘리먼트 안에 어떤 것이든 focused 되면 ~게 만들어줘라. -
state는 다른 엘리먼트와 연계해서 사용할 수도 있다.
→ ex) form:hover input:focus {} → input이 focused 되있다면, form에 속성이 부여된다.
Transition
- 어떤상태에서 다른상태로 변화하는것을 애니메이션화한것
- state(ex.hover)가 없는 곳에 transition적용해야한다.
ex) transition : background-color 10s ease-in-out;
→ 10초동안 ease-in-out형태로 변경된다.
transition : all 5s ease-in-out;
→ 모든 속성을 5초동안 변경한다. - https://matthewlein.com/tools/ceaser
상태 ex) hover, active, focus ...
ease-in function : 브라우저에게 변화하는 방법을 알려주는 역할
ㄴlinear - 변화 그래프가 직선
ㄴease-in - 시작과 끝이 빠름
ㄴease-out - 시작과 끝이 느림
ㄴease-in-out - 시작이 빠르고 끝이 느림
all : 변화 요소를 한번에 다룬다.
ㄴ따로 다루고 싶으면 각각 써주면 됨
cubic-bezier(0, 0, 0, 0); 으로 직접 설정할수도 있다.
Transformation
- 한 요소를 trasnform(변형) 시킬 수 있다.
- border-radius 에 50%를 준다면 원이 된다.
- translate는 transformation을 적용시키긴 하지만 다른 형제(sibling)을 변화시키지는 않는다.
- transormation 은 box element를 변형시키지 않는다.
- margin, padding이 적용되지 않는다.
Animations
-
애니메이션 만들기
@keyframes 애니메이션 이름 {
from{
}
to {
}
} -
사용하기
img {
animation : 애니메이션 이름 재생시간 옵션
}
무한으로 반복되게 하려면 뒤에 infinite를 붙여준다. -
만약 y축으로 돌아가는 애니메이션이 있는데 거기에 x축도 움직이게 하는 애니메이션을 추가했다.
Animation:infinite를 적게되면 y축은 계속 돌지만 x축은 다시 처음자리에서 시작한다.
이러한 부자연스러운 애니메이션을 개선하고 싶을 땐
@keyframes “text” {
0% {
Transform: rotateY(0);
}
50% {
Transform: rotateY(180deg) translate(100px)’
}
100% {
Transform: rotateY(0);
}
} -
이런식으로 %를 주면 반복하는 행위를 계속 이어지도록 개선할 수 있다.
-
안에 요소를 자유롭게 추가할 수 있다.
https://animista.net/
