CSS 테두리, 한 줄에서 둥근 카드까지

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS border builder</title>
<style>
  * { box-sizing: border-box; }
  body { margin: 0; padding: 14px; font-family: system-ui, sans-serif; background: #f4f5f7; color: #1d2330; }
  .stage { height: 150px; display: grid; place-items: center; background: #fff; border-radius: 12px; }
  #box {
    width: 150px; height: 96px; background: #eef2ff;
    display: grid; place-items: center; font-size: 13px; color: #4b5563;
  }
  .controls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin-top: 12px; font-size: 13px; }
  label { display: flex; flex-direction: column; gap: 3px; }
  label span { display: flex; justify-content: space-between; }
  select, input[type=color] { width: 100%; height: 30px; font: inherit; }
  .presets { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; }
  .presets button { font: inherit; padding: 5px 10px; border: 1px solid #c9cdd4; border-radius: 8px; background: #fff; cursor: pointer; }
  pre { margin: 12px 0 0; padding: 10px 12px; background: #1d2330; color: #e5e7eb; border-radius: 10px; font-size: 12.5px; white-space: pre-wrap; }
</style>
</head>
<body>
<div class="stage"><div id="box">preview</div></div>

<div class="controls">
  <label><span>Width <b id="wv"></b></span><input id="w" type="range" min="0" max="16" value="3"></label>
  <label><span>Style</span>
    <select id="s">
      <option>solid</option><option>dashed</option><option>dotted</option>
      <option>double</option><option>groove</option><option>ridge</option><option>none</option>
    </select>
  </label>
  <label><span>Colour</span><input id="c" type="color" value="#4f46e5"></label>
  <label><span>Top-left <b id="tlv"></b></span><input id="tl" type="range" min="0" max="80" value="12"></label>
  <label><span>Top-right <b id="trv"></b></span><input id="tr" type="range" min="0" max="80" value="12"></label>
  <label><span>Bottom-right <b id="brv"></b></span><input id="br" type="range" min="0" max="80" value="12"></label>
  <label><span>Bottom-left <b id="blv"></b></span><input id="bl" type="range" min="0" max="80" value="12"></label>
  <div class="presets">
    <button data-r="0,0,0,0">Square</button>
    <button data-r="80,80,80,80">Pill</button>
    <button data-r="40,0,40,0">Leaf</button>
  </div>
</div>

<pre id="out"></pre>

<script>
  const $ = (id) => document.getElementById(id);
  const box = $('box');
  const corners = ['tl', 'tr', 'br', 'bl'];  // same order as border-radius

  function update() {
    const r = corners.map((k) => $(k).value + 'px');
    // one value if all four corners match, otherwise four
    const radius = r.every((v) => v === r[0]) ? r[0] : r.join(' ');
    const border = $('w').value + 'px ' + $('s').value + ' ' + $('c').value;
    box.style.border = border;
    box.style.borderRadius = radius;
    $('wv').textContent = $('w').value + 'px';
    corners.forEach((k) => { $(k + 'v').textContent = $(k).value + 'px'; });
    $('out').textContent = 'border: ' + border + ';\nborder-radius: ' + radius + ';';
  }

  document.querySelectorAll('input, select').forEach((el) => el.addEventListener('input', update));
  document.querySelectorAll('[data-r]').forEach((b) => b.addEventListener('click', () => {
    b.dataset.r.split(',').forEach((v, i) => { $(corners[i]).value = v; });
    update();
  }));
  update();
</script>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Border vs outline on hover</title>
<style>
  body { margin: 0; padding: 14px; font-family: system-ui, sans-serif; background: #f4f5f7; color: #1d2330; font-size: 13px; }
  .row { background: #fff; border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
  .row h3 { margin: 0 0 8px; font-size: 13px; }
  .row h3 code { background: #eef1f5; padding: 0 4px; border-radius: 4px; }
  button {
    font: inherit; padding: 8px 14px; border-radius: 8px; cursor: pointer;
    background: #4f46e5; color: #fff; border: 0;
  }
  .after { color: #6b7280; }

  /* 1. bad: the border only exists on hover, so the button grows */
  .grow:hover, .on .grow { border: 3px solid #f59e0b; }

  /* 2. outline is drawn outside the box and takes no space */
  .ring:hover, .on .ring { outline: 3px solid #f59e0b; }

  /* 3. the border is always there, only its colour changes */
  .keep { border: 3px solid transparent; }
  .keep:hover, .on .keep { border-color: #f59e0b; }

  .toggle { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
</style>
</head>
<body>
<div id="rows">
  <div class="row"><h3>1. <code>border</code> added on hover</h3>
    <button class="grow">Hover me</button> <span class="after">this text moves</span></div>
  <div class="row"><h3>2. <code>outline</code> on hover</h3>
    <button class="ring">Hover me</button> <span class="after">this text stays</span></div>
  <div class="row"><h3>3. transparent border, colour on hover</h3>
    <button class="keep">Hover me</button> <span class="after">this text stays</span></div>
</div>
<label class="toggle"><input type="checkbox" id="all"> Show the hover state on all three (for touch screens)</label>

<script>
  // a checkbox that applies the hover look, so it can be compared on a phone too
  document.getElementById('all').addEventListener('change', (e) => {
    document.getElementById('rows').classList.toggle('on', e.target.checked);
  });
</script>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cards built with borders</title>
<style>
  * { box-sizing: border-box; }
  body { margin: 0; padding: 14px; font-family: system-ui, sans-serif; background: #f4f5f7; color: #1d2330; font-size: 14px; }
  .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
  h3 { margin: 0 0 6px; font-size: 15px; }
  p { margin: 0; color: #4b5563; line-height: 1.45; }

  /* plain card: a 1px border in a light grey does most of the work */
  .card { background: #fff; border: 1px solid #e1e4ea; border-radius: 12px; padding: 14px 16px; }

  /* accent: a thick left border, the other three stay thin */
  .accent { border-left: 5px solid #4f46e5; }

  /* hairline divider between rows: one side only, so lines never double */
  .list { list-style: none; margin: 8px 0 0; padding: 0; }
  .list li { padding: 7px 0; }
  .list li + li { border-top: 1px solid #eceef2; }

  /* drop area: dashed border, turns solid while a file is over it */
  .drop {
    border: 2px dashed #a8b0bd; border-radius: 12px; padding: 22px 16px;
    text-align: center; color: #5b6270; background: #fafbfc;
  }
  .drop.over { border-style: solid; border-color: #16a34a; color: #0f5132; background: #f4fbf6; }

  /* pill tags: a radius larger than half the height makes round ends */
  .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
  .tag {
    border: 1px solid #c7d2fe; border-radius: 999px; padding: 3px 11px;
    font-size: 12.5px; color: #3730a3; background: #eef2ff; cursor: pointer; user-select: none;
  }
  .tag.picked { background: #4f46e5; border-color: #4f46e5; color: #fff; }

  /* avatar: 50% radius on a square gives a circle; overflow clips the child */
  .who { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
  .avatar {
    width: 38px; height: 38px; border-radius: 50%; overflow: hidden;
    border: 2px solid #fff; outline: 1px solid #e1e4ea;
  }
  .avatar div { width: 100%; height: 100%; background: linear-gradient(135deg, #f59e0b, #4f46e5); }
</style>
</head>
<body>
<div class="grid">
  <div class="card">
    <h3>Plain card</h3>
    <p>One grey 1px border and a 12px radius.</p>
    <ul class="list"><li>Hairline between rows</li><li>Border on one side only</li><li>No doubled lines</li></ul>
  </div>

  <div class="card accent">
    <h3>Accent card</h3>
    <p>A thicker left border marks it as a note.</p>
    <div class="tags" id="tags">
      <span class="tag">design</span><span class="tag">css</span><span class="tag">borders</span><span class="tag">tips</span>
    </div>
    <div class="who"><div class="avatar"><div></div></div><p>Tap a tag to pick it.</p></div>
  </div>

  <div class="drop" id="drop">Drop a file here<br><small>(or tap to preview the active state)</small></div>
</div>

<script>
  // tags toggle on click
  document.querySelectorAll('.tag').forEach((t) =>
    t.addEventListener('click', () => t.classList.toggle('picked')));

  // drop area: solid border while a file is dragged over it
  const drop = document.getElementById('drop');
  drop.addEventListener('dragover', (e) => { e.preventDefault(); drop.classList.add('over'); });
  drop.addEventListener('dragleave', () => drop.classList.remove('over'));
  drop.addEventListener('drop', (e) => {
    e.preventDefault();
    drop.classList.remove('over');
    const f = e.dataTransfer.files[0];
    drop.textContent = f ? 'Got ' + f.name : 'Dropped';
  });
  drop.addEventListener('click', () => drop.classList.toggle('over'));
</script>
</body>
</html>