CSS 커서 속성: 모든 값과 사용 시기

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS cursor keywords</title>
<style>
  body { margin: 0; padding: 12px; font-family: system-ui, sans-serif; background: #f4f5f7; color: #1d2330; }
  .note { margin: 0 0 10px; font-size: 14px; }
  .touch-note { display: none; }
  /* no mouse (phones, tablets): there is no cursor to show */
  @media (hover: none) {
    .touch-note { display: inline; }
    .mouse-note { display: none; }
  }
  .grid {
    display: grid; gap: 6px;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  }
  .tile {
    padding: 9px 4px; border-radius: 8px; text-align: center;
    background: #fff; border: 1px solid #e1e4ea;
    font: 13px ui-monospace, Consolas, monospace;
  }
  .tile:hover { border-color: #2563eb; background: #eef4ff; }
</style>
</head>
<body>
<p class="note">
  <span class="mouse-note">Hover a tile to see its cursor.</span>
  <span class="touch-note">A touch screen has no cursor, so here you only see the names.</span>
</p>
<div class="grid" id="grid"></div>

<script>
  const names = [
    'auto', 'default', 'none', 'pointer', 'text', 'vertical-text',
    'help', 'context-menu', 'wait', 'progress', 'crosshair', 'cell',
    'grab', 'grabbing', 'move', 'all-scroll', 'copy', 'alias',
    'no-drop', 'not-allowed', 'zoom-in', 'zoom-out',
    'col-resize', 'row-resize', 'ew-resize', 'ns-resize',
    'nesw-resize', 'nwse-resize', 'n-resize', 'e-resize',
    's-resize', 'w-resize', 'ne-resize', 'nw-resize', 'se-resize', 'sw-resize'
  ];
  const grid = document.getElementById('grid');
  for (const name of names) {
    const tile = document.createElement('div');
    tile.className = 'tile';
    tile.textContent = name;
    tile.style.cursor = name;  // the whole trick: one CSS property
    grid.appendChild(tile);
  }
</script>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Custom cursor image</title>
<style>
  body { margin: 0; padding: 12px; font-family: system-ui, sans-serif; background: #f4f5f7; color: #1d2330; }
  .note { margin: 0 0 10px; font-size: 14px; }
  .touch-note { display: none; }
  @media (hover: none) { .touch-note { display: block; } }
  .grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .box {
    position: relative; height: 104px; border-radius: 10px; overflow: hidden;
    background: #fff; border: 1px solid #e1e4ea; user-select: none;
  }
  .box b { position: absolute; left: 10px; right: 10px; top: 8px; font-size: 13px; }
  code { display: block; margin-top: 4px; font: 11.5px/1.4 ui-monospace, Consolas, monospace; color: #374151; }
  .dot { position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #dc2626; pointer-events: none; }

  /* 32x32 SVG target. Hotspot 16 16 = its centre. Fallback: crosshair */
  .ring {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ccircle cx='16' cy='16' r='12' fill='none' stroke='%232563eb' stroke-width='3'/%3E%3Ccircle cx='16' cy='16' r='2' fill='%232563eb'/%3E%3C/svg%3E") 16 16, crosshair;
  }
  /* same image, no hotspot: the click lands at its top-left corner */
  .ring-nohot {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ccircle cx='16' cy='16' r='12' fill='none' stroke='%239a3412' stroke-width='3'/%3E%3Ccircle cx='16' cy='16' r='2' fill='%239a3412'/%3E%3C/svg%3E"), crosshair;
  }
  /* the image cannot be decoded, so the browser uses the keyword */
  .broken { cursor: url("data:image/png;base64,AAAA"), pointer; }
  /* no keyword at the end: the whole declaration is invalid and ignored */
  .nofallback {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ccircle cx='16' cy='16' r='12' fill='%23dc2626'/%3E%3C/svg%3E") 16 16;
  }
</style>
</head>
<body>
<p class="note">Hover each box, then click. The red dot marks where the click really landed.</p>
<p class="note touch-note">On a touch screen there is no cursor. Taps still leave a dot.</p>
<div class="grid">
  <div class="box ring"><b>Hotspot 16 16</b></div>
  <div class="box ring-nohot"><b>No hotspot</b></div>
  <div class="box broken"><b>Broken image</b></div>
  <div class="box nofallback"><b>No fallback keyword</b></div>
</div>
<p class="note" id="out" style="margin-top:10px"></p>

<script>
  const out = document.getElementById('out');
  document.querySelectorAll('.box').forEach((box) => {
    // print what the browser actually kept for this box
    const kept = getComputedStyle(box).cursor;
    const code = document.createElement('code');
    code.textContent = kept.startsWith('url') ? 'kept: image, else ' + kept.split(',').pop().trim() : 'kept: ' + kept;
    box.querySelector('b').appendChild(code);

    box.addEventListener('pointerdown', (e) => {
      const r = box.getBoundingClientRect();
      const x = Math.round(e.clientX - r.left), y = Math.round(e.clientY - r.top);
      const dot = document.createElement('span');
      dot.className = 'dot';
      dot.style.left = x + 'px';
      dot.style.top = y + 'px';
      box.appendChild(dot);
      out.textContent = 'Click landed at ' + x + ', ' + y + ' inside "' + box.querySelector('b').firstChild.textContent + '".';
    });
  });
</script>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cursor per tool</title>
<style>
  body { margin: 0; padding: 12px; font-family: system-ui, sans-serif; background: #eceef1; color: #1d2330; }
  .bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
  button {
    font: 14px system-ui, sans-serif; padding: 7px 12px; border-radius: 8px;
    border: 1px solid #cfd4dc; background: #fff; color: #1d2330; cursor: pointer;
  }
  button[aria-pressed="true"] { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
  .status { font: 13px ui-monospace, Consolas, monospace; color: #374151; }

  .stage {
    position: relative; height: 320px; border-radius: 12px; overflow: hidden;
    background: #fff; touch-action: none; user-select: none;
  }
  canvas { position: absolute; left: 0; top: 0; }

  /* one rule per state: the cursor says what a press will do */
  .stage[data-tool="draw"] { cursor: crosshair; }
  .stage[data-tool="draw"].locked { cursor: not-allowed; }
  .stage[data-tool="pan"] { cursor: grab; }
  .stage[data-tool="pan"].panning { cursor: grabbing; }
</style>
</head>
<body>
<div class="bar">
  <button id="draw" aria-pressed="true">Draw</button>
  <button id="pan" aria-pressed="false">Pan</button>
  <button id="lock" aria-pressed="false">Lock layer</button>
  <span class="status" id="status"></span>
</div>
<div class="stage" id="stage" data-tool="draw">
  <canvas id="cv" width="1200" height="800"></canvas>
</div>

<script>
  const stage = document.getElementById('stage');
  const cv = document.getElementById('cv');
  const ctx = cv.getContext('2d');
  const status = document.getElementById('status');
  let ox = -300, oy = -200;  // how far the canvas is panned
  let last = null;           // last pointer position while pressed

  // dotted paper, so panning is visible
  ctx.fillStyle = '#d9dde3';
  for (let x = 10; x < 1200; x += 20) for (let y = 10; y < 800; y += 20) ctx.fillRect(x, y, 2, 2);
  ctx.lineWidth = 3; ctx.lineCap = 'round'; ctx.strokeStyle = '#1d4ed8';

  function place() { cv.style.transform = `translate(${ox}px, ${oy}px)`; }
  function show() { status.textContent = 'cursor: ' + getComputedStyle(stage).cursor; }
  place(); show();

  function setTool(tool) {
    stage.dataset.tool = tool;
    document.getElementById('draw').setAttribute('aria-pressed', tool === 'draw');
    document.getElementById('pan').setAttribute('aria-pressed', tool === 'pan');
    show();
  }
  document.getElementById('draw').addEventListener('click', () => setTool('draw'));
  document.getElementById('pan').addEventListener('click', () => setTool('pan'));
  document.getElementById('lock').addEventListener('click', (e) => {
    const on = stage.classList.toggle('locked');
    e.currentTarget.setAttribute('aria-pressed', on);
    show();
  });

  stage.addEventListener('pointerdown', (e) => {
    const locked = stage.dataset.tool === 'draw' && stage.classList.contains('locked');
    if (locked) return;  // nothing happens, as the cursor promised
    stage.setPointerCapture(e.pointerId);
    last = { x: e.clientX, y: e.clientY };
    if (stage.dataset.tool === 'pan') { stage.classList.add('panning'); show(); }
  });

  stage.addEventListener('pointermove', (e) => {
    if (!last) return;
    if (stage.dataset.tool === 'pan') {
      ox += e.clientX - last.x; oy += e.clientY - last.y; place();
    } else {
      const r = cv.getBoundingClientRect();  // already includes the pan offset
      ctx.beginPath();
      ctx.moveTo(last.x - r.left, last.y - r.top);
      ctx.lineTo(e.clientX - r.left, e.clientY - r.top);
      ctx.stroke();
    }
    last = { x: e.clientX, y: e.clientY };
  });

  stage.addEventListener('lostpointercapture', () => {
    last = null;
    stage.classList.remove('panning');
    show();
  });
</script>
</body>
</html>