1. 가상 선택자
1) 선택한 요소가 특별한 상태여야 만족할 수 있다.
2) 구분
- 동적 가상 선택자
- 구조적 가상 선택자
2. 동적 가상 선택자(Dynamic)
1) 어떠한 상태나 조건이 발생할 때, 사용자의 액션에 따라 스타일이 바뀌는 선택자이다.
2) ACTIVE, VISITED, DISABLED, HOVER, FOCUS
- ACTIVE : 클릭 시 활성화되는 가상 클래스
| <style> a:active { // a = 적용대상태그, acitve = 가상 선택자 } </style> |
- VISITED : 사용자가 이미 방문한 링크를 표시해준다.
- DISABLED : 비활성화된 요소를 나타내며 비활성화 시키는 역할을 한다. 단독으로 쓰이기보다는 조건을 추가하여 조건에 해당하지 않는 경우, 폼에 입력할 수 없도록 만드는 용도로 사용이 된다.
- HOVER : 마우스 커서를 요소에 올려 놓았을 때 선언한 스타일이 생성된다.
- FOCUS : input으로 만든 폼 등 집중(focus)을 받은 요소를 나타낸다. pc에서는 마우스 클릭이나 tab키를 클릭할 때 발동한다.
3. 구조적 가상 선택자 (structural)
1) 종류 : first-child, last-child, nth-of-type 등이 있다.
2) first-child
- 형제 중 첫 번째 요소 선택하기
- 반드시 부모 요소를 가지고 있어야 한다.
3) last-child
- 형제 중 마지막 요소 선택하기
4) nth-of-type
- 형제 위치 기반 요소 선택하기
- 형제 그룹 안에서의 위치
- n, n+1
4. 애니메이션
1) 전환(transition)
- 시간에 따른 상태를 지정하는 애니메이션이다.
- 형태 변형을 부드럽게 해준다.
- 전환 속성, 전환 시간, 전환 타이밍(linear, ease, ease-in, ), 전환 지연
예) 색이 변하는 사각형 : 마우스를 사각형 위에 올려두면 변한다.
2) 변형(transform)
- 외적인 형태의 변형을 줄 수 있다.
- 전환과 함께 사용하면 부드러운 애니메이션을 만들 수 있다.
- 회전(rotate) : 지정된 각도(deg)만큼 요소를 시계 방향 또는 반시계 방향으로 회전시킨다.
- 기울이기(skew) : x축과 y축을 제공된 값에 따라 기울인다.
- 크기(scale) : 요소 크기를 늘리거나 줄인다. 1보다 큰 숫자는 요소 크기를 늘리고, 1보다 작으면 줄인다.
- 이동(translate) : 요소를 상하좌우로 이동한다.
- x축, y축, z축