CSS 선택자 hover, transform 속성

*자식 선택자 / 인접 선택자

- > : 자식 선택자

- + : 인접 선택자

// 자식 선택자 : >
div>section*2>nav[tab키 입력]

// 인접 동생 선택자 : +
div+section[tab키 입력]

 

*hover

- 이미지, 텍스트, 버튼 등에 마우스 커서를 올려 놓았을때 발동되는 일종의 전환효과를 의미한다.

 

*hover transform 속성

1. 확대/축소 (scale)

- transform: scale(숫자) : 크기가 숫자만큼 확대, 축소된다.

- transform: scaleX(숫자) : X축 기준으로 숫자비율만큼 확대, 축소된다.

- transform: scaleY(숫자) : Y축 기준으로 숫자비율만큼 확대, 축소된다.

 

2. 회전 (rotate)

- transform: rotateX(숫자deg) : X축 기준으로 숫자deg 만큼 회전한다.

- transform: rotateY(숫자deg) : Y축 기준으로 숫자deg 만큼 회전한다.

- transform: rotate(숫자deg) :  숫자deg 만큼 회전한다.

 

3. 이동 (translate)

- transform: translateX(숫자px) : X축으로 숫자px 만큼 이동한다.

- transform: translateY(숫자px) : Y축으로 숫자px 만큼 이동한다.

- transform: translate(X축 숫자px, Y축 숫자px) : X축으로 숫자px 만큼, Y축으로 숫자px 만큼 이동한다.

 

4. 기울기 (skew)

- transform: skewX(숫자deg) : X축으로 숫자deg 만큼 기울이기

- transform: skewY(숫자deg) : Y축으로 숫자deg 만큼 기울이기

- transform: skew(X축 숫자deg, Y축 숫자deg) : X축으로 숫자deg 만큼, Y축으로 숫자deg 만큼 기울이기

 

5. 기준점 변경 (origin)

- transform-origin: X축 Y축 :  px, 백분율(%), left, right, center 등 사용 가능하다.