전체 글 83

[CSS] 트랜지션과 애니메이션

*변형 함수 translate() 함수 : 요소 이동하기 translate: translate(tx, ty) 지정한 크기만큼 x축과 y축으로 이동합니다. translate: translate(tx, ty, tz) 지정한 크기만큼 x축과 y축과 z축으로 이동합니다. translate: translateX(tx) 지정한 크기만큼 x축으로 이동합니다. translate: translateY(ty) 지정한 크기만큼 y축으로 이동합니다. translate: translateZ(tz) 지정한 크기만큼 z축으로 이동합니다. scale() 함수 : 요소 확대, 축소하기 transform: scale(sx, sy) 지정한 크기만큼 x축, y축으로 확대, 축소합니다. transform: scale(sx, sy, sz) 지..

[CSS] 구조 가상 클래스

종류 설명 :only-child 부모 안에 자식 요소가 하나뿐일 때 자식 요소를 선택한다. A:only-type-of 부모 안에 A 요소가 하나뿐일 때 선택한다. :first-child 부모 안에 있는 모든 요소 중에서 첫 번째 자식 요소를 선택한다. :last-child 부모 안에 있는 모든 요소 중에서 마지막 자식 요소를 선택한다. A:first-of-type 부모 안에 있는 A 요소 중에서 첫 번째 자식 요소를 선택한다. A:last-of-type 부모 안에 있는 A 요소 중에서 마지막 자식 요소를 선택한다. :nth-child(n) 부모 안에 있는 모든 요소 중에서 n번째 자식 요소를 선택한다. :nth-last-child(n) 부모 안에 있는 모든 요소 중에서 끝에서 n번째 자식 요소를 선택한다..

[CSS] 속성 선택자

종류 선택 요소 예시 [속성] 해당 속성이 있는 요소 [required] [속성 = 값] 지정한 속성값이 있는 요소 [target = _blank] [속성 ~= 값] 지정한 속성값이 포함된 요소(단어별) [class ~= button] [속성 |= 값] 지정한 속성값이 포함된 요소 (하이픈 포함, 단어별) [title |= us] [속성 ^= 값] 지정한 속성값으로 시작하는 요소 [title ^= eng] [속성 $= 값] 지정한 속성값으로 끝나는 요소 [href $= xls] [속성 *= 값] 지정한 속성값의 일부가 일치하는 요소 [href *= w3]