#3 LEARNING CSS
#3.17 States
- Active, hover, focus, focus-within, visited
- active 해당 요소를 마우스로 클릭했을 때 효과를 적용
- hover 마우스가 해당 요소 위를 지나갈 때 효과를 적용
- focus 키보드로 선택되었을 때 효과를 적용
- focus-within 부모 요소에게 적용. 자신의 자식 요소 중 하나가 focused되었을 때 효과를 적용
- visited 방문한 사이트일 경우에 효과를 적용
조건을 나열해 여러 상황을 설정할 수 있음.
예 high-tag:hover low-tag:focus{
}
인 경우, 상위 요소위에 마우스 커서가 있고, 하위 요소가 focused되었을 때 효과를 적용하게 된다.
and 의 개념으로 받아드리면 될 것 같다.
#4 ADVANCED CSS
4.0 Transitions
- transition: 어떤 상태에서 다른 상태로의 변화를 보내주는 애니매이션이다
- 요기서 중요한 건 루트(root)이다.
transition 값은 태그의 root(근원, 기본css 태그) 에 넣는 것이고
transition 이 적용되는 항목은 “어떤 속성(attribute 조건)일 때 어떻게 변할지 따로” 적는다.
ex) “소 ㅇㅇ씨 링크 글씨색을 마우스 갖다대면 바뀌게 할 수 있어요?
좀 부드럽게?”
a {
color: white;
transition: all 1s ease-in-out
a:hover{
color: tomato;
=기본값(root)에선 링크의 폰트컬러가 화이트
마우스를 갖다대면 폰트컬러가 1초에 걸쳐 토마토색으로 변한다
4.1 Transitions part Two
- transition 은 상태에 따라 바귀는 요소가 있을때 사용함
상태 ex) hover, active, focus ...
ease-in function : 브라우저에게 변화하는 방법을 알려주는 역할
ㄴlinear - 변화 그래프가 직선
ㄴease-in - 시작과 끝이 빠름
ㄴease-out - 시작과 끝이 느림
ㄴease-in-out - 시작이 빠르고 끝이 느림
all : 변화 요소를 한번에 다룬다.
ㄴ따로 다루고 싶으면 각각 써주면 됨
cubic-bezier(0, 0, 0, 0); 으로 직접 설정할수도 있다.
4.2 Transformations
- transformation 한 요소를 말 그대로 변형시킬수 있다
- border-radius에 50%를 준다면 원이 된다.
- translate은 transformation을 적용 시키긴 하지만, 다른 형제(sibling)을 변화시키진 않는다.
→ transformation은 box element를 변형시키지 않는다.
→ margin, padding이 적용되지 않는다. 일종의 3D transformation이기 때문이다.
→ margin, padding을 위해서 translateX, translateY를 사용하지 않는다.- transform과 transition을 조합하면 더 역동적인 애니메이션을 만들 수 있다.
- CSS 3D는 GPU로 돌아가므로, 3D 작업을 할 수 있다.
4.3 Animations part One
@keyframes 애니메이션 이름 {
from{
}
to {
}
}
사용하기
img {
animation : 애니메이션 이름 재생시간 옵션
}
무한으로 반복되게 하려면 뒤에 infinite를 붙여준다.
4.4 Animations part Two
- from to 말고, 1,2,3,4,5...10 혹은 0% 25% 50% 75% 100% 같이 여러 단계로 나뉘어 애니매이션을 만들 수 있다.
- 다른 property들도 애니매이션으로 만들 수 있다. 꼭 transform만 써야하는 건 아니지만, transform을 쓰는걸 권한다. 일부 property는 애니매이션이 잘 안되기 때문이다.
참고
