8. 마우스 커서

Frontend/CSS

8. 마우스 커서

예린lynn 2024. 7. 4. 22:30

728x90

cursor 속성을 이용해서 마우스 커서의 형태를 지정할 수 있다.

     <p>   
   <a href="" style="cursor: auto">cursor:auto</a>
        </p>
     <p>
      <a href="" style="cursor: default">cursor:default</a>
    </p>
    <p>
      <a href="" style="cursor: context-menu">cursor:context-menu</a>
    </p>
    <p>
      <a href="" style="cursor: help">cursor:help</a>
    </p>
    <p>
      <a href="" style="cursor: pointer">cursor:pointer</a>
    </p>
    <p>
      <a href="" style="cursor: progress">cursor:progress</a>
    </p>
    <p>
      <a href="" style="cursor: wait">cursor:wait</a>
    </p>
    <p>
      <a href="" style="cursor: cell">cursor:cell</a>
    </p>
    <p>
      <a href="" style="cursor: crosshair">cursor:crosshair</a>
    </p>
    <p>
      <a href="" style="cursor: text">cursor:text</a>
    </p>
    <p>
      <a href="" style="cursor: copy">cursor:copy</a>
    </p>
    <p>
      <a href="" style="cursor: move">cursor:move</a>
    </p>
    <p>
      <a href="" style="cursor: not-allowed">cursor:not-allowed</a>
    </p>
    <p>
      <a href="" style="cursor: col-resize">cursor:col-resize</a>
    </p>
    <p>
      <a href="" style="cursor: row-resize">cursor:row-resize</a>
    </p>
    <p>
      <a href="" style="cursor: zoom-in">cursor:zoom-in</a>
    </p>
    <p>
      <a href="" style="cursor: zoom-out">cursor:zoom-out</a>
    </p>

위 코드를 실행하여, 글자 위에 마우스를 올리면 커서의 모양이 바뀐다.