Hover 했을때 카드가 살짝 위로 올라가는 생동감을 주기위해서
.card:hover { transform: translateY(-20px) } 로 작성하셨는데&nbsp;
.card:hover { top:20px } 로 작성해도 똑같이 작동하더라구요요.
혹시 둘의 차이점을 알 수 있을까요?&nbsp;

이번 예제를 만들기 위한 2가지의 기능적인 차이점은 없습니다.
하지만 상황에 따라 차이점이 있으니 상황에 맞춰 쓰셔야 합니다.
.card:hover { top:20px } 이거는 포지션 속성이 있어야 사용할 수 있는 방식이구요.
.card:hover { transform: translateY(-20px) } 이거는 포지션 속성이 없어도 사용할 수 있는 방식입니다.
곧, top, left 등 좌표는 포지션 속성이 없으면 무의미 하지만 transform 속성은 포지션 속성이 없어도 사용할 수 있는 속성입니다.

인프런 커뮤니티 질문&답변

19:28 질문이요!