[HTML & CSS]가상 선택자 종류 애니메이션

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축