쏘니의 개발블로그

화면구성상 앞에 절대 위치로 텍스트를 놓는 경우 앞에 텍스트가 뒤를 가려서 클릭이 안되는 경우 가 있다.
텍스트가 앞에 위치해 있어도 뒤가 클릭되게 하려면 pointer-events 속성을 이용해서 뒷 배경을 정상적으로 클릭할 수 있게 할 수 있다.

pointer-events: 클릭 이벤트 허용 여부

pointer-events: none 을 사용하면 앞에 내용이 클릭이 안되고 뒤부터 클릭이 된다.

참고문헌

https://ahnheejong.name/articles/less-famous-css-properties/ [잘 알려지지 않은 유용한 CSS 속성들]

해당 지점위에 마우스 커서를 손모양으로 바꾸고 싶을때가 있습니다. 이 때 사용하는 CSS 속성이 cursor 입니다.

개요

cursor 속성을 이용하면 해당 태그 위에 위치하는 마우스 커서의 모양을 바꿀 수 있습니다.

auto: 자동
default: 기본값 (화살표)
pointer: 손가락 모양 (클릭 가능한 버튼)
wait: 로딩

사용법

.btn-wait { cursor: pointer }

<style type="text/css">
    .cursors span{
        display: inline-block;
        margin: 5px;
        padding: 5px 10px;
        background-color: #d2f4ff;
        border: 2px solid #09c;
    }
</style>

<div class="cursors">
    <span style="cursor: auto">Auto</span>
    <span style="cursor: crosshair">Crosshair</span>
    <span style="cursor: default">Default</span>
    <span style="cursor: pointer">Pointer</span>
    <span style="cursor: move">Move</span>
    <span style="cursor: e-resize">e-resize</span>
    <span style="cursor: ne-resize">ne-resize</span>
    <span style="cursor: nw-resize">nw-resize</span>
    <span style="cursor: n-resize">n-resize</span>
    <span style="cursor: se-resize">se-resize</span>
    <span style="cursor: sw-resize">sw-resize</span>
    <span style="cursor: s-resize">s-resize</span>
    <span style="cursor: w-resize">w-resize</span>
    <span style="cursor: text">Text</span>
    <span style="cursor: wait">Wait</span>
    <span style="cursor: help">Help</span>
</div>

결과물

참고문헌

https://ofcourse.kr/css-course/cursor-%EC%86%8D%EC%84%B1 [cursor 속성]