Color DOM elements for markup tasks

colorByDepthFromSelector.js

(function colorByDepthFromSelector() {
  // 64개의 서로 다른 색상 생성
  function generateColors() {
    const hues = [0, 30, 60, 120, 180, 210, 270, 300]; // red, orange, yellow, green, cyan, blue, purple, pink
    const lightnessSteps = [95, 90, 85, 80, 75, 70, 65, 60]; // 밝기 조절
    const colors = [];

    for (const h of hues) {
      for (const l of lightnessSteps) {
        colors.push(`hsl(${h}, 70%, ${l}%)`);
      }
    }

    return colors;
  }

  const colors = generateColors();

  // 기준 요소 선택
  const selector = prompt("기준 요소의 CSS 셀렉터를 입력하세요 (예: #root, .container 등):", "body");
  const root = document.querySelector(selector || "body");

  if (!root) {
    console.warn("요소를 찾을 수 없습니다:", selector);
    return;
  }

  // 재귀적으로 색상 적용
  function applyBackgroundByDepth(el, depth = 0) {
    if (el.nodeType !== 1) return;
    el.style.backgroundColor = colors[depth % colors.length];
    el.style.transition = 'background-color 0.3s ease';
    el.style.outline = '1px dashed rgba(0,0,0,0.1)';
    Array.from(el.children).forEach(child => applyBackgroundByDepth(child, depth + 1));
  }

  applyBackgroundByDepth(root, 0);
})();