HTML CSS cursor 속성
표시 할 커서의 유형을 정의합니다.
속성 값: auto,crosshair,default,pointer,move,text,wait,help,not-allowed,e-resize,ne-resize,nw-resize,n-resize,se-resize,sw-resize,s-resize,w-resize
Tip: CSS 몇가지 방법
1. 임베디드 스타일 시트(Embedded Style Sheet) : 내부 스타일 시트라고도 하며 HTML 웹페이지의 상단 <head>와 </head> 테그 사이에 Style Sheet를 지정하는 방법입니다.
2. 링크타입 스타일 시트(External Style Sheet) : 외부 스타일 시트라고도 하며 별도의 CSS파일을 만들어 Link 테그로 연결하는 방법입니다.
3. 인라인스타일(Inline Styles) : HTML 웹페이지 내에서 직접 지정하는 방법입니다.
4.@import로 외부 스타일시트를 참조합니다.
5.xml-stylesheet 처리 명령으로 외부 스타일시트를 참조합니다.
1. 임베디드 스타일 시트(Embedded Style Sheet) : 내부 스타일 시트라고도 하며 HTML 웹페이지의 상단 <head>와 </head> 테그 사이에 Style Sheet를 지정하는 방법입니다.
2. 링크타입 스타일 시트(External Style Sheet) : 외부 스타일 시트라고도 하며 별도의 CSS파일을 만들어 Link 테그로 연결하는 방법입니다.
3. 인라인스타일(Inline Styles) : HTML 웹페이지 내에서 직접 지정하는 방법입니다.
4.@import로 외부 스타일시트를 참조합니다.
5.xml-stylesheet 처리 명령으로 외부 스타일시트를 참조합니다.
CSS cursor 속성 값
auto : 기본값, 브라우저가 마우스 커서 지정
crosshair : 십자모양의 마우스 커서
default : OS에서 설정한 마우스의 기본 커서
pointer : 손모양의 마우스 커서
move : 이동용 마우스 커서
text : 텍스트 입력창 편집용 일자모양의 마우스 커서
wait : 동작중임을 나타내는 모래시계 마우스 커서
help : 물음표 마우스 커서
not-allowed : 접근 불가 모양의 마우스 커서
e-resize : 좌우 검정 화살표 모양의 마우스 커서
ne-resize : 북동쪽 검정 화살표 모양의 마우스 커서
nw-resize : 북서쪽 검정 화살표 모양의 마우스 커서
n-resize : 상하 검정 화살표 모양의 마우스 커서
se-resize : 남동쪽 검정 화살표 모양의 마우스 커서
sw-resize : 남서쪽 검정 화살표 모양의 마우스 커서
s-resize : 상하 검정 화살표 모양의 마우스 커서
w-resize : 좌우 검정 화살표 모양의 마우스 커서
1. CSS cursor : 링크타입 스타일 시트(External Style Sheet)
링크타입 스타일 시트(External Style Sheet)은 외부 스타일 시트라고도 하며 별도의 CSS파일을 만들어 Link 태그로 연결하는 방법입니다.
[style.css] 이라는 이름을 가진 별도의 파일입니다.
<style.css>
p#no{ cursor: auto,crosshair,default,pointer,move,text,wait,help,not-allowed,e-resize,ne-resize,nw-resize,n-resize,se-resize,sw-resize,s-resize,w-resize 속성값입니다.; }
별도의 이름을 가진 웹페이지입니다.(예 : sample.html)
HTML CSS font-size 속성의 예제 샘플입니다
<body>
<div id="no">HTML CSS cursor 속성의 링크타입 스타일 시트(External Style Sheet) 예제 샘플입니다 </div>
</body>
CSS cursor 예제 : 임베디드 스타일 시트(Embedded Style Sheet)
임베디드 스타일 시트(Embedded Style Sheet)은 내부 스타일 시트라고도 하며 HTML 웹페이지의 상단 <head>와 </head>태그 사이에 Style Sheet를 지정하는 방법입니다.
<head>
<style type="text/css"> <!--
p#no{ cursor: auto,crosshair,default,pointer,move,text,wait,help,not-allowed,e-resize,ne-resize,nw-resize,n-resize,se-resize,sw-resize,s-resize,w-resize 속성값입니다.; }
--> </style>
</head>
<body>
<div id="no">HTML CSS cursor 속성의 임베디드 스타일 시트(Embedded Style Sheet) 예제 샘플입니다 </div>
</body>
CSS cursor 예제 : 인라인스타일(Inline Styles)
인라인스타일(Inline Styles)은 HTML 웹페이지 내에서 직접 지정하는 방법입니다.
<div style="cursor : 여기에 속성 값을 넣습니다;">HTML CSS cursor속성의 인라인스타일(Inline Styles) 예제 샘플입니다.<div>
CSS cursor 관련 태그
'CSS 스타일시트 ' 카테고리의 다른 글
| HTML CSS(스타일시트) empty-cells 속성(테이블 속성)- 속성값,css 예제및 관련된 태그입니다. (0) | 2012.09.18 |
|---|---|
| HTML CSS(스타일시트) display 속성(시각적 서식 속성)- 속성값,css 예제및 관련된 태그입니다. (0) | 2012.09.18 |
| HTML CSS(스타일시트) counter-reset 속성(콘텐츠 속성)- 속성값,css 예제및 관련된 태그입니다. (0) | 2012.09.18 |
| HTML CSS(스타일시트) counter-increment 속성(콘텐츠 속성)- 속성값,css 예제및 관련된 태그입니다. (0) | 2012.09.18 |
| HTML CSS(스타일시트) content 속성(콘텐츠 속성)- 속성값,css 예제및 관련된 태그입니다. (0) | 2012.09.18 |
WRITTEN BY
- white_rabbitstar
html대학에서는 html 태그,html5 신규태그,css등 모든 속성,이벤트,속성값을 정리하여 앞으로 열심히 글을 올리 겠습니다.
,
