CSS의 글꼴 크기: px, em, rem, % 및 vw

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>font-size units compared</title>
<style>
  html { font-size: 16px; }  /* the root: rem is measured from here */
  body { margin: 0; padding: 14px; font: 14px/1.4 system-ui, sans-serif; background: #f4f5f7; color: #1d2330; }
  .controls { display: grid; gap: 6px; margin-bottom: 12px; font-size: 13px; }
  .controls label { display: flex; align-items: center; gap: 8px; }
  .controls input { flex: 1; min-width: 0; }
  .controls b { width: 42px; text-align: right; }
  .parent { background: #fff; border: 2px dashed #9aa3b2; border-radius: 10px; padding: 8px 12px; }
  .parent > small { display: block; font-size: 12px; color: #5b6270; margin-bottom: 4px; }
  .row { display: flex; align-items: baseline; gap: 10px; border-top: 1px solid #eceef2; padding: 4px 0; }
  .row code { flex: 0 0 116px; font: 12px ui-monospace, Consolas, monospace; color: #5b6270; }
  .row span { flex: 1; min-width: 0; line-height: 1.15; }
  .row output { font: 700 12px ui-monospace, Consolas, monospace; color: #0f5132; }
  /* the five rules being compared */
  .px  { font-size: 20px; }
  .em  { font-size: 1.25em; }  /* 1.25 x the parent's size */
  .pc  { font-size: 125%; }    /* same as 1.25em */
  .rem { font-size: 1.25rem; } /* 1.25 x the root (html) size */
  .vw  { font-size: 3vw; }     /* 3% of the viewport width */
</style>
</head>
<body>
<div class="controls">
  <label>Parent font-size <input type="range" id="parent" min="10" max="30" value="16"> <b id="pv">16px</b></label>
  <label>Root (html) font-size <input type="range" id="root" min="12" max="24" value="16"> <b id="rv">16px</b></label>
</div>

<div class="parent" id="box">
  <small>Parent box</small>
  <div class="row"><code>20px</code><span class="px">Sample</span><output></output></div>
  <div class="row"><code>1.25em</code><span class="em">Sample</span><output></output></div>
  <div class="row"><code>125%</code><span class="pc">Sample</span><output></output></div>
  <div class="row"><code>1.25rem</code><span class="rem">Sample</span><output></output></div>
  <div class="row"><code>3vw</code><span class="vw">Sample</span><output></output></div>
</div>

<script>
  const box = document.getElementById('box');
  const parent = document.getElementById('parent');
  const root = document.getElementById('root');

  function update() {
    box.style.fontSize = parent.value + 'px';
    document.documentElement.style.fontSize = root.value + 'px';
    document.getElementById('pv').textContent = parent.value + 'px';
    document.getElementById('rv').textContent = root.value + 'px';
    // show the size the browser actually computed for each sample
    document.querySelectorAll('.row').forEach((row) => {
      const px = parseFloat(getComputedStyle(row.querySelector('span')).fontSize);
      row.querySelector('output').textContent = '= ' + Math.round(px * 10) / 10 + 'px';
    });
  }
  parent.addEventListener('input', update);
  root.addEventListener('input', update);
  window.addEventListener('resize', 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>The em compounding trap in nested lists</title>
<style>
  body { margin: 0; padding: 14px; font: 16px/1.4 system-ui, sans-serif; background: #f4f5f7; color: #1d2330; }
  .controls { font-size: 13px; display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
  .controls input { flex: 1; min-width: 0; }
  .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .col { background: #fff; border-radius: 10px; padding: 10px 8px 10px 10px; border: 1px solid #e1e4ea; overflow: hidden; }
  .col h3 { margin: 0 0 4px 8px; font-size: 13px; }
  .col h3 code { font-size: 12px; }
  .bad  h3 { color: #9a3412; }
  .good h3 { color: #0f5132; }
  ul { margin: 0; padding-left: 14px; }
  li { overflow-wrap: anywhere; }
  li output { font: 11px ui-monospace, Consolas, monospace; color: #6b7280; margin-left: 4px; }

  /* the only difference between the two lists */
  .bad  li { font-size: calc(var(--f) * 1em); }   /* times the PARENT li: compounds */
  .good li { font-size: calc(var(--f) * 1rem); }  /* times the ROOT: same at every level */
</style>
</head>
<body>
<div class="controls">
  <label for="f">Size factor</label>
  <input type="range" id="f" min="0.7" max="1.3" step="0.05" value="0.8">
  <b id="fv">0.8</b>
</div>

<div class="cols">
  <div class="col bad"><h3>li { font-size: <code id="c1">0.8em</code> }</h3><div class="list"></div></div>
  <div class="col good"><h3>li { font-size: <code id="c2">0.8rem</code> }</h3><div class="list"></div></div>
</div>

<script>
  // the same four-level list goes into both columns
  const html = '<ul><li>Level 1<ul><li>Level 2<ul><li>Level 3<ul><li>Level 4</li></ul></li></ul></li></ul></li></ul>';
  document.querySelectorAll('.list').forEach((el) => { el.innerHTML = html; });

  const f = document.getElementById('f');
  function update() {
    document.body.style.setProperty('--f', f.value);
    document.getElementById('fv').textContent = f.value;
    document.getElementById('c1').textContent = f.value + 'em';
    document.getElementById('c2').textContent = f.value + 'rem';
    // label every item with the size the browser computed
    document.querySelectorAll('li').forEach((li) => {
      let out = li.querySelector(':scope > output');
      if (!out) { out = document.createElement('output'); li.firstChild.after(out); }
      out.textContent = Math.round(parseFloat(getComputedStyle(li).fontSize) * 10) / 10 + 'px';
    });
  }
  f.addEventListener('input', 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>A fluid type scale with clamp()</title>
<style>
  body { margin: 0; padding: 12px; font: 13px/1.4 system-ui, sans-serif; background: #f4f5f7; color: #1d2330; }
  .controls { display: grid; gap: 8px; margin-bottom: 10px; }
  .controls label { display: flex; align-items: center; gap: 8px; }
  .controls input { flex: 1; min-width: 0; }
  .seg { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
  .seg button { font: inherit; padding: 5px 9px; border: 1px solid #c9cdd4; border-radius: 7px; background: #fff; cursor: pointer; }
  .seg button[aria-pressed="true"] { background: #1d2330; color: #fff; border-color: #1d2330; }
  #stage { overflow: hidden; }
  iframe { display: block; height: 380px; border: 2px solid #9aa3b2; border-radius: 10px; background: #fff; }
</style>
</head>
<body>
<div class="controls">
  <label>Screen width <input type="range" id="w" min="300" max="760"> <b id="wv"></b></label>
  <div class="seg">Reader's text size:
    <button data-root="16" aria-pressed="true">Default 16px</button>
    <button data-root="20" aria-pressed="false">Larger 20px</button>
    <button data-root="24" aria-pressed="false">Largest 24px</button>
  </div>
</div>
<div id="stage"><iframe id="page" title="Preview page"></iframe></div>

<script>
  // The type scale. Every size has a rem floor and ceiling, so it follows
  // the reader's text size, and a vw part, so it grows with the screen.
  const SCALE = `
    body  { font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); line-height: 1.55; }
    h1    { font-size: clamp(1.75rem, 1.2rem + 2.5vw, 3rem); line-height: 1.15; }
    h2    { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.875rem); line-height: 1.25; }
    small { font-size: 0.875em; }  /* em: relative to the text around it */
  `;

  // Inside the preview, a script reports the computed sizes.
  function pageHtml(rootPx) {
    return `<!doctype html><meta name="viewport" content="width=device-width">
<style>
  html { font-size: ${rootPx}px; }  /* stands in for the browser text-size setting */
  body { margin: 0; padding: 14px 16px; font-family: system-ui, sans-serif; color: #1d2330; }
  h1, h2 { margin: 0 0 8px; } p { margin: 0 0 8px; }
  #sizes { font: 12px ui-monospace, Consolas, monospace; color: #0f5132; background: #eef7f1; padding: 6px 8px; border-radius: 6px; white-space: pre-wrap; }
  ${SCALE}
</style>
<pre id="sizes"></pre>
<h1>Fluid type</h1>
<h2>Section heading</h2>
<p>Body text sits at 1rem on a phone and grows a little on wide screens.
<small>Small print stays 0.875 of the text around it.</small></p>
<script>
  function show() {
    const px = (s) => Math.round(parseFloat(getComputedStyle(document.querySelector(s)).fontSize) * 10) / 10;
    document.getElementById('sizes').textContent =
      'width ' + innerWidth + 'px   h1 ' + px('h1') + '  h2 ' + px('h2') + '  body ' + px('p') + '  small ' + px('small');
  }
  addEventListener('resize', show); show();
<\/script>`;
  }

  const frame = document.getElementById('page');
  const w = document.getElementById('w');
  const stage = document.getElementById('stage');

  function setWidth() {
    w.max = stage.clientWidth - 4;  // fit the preview (and its 2px border) in the demo
    if (+w.value > +w.max) w.value = w.max;
    frame.style.width = w.value + 'px';
    document.getElementById('wv').textContent = w.value + 'px';
  }

  document.querySelectorAll('.seg button').forEach((btn) => {
    btn.addEventListener('click', () => {
      document.querySelectorAll('.seg button').forEach((b) => b.setAttribute('aria-pressed', b === btn));
      frame.srcdoc = pageHtml(btn.dataset.root);
    });
  });
  w.addEventListener('input', setWidth);
  window.addEventListener('resize', setWidth);
  frame.srcdoc = pageHtml(16);
  w.max = stage.clientWidth - 4;
  w.value = w.max;  // start at the widest the demo allows
  setWidth();
</script>
</body>
</html>