직접 작성한 페이지의 한 섹션을 초기화하려면 제어 가능한 마크업에는 대상 CSS 초기화를, 격리된 컴포넌트 스타일에는 Shadow DOM을, 별도의 문서에는 iframe을 사용하세요. 이 가이드에서는 Mac에서 방법을 선택하고 결과를 미리 보는 과정을 설명합니다.

섹션에는 어떤 종류의 초기화가 필요한가요?

여기서 독자가 하려는 작업은 구체적입니다. 주변 페이지의 모양은 유지하면서 중첩된 미리보기 패널에 고유한 글꼴, 간격, 추상 그래픽을 적용하는 것입니다. 페이지의 소스 파일에 접근할 수 있고 이를 편집할 권한이 있어야 합니다.

초기화 선언을 정하기 전에 경계를 선택하세요. CSS 속성 값, 선택자 적용 범위, 문서 리소스는 서로 다른 문제입니다. 다음 의사 결정표는 CSS 초기화, Shadow DOM, 인라인 프레임의 문서화된 동작을 종합한 것입니다.

요구 사항 실용적인 선택 유지해야 할 조건
일반적인 중첩 마크업에서 특정 스타일 제거 대상 선언 또는 all 외부 선택자가 여전히 섹션의 요소와 일치할 수 있습니다.
내부 선택자를 페이지 선택자와 분리 명시적인 내부 기준 스타일이 있는 Shadow DOM 상속된 값은 여전히 살펴봐야 합니다.
섹션에 고유한 문서와 스타일시트 설정 제공 iframe 크기와 리소스를 별도로 설정해야 합니다.

직접 작성한 작은 미리보기 패널에는 Shadow DOM이 유용한 출발점입니다. 별도의 HTML 파일 없이 선택자 경계를 만들 수 있습니다. 테두리를 제거하거나 제목 글꼴을 바꾸기만 하면 된다면 컴포넌트 경계를 도입하는 것보다 명시적 선언이 더 간단합니다.

all: revert로 중첩된 섹션이 완전히 초기화되지 않는 이유는 무엇인가요?

all 약식 속성은 일치하는 요소의 속성을 변경합니다. 사용자 지정 속성, direction, unicode-bidi은 제외됩니다. 별도의 문서를 만들거나 다른 선택자가 해당 요소와 일치하는 것을 막지는 않습니다. MDN의 all 참조

초기화 키워드마다 기준 스타일도 다릅니다. initial은 각 속성에 명세로 정해진 초기 값을 사용합니다. unset은 일반적으로 상속되는 속성은 상속하고, 나머지는 초기화합니다. 작성자 스타일시트에서 revert는 영향을 받는 속성을 작성자 스타일 이전으로 되돌립니다. 상속된 값은 여전히 부모에서 올 수 있습니다. CSS Cascading and Inheritance Level 5

예를 들어 섹션의 색상을 초기화해도 그 안의 문단과 직접 일치하는 색상 선언은 제거되지 않습니다. MDN은 이 차이를 정확히 보여 줍니다. 부모에 revert이 적용되어도 문단은 직접 지정된 색상을 유지합니다. 따라서 원치 않는 모양의 원인이 하위 요소 선택자라면 래퍼에 초기화를 적용하는 것만으로는 충분하지 않습니다. MDN의 부모 초기화 예제

모든 하위 요소에 초기화를 적용하면 범위가 넓어지지만 유용한 레이아웃과 서식도 사라집니다. all: initial을 사용하면 복원하지 않는 한 div 요소의 일반적인 브라우저 기본 블록 표시 방식까지 사라집니다. 필요한 표현을 의도적으로 다시 구성할 수 있을 때만 이런 초기화를 사용하세요. 명세의 위젯 초기화 예제

revert-layer은 다른 목적을 가집니다. 속성을 캐스케이드 레이어를 거슬러 되돌립니다. 특정 스타일 레이어가 문제일 때 유용하지만 컴포넌트 경계를 만들지는 않습니다. CSS 캐스케이드 레이어 되돌리기

Mac에서 독립형 미리보기 패널 만들기

이 완전한 예제는 어두운 주변 인터페이스와, 합성 레이블 및 직접 만든 CSS 도형 두 개가 들어 있는 밝은 중첩 패널을 만듭니다. 모든 내용이 인라인이므로 다운로드, 패키지, 외부 글꼴 또는 이미지 파일이 필요하지 않습니다.

TextEdit에서 File > New를 선택한 다음 Format > Make Plain Text를 선택하세요. 아래의 전체 예제를 붙여 넣고 section-reset.html으로 저장한 뒤, 메시지가 표시되면 Use .html을 선택하세요. 다음은 HTML 파일을 만드는 Apple의 문서화된 단계입니다. Mac의 TextEdit에서 HTML 문서 작업하기

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Section reset demonstration</title>
  <style>
    body {
      margin: 0;
      padding: 32px;
      background: #202a36;
      color: #f2f5f8;
      font: 18px/1.6 Georgia, serif;
      letter-spacing: 1px;
    }
    main { max-width: 720px; margin: auto; }
    h2 { color: #bce8ff; text-transform: uppercase; }
    p { border-left: 4px solid #7db5cf; padding-left: 12px; }
    #panel-host { display: block; margin: 24px 0; }
  </style>
</head>
<body>
  <main>
    <h1>Shape workspace</h1>
    <p>Outer label Alpha</p>
    <div id="panel-host">
      <p>Preview unavailable. Use a browser supporting Shadow DOM.</p>
    </div>
    <h2>Outer label Beta</h2>
    <p>This paragraph belongs to the surrounding interface.</p>
  </main>
  <script>
    const host = document.getElementById("panel-host");
    if (typeof host.attachShadow === "function") {
      const root = host.attachShadow({ mode: "open" });
      const style = document.createElement("style");
      style.textContent = `
        .panel {
          all: initial;
          display: block;
          box-sizing: border-box;
          direction: ltr;
          unicode-bidi: normal;
          font: 16px/1.5 system-ui, sans-serif;
          color: #233344;
          background: #f4f7fa;
          padding: 24px;
          border: 2px solid #9db0c1;
          border-radius: 12px;
        }
        h2 { margin: 0 0 12px; font-size: 22px; }
        p { margin: 0 0 16px; }
        .shapes { display: flex; gap: 16px; flex-wrap: wrap; }
        .circle {
          width: 56px; height: 56px;
          border-radius: 50%; background: #386f91;
        }
        .bar {
          width: 104px; height: 56px;
          border-radius: 8px; background: #c98252;
        }
      `;
      const panel = document.createElement("section");
      panel.className = "panel";
      const heading = document.createElement("h2");
      heading.textContent = "Panel Delta";
      const text = document.createElement("p");
      text.textContent = "Circle and rounded bar";
      const shapes = document.createElement("div");
      shapes.className = "shapes";
      shapes.setAttribute("aria-hidden", "true");
      for (const name of ["circle", "bar"]) {
        const shape = document.createElement("div");
        shape.className = name;
        shapes.append(shape);
      }
      panel.append(heading, text, shapes);
      root.append(style, panel);
    }
  </script>
</body>
</html>

저장한 파일을 Mac 브라우저에서 여세요. 예상되는 결과는 대소문자가 섞인 제목과 테두리가 없는 문단이 있는 밝은 패널입니다. 패널 바깥에서는 제목이 계속 대문자 파란색으로 표시되고 문단에는 왼쪽 테두리가 유지됩니다. 이는 예제의 예상 결과이며 브라우저 테스트 측정값을 보고한 것이 아닙니다.

스크립트는 용도가 비어 있는 호스트에 shadow root를 연결하고 그 루트 안에 패널을 만듭니다. 스타일시트는 shadow tree에 속하므로 일반적인 제목 및 문단 선택자가 내부에 적용됩니다. 문서의 일반적인 제목 및 문단 선택자는 내부 요소까지 도달하지 않습니다. 이는 MDN에 문서화된 Shadow DOM 스타일 지정 방식을 따릅니다.

내부 .panel은 해결책의 두 번째 부분인 명시적 기준 스타일을 제공합니다. Shadow 경계는 선택자 일치를 분리하지만 상속은 렌더링된 요소 트리를 따라 계속 작동합니다. 내부 래퍼를 초기화하면 주변의 serif 글꼴과 글자 간격이 기본 상속 스타일이 되는 것을 막을 수 있습니다. 현재 CSS Shadow 명세는 이 상속 모델을 설명하며, 아직 편집자 초안 상태입니다. CSS Shadow Module Level 1

경계를 넘어가거나 경계에 영향을 주는 요소는 무엇인가요?

호스트는 주변 문서의 요소로 남습니다. 페이지 규칙은 호스트의 여백, 너비 또는 표시 방식을 바꿀 수 있으며, 조상 요소는 패널에 얼마나 많은 공간이 주어지는지도 결정합니다. 호스트 배치는 페이지 스타일시트에서 관리하고 패널 내부 모양은 shadow 스타일시트에서 관리하세요. 이는 shadow 호스트와 그 내부 트리의 차이에 관한 문서화된 내용을 따릅니다. CSS 스코핑 가이드

사용자 지정 속성도 의도적으로 다루어야 합니다. all는 사용자 지정 속성을 지우지 않습니다. 이 예제는 상속된 사용자 지정 속성을 사용하지 않으므로 외부 변수가 var() 참조를 통해 선택된 색상을 바꿀 수 없습니다. 나중에 테마 변수를 도입한다면 컴포넌트가 받아들일 이름을 정하고 내부 기본값을 제공하세요. MDN의 초기화 제외 항목

동일한 선택자 경계를 적용하려면 새 패널 콘텐츠를 shadow root 안에 두세요. 슬롯에 넣은 콘텐츠는 light tree에서 비롯되므로 스타일 지정 관계가 다릅니다. 슬롯을 추가하면 이 예제의 전제가 달라집니다. 슬롯과 트리 관계에 관한 CSS Shadow 설명

Shadow DOM은 리소스 초기화 명령도 아닙니다. 이 예제는 리소스 의존성을 아예 사용하지 않습니다. 주변 페이지와 별도의 스타일시트 참조를 포함하는 독립된 HTML 문서가 필요하다면 아래의 프레임 방식을 사용하세요.

iframe은 언제 사용해야 하나요?

iframe은 다른 문서를 삽입합니다. 따라서 문서 설정을 주변 페이지와 분리해야 하는 독립적인 스타일의 미리보기에 적합합니다. HTML 표준은 참조된 리소스에 src을, 인라인 문서에 srcdoc를 정의합니다. HTML 표준: iframe 요소

로컬에서 두 파일을 사용하는 구성이라면 패널과 스타일시트가 포함된 두 번째 완전한 HTML 파일을 만들고 panel.html이라고 지정하세요. 호스트와 스크립트를 이 파일을 참조하는 iframe으로 바꾸세요. 다음은 통합 코드 조각이며, 단독 문서는 아닙니다.

<iframe
  title="Shape panel preview"
  src="panel.html"
  style="display:block;width:100%;height:280px;border:0">
</iframe>

여기서 파일 이름은 로컬 예제용 이름입니다. 코드 조각을 사용하기 전에 실제 두 번째 파일을 준비하세요. 프레임의 바깥 크기는 이를 포함하는 페이지에서 정하고, 내부 표현은 삽입된 페이지가 제공합니다. 280px은 참고용 시작 높이로만 보고, 콘텐츠가 들어맞을 것이라고 가정하지 말고 더 긴 콘텐츠도 확인하세요.

대신 srcdoc을 선택한다면 상대 리소스 URL이 삽입 페이지의 URL을 기준으로 해석된다는 점에 유의하세요. 따라서 인라인 문서가 자동으로 독립된 리소스 기준 경로를 갖는 것은 아닙니다. MDN은 지원되지 않는 srcdoc가 src로 대체된다고도 설명합니다. MDN의 iframe 속성 참조

호환성을 확인하고 예상치 못한 스타일 문제 진단하기

MDN에 따르면 기본 attachShadow()과 all 속성은 모두 2020년 1월부터 브라우저 전반에서 널리 지원됩니다. 그렇다고 이 기능의 모든 최신 옵션이 보장되는 것은 아닙니다. 이 예제는 기본 open 모드를 사용하고 Shadow DOM을 사용할 수 없을 때 표시되는 대체 메시지를 유지합니다. MDN: attachShadow(), MDN: all

@scope도 선택자 집합이 적용되는 범위를 제한하는 지원 기능이지만 상속을 막거나 관련 없는 전역 규칙이 하위 트리에 들어오는 것을 막지는 않습니다. MDN은 2026년 3월부터 현재 브라우저 전반에서 새롭게 사용할 수 있다고 설명하며, 이전 브라우저에서는 지원이 제한됩니다. 선택자 구성을 바꾸는 것으로 요구 사항을 충족할 수 있다면 이를 사용하고, Shadow DOM 또는 프레임의 경계가 필요하다면 해당 방식을 유지하세요. MDN: @scope

예제를 편집한 뒤 다음 순서로 진단하세요.

  1. 파일에 소스 텍스트가 표시되면 저장된 확장자가 .html인지 확인하고 브라우저에서 여세요.
  2. 대체 메시지가 계속 표시되면 JavaScript가 실행되는지, 브라우저가 attachShadow()를 지원하는지 확인하세요.
  3. 패널 모양이 잘못되면 콘텐츠가 shadow root에 추가되었는지 확인한 다음 내부 기준 스타일과 스타일시트를 살펴보세요.
  4. 주변 인터페이스가 바뀌었다면 문서 스타일시트와 호스트 규칙의 편집 내용을 확인하세요.
  5. 콘텐츠가 더는 들어맞지 않으면 글꼴을 바꾸기 전에 호스트 또는 프레임의 크기를 확인하세요.

작업을 충족하는 최소한의 경계를 선택하세요. 제어된 수정에는 대상 CSS를, 격리된 패널에는 정의된 기준 스타일이 있는 Shadow DOM을, 별도 문서에는 iframe을 사용합니다. 배치, 내부 스타일, 리소스 참조를 명시적으로 관리하면 주변을 다시 설계하지 않고도 해당 섹션을 바꿀 수 있습니다.

출처