먼저 아래 코드를 살펴보자
<body>
<div>
치코리타
</div>
</body>div{
cursor: pointer;
background-color: green;
width: 100px;
height: 100px;
}div태그에 대해서 cursor:pointer;를 설정해주었다.
이렇게하면 div태그인 요소에 대해서 마우스 커서를 갖다대면 평상시 화살표 모양의 커서가 아닌 아래 사진처럼 손가락모양으로 커서가 바뀌게 된다. 
이처럼 cursor옵션을 통해서 마우스 커서의 모양을 바꿔줄 수 있다.
curosor옵션은 다양하니 이 곳에서 필요한 커서를 찾아보고 사용 하도록 하자.
opacity
- 이 옵션은 모습을 감추게 하는 옵션이다.
- 0부터 1사이의 값(0~100%)을 가지며 0에 가까울수록 모습이 점점 감춰진다.
- 모습이 완전히 감춰져도 마우스 커서를 갖다 대면 인식한다.(안 읽는 경우도 있다.)
div{
cursor: pointer;
background-color: green;
width: 100px;
height: 100px;
opacity: 10%;
}opacity 10%적용결과
visibility
- hidden일 경우에 opacity의 효과를 가지지만, 마우스 커서나 클릭 등 읽지못하게 한다.
display
- 이 옵션은 none일 경우에 visibility의 효과를 가지면서 자리도 비켜준다.
- 즉, 옆에 요소가 inline또는 inline-block요소가 있었다면 자리가 비게되어 당겨지게 된다.(block은 독점하니까)
사진으로 보여주면 좋은데 캡처할 때 마우스 커서는 캡처가 안돼서 의미가 없어보인다..
꾸준히 진득하게 앞으로