🌱 기초 프론트엔드
CSS에서 cursor 속성이란?
쉽게 이해하기
게임에서 무기를 들면 조준점이 나타나고, 대화할 수 있는 NPC에게 가면 말풍선 아이콘이 뜨죠. 마우스 커서도 마찬가지로 '여기서 뭘 할 수 있는지' 알려주는 신호예요.
핵심 정리
마우스 포인터의 모양을 바꿔서 사용자에게 힌트를 줄 수 있어요.
자세히 알아보기
cursor 속성은 요소 위에 마우스를 올렸을 때 커서 모양을 바꿔요. cursor: pointer;는 손가락 모양으로, 클릭 가능하다는 걸 알려주죠.
버튼이나 링크엔 기본적으로 pointer가 적용되지만, div 같은 요소를 클릭 가능하게 만들 땐 직접 지정해줘야 해요. 사용자 경험(UX)에서 중요한 부분이에요.
다른 유용한 값들로는 cursor: not-allowed; (금지 표시), cursor: move; (이동 가능), cursor: text; (텍스트 선택), cursor: wait; (로딩 중) 등이 있어요.
드래그 앤 드롭 기능을 만들 때 cursor: grab; 과 cursor: grabbing; 을 함께 쓰면 '잡을 수 있다'는 느낌을 직관적으로 전달할 수 있어요. 작은 디테일이지만 사용자 경험을 크게 개선하는 요소입니다.