앞에 기초에서 가상 클래스 선택자로
: {} 를 배웠었다 (css 선택자 2 게시글을 참조하자)
hover(올려져 있는) 속성을 사용해서 가상 클래스를 하나 만들어 보자
<a>라는 태그에 hover(올려져있는) 속성이니까
<a>라는 태그에 마우스가 올려져 있으면 색상이 초록색으로 바뀐다는 뜻이다
이렇게 적용된걸 볼 수 있다
요기서 링크나 버튼같이 다른 사이트와 연결을 해주는 요소들에게
마우스를 커스를 가져오면 커서 모양이 바뀌는걸 볼 수 있다
나는 이 커서 모양을 바꿔볼 것이다 (커서 모양은 브라우저마다 다 다르다)
커서 모양 바꾸는 속성은
style="cursor: 속성값" 이다
링크와 버튼을 만들어서 sursor: auto 라는 속성값을 적용했다
잘 보이진 않지만 마우스 커서가 I 모양으로 바뀌었다
버튼은 커서를 가져다 놓았을때와 가져다 놓지 않았을때랑 똑같은
커서 모양을 가지고 있는걸 볼 수 있다
sursor: auto의 auto라는 속성값은
브라우저마다 어떤 태그를 사용했는지에 대해
알아서 커서 모양을 적용시켜주는 속성값이다
각종 속성값을 알아보자
default 속성값
default 값은 기본과 똑같은걸 볼 수 있다
help 속성값
커서 모양이 ? 로 바뀐걸 볼 수 있다
사용자가 특정 컨텐츠로 갈때 그 컨텐츠에 최적화된 커서 모양을 보여주면
편의성이 좋아질 것이다
보통은 개발자들이 default(기본값), 과 pointer (손모양) 을 많이 쓴다고 한다
pointer 속성값
손모양으로 나오는걸 볼 수 있다
progress 속성값
이렇게 마우스 옆에 로딩되는 모양의 커서로 바뀐다
이 로딩되는 커서 모양은
조회,버튼 같이 서버로 전송이나 불러오는 요청을 하였을때
로딩이 되고있다는걸 보여줄 수 있다
그러면 로딩이 되는 동안 마우스를 어디든지 가져가도 로딩이 되고있다고 알려줘야 할 것이다
이렇게 <body>태그 안에 커서 스타일을 progress 값을 주면
마우스 커서가 어디에 있든 로딩중으로 뜰 것이다
하지만 우리는 사용자가 어떤 특정 행동(조회,저장 등)을 했을때만
로딩이 되고있다는걸 보여줘야하는데
<body>태그에 progress 커서 스타일을 입히면
아무것도 안해도 로딩이 되고있다고 뜬다
이것은 동적으로 처리를 해야하기 때문에
이러한 상황같은경우는 자바스크립트를 이용해 구현한다
wait 속성값
wait 속성값은 progress 속성값과 비슷하다
등이 있다
