CSS 커서 모양 목록
카드 위에 마우스를 올려 커서를 확인하고, 눌러서 CSS 를 복사하세요.
입력한 글과 파일은 서버로 보내지 않고 이 브라우저 안에서만 처리해요.
카드에 마우스를 올리면 그 커서로 바뀌어요. 누르면 CSS 한 줄이 복사돼요.
기본
링크·상태
선택
끌어서 놓기
크기 조절·스크롤
확대·축소
맞는 커서가 없어요.
사용 방법
- 카드 위에 마우스를 올리면 그 값의 커서 모양이 바로 보여요. 운영체제·브라우저마다 모양이 조금씩 달라요.
- 원하는 카드를 누르면 「cursor: 값;」이 복사돼요. CSS 규칙 안에 붙여 넣으세요.
- 「찾기」에 resize·이동 같은 말을 넣으면 맞는 커서만 남아요.
- 휴대폰·태블릿처럼 마우스가 없는 기기에서는 커서가 보이지 않으니 컴퓨터에서 확인하세요.
자주 묻는 질문
나만의 이미지로 커서를 바꿀 수 있나요?
cursor: url(cursor.png) 4 4, pointer; 처럼 쓰면 됩니다. 숫자 두 개는 클릭 지점(x y)이고, 이미지를 못 불러올 때를 대비해 마지막에 표준 값을 꼭 붙여야 합니다. 크기는 32×32px 이하가 안전해요.
pointer 와 default 는 언제 쓰나요?
링크·버튼처럼 누를 수 있는 요소에는 pointer, 일반 영역에는 default 를 씁니다. 누를 수 없는 곳에 pointer 를 쓰면 사용자가 헷갈려요.
grab 이 일부 브라우저에서 안 보여요.
아주 오래된 브라우저는 -webkit-grab 같은 접두사가 필요했지만 지금의 크롬·엣지·파이어폭스·사파리는 모두 표준 값 grab·grabbing 을 지원합니다.