whatisthis?

CSS) CSS cursor(커서) attribute 본문

WEB STUDY/HTML,CSS

CSS) CSS cursor(커서) attribute

thisisyjin 2021. 11. 4. 14:17

cursor

cursor 속성은 요소 위에 마우스 커서가 올라갔을 때 보여줄 모양을 지정한다.

 

 

 

** cursor 속성의 속성값으로 올 수 있는 value

키워드 값 cursor: pointer;
cursor: auto;
URL, 대체 키워드 cursor: url(hand.cur), pointer;
URL, 좌표 or 대체키워드 cursor: url(cursor2.png) 2 2, pointer;
전역 값 (Global values) cursor: inherit;
cursor: initial;
cursor: unset;

 

 

 

REFERENCE

 

REF: https://developer.mozilla.org/ko/docs/Web/CSS/cursor

 

cursor - CSS: Cascading Style Sheets | MDN

CSS cursor 속성은 요소 위에 마우스 커서가 올라갔을 때 보여줄 모양을 지정합니다.

developer.mozilla.org

 

 

 

 


 

 

 

 

 

 

 

https://mywebproject.tistory.com/108

 

html_pr09) style.css Code Review

https://mywebproject.tistory.com/107 HTML 훈련 - (9)GitHub Dropdown Menu GitHub Dropdown Menu REFERENCE (style.css / app.js) https://github.com/rohjs/bugless-101/tree/master/html-practice/09-githu..

mywebproject.tistory.com

 

위 예제에서는 

 

.dropdown-button {
  width: 40px;
  padding: 0;
  border: none;
  border-radius: 5px;
  overflow: hidden;
  background-color: transparent;
  cursor: pointer;
}

위와 같이 button 요소 위에 마우스를 올렸을때 pointer 형태의 모양으로 보이도록 지정한다.

 

pointer The cursor is a pointer that indicates a link. Typically an image of a pointing hand.

 

 


 

https://caniuse.com/?search=cursor