cursor 속성

Notice

Recent Posts

Recent Comments

Link

깃허브

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

Tags more

Archives

Today

Total

관리 메뉴

EverGiver

cursor 속성 본문

Front-End (웹)/CSS

cursor 속성

친절한개발초보자 2021. 8. 19. 02:35

728x90

cursor

마우스 커서를 변경하는 css속성

cursor 종류
1. cursor:pointer
- a태그를 사용하지 않고도 대상을 클릭할 수 있는 것처럼 마우스 커서를 변경해주는 css속성
(실제로 클릭 기능이 있는 건 아니고 커서의 형태만 변한다)

2. cursor:move
- 커서가 움직일 수 있는 형태의 마우스 커서를 변경해주는 css속성

3. cursor:text
- 커서가 글자를 입력할 수 있는 형태의 마우스 커서를 변경해주는 css속성

4. cursor:wait
- 커서가 로딩을 기다릴 때의 형태로 마우스 커서를 변경해주는 css속성

5. cursor:help
- 기존의 로딩을 커서 밑에 ?가 하나 생기는 형태로 마우스 커서를 변경해주는 css속성
(도움이 필요한 내용과 관련된 고객센터 및 기타 등등 상황에서 사용한다)
```
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>cursor #1</title>
    <style>
        *{margin:0;padding:0;}
        #a{width:200px;height:200px;
            background-color:orange;
            border:3px solid red;
            cursor:pointer;}
        
        div{margin-top:30px;}
        
        #a1{width:200px;height:200px;
            background-color:orange;
            border:3px solid red;
            cursor:move;
            /*cursor:text;*/
            /*cursor:wait;*/
            /*cursor:help;*/}
    </style>
</head>
<body>
    <div id="a"></div>
    
    <div id="a1"></div>
</body>
</html>
```
cf) .cur로 변환하여 커서를 이미지로 사용할 수 있다.
https://convertio.co/kr/png-cur

PNG CUR 변환 (온라인 무료) — Convertio

png 파일(들) 업로드 컴퓨터, Google Drive, Dropbox, URL에서 선택하거나 이 페이지에서 드래그하여 선택해 주세요.

convertio.co

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>cursor #2</title>
    <style>
        *{margin:0;padding:0;}
        
        div{width:400px;height:400px;
            background-color:orange;
            /*cursor:url("1.png"), auto;*/}
        
        html, body{cursor:url("1.cur"), auto;}
    </style>
</head>
<body>
    <div></div>
</body>
</html>

728x90