컴포넌트 범위 지정 CSS를 사용하면 규칙이 적용되는 요소를 제어할 수 있고, 공유 스타일시트를 사용하면 여러 페이지에서 규칙을 재사용할 수 있습니다. Mac의 작은 HTML 프로젝트에서는 두 가지를 함께 사용할 수 있습니다. 이동하고 유지 관리해야 하는 항목에 따라 파일 구성을 선택하세요.

이 가이드에서는 모서리가 둥근 정사각형 카드와 별도의 메모가 있는 로컬 페이지의 스타일을 지정하는 방법을 살펴봅니다. 카드의 모양을 예측 가능하게 유지한 다음, CSS를 페이지 안에 둘지 재사용 가능한 파일에 둘지 결정하는 것이 목표입니다. 레이블과 도형은 예시용이며, 프레임워크나 다운로드한 에셋은 필요하지 않습니다.

실제로 무엇을 선택하는 건가요?

두 가지를 결정해야 합니다. CSS를 어디에 둘지, 그리고 어떤 요소를 선택할지입니다. 내장 스타일시트는 HTML 문서의 style 요소 안에 있습니다. 외부 스타일시트는 별도의 리소스이며, link을 사용해 연결하고 rel="stylesheet"과 href 경로를 지정합니다. 이는 CSS를 제공하는 HTML의 방식이며, 어느 구성도 일반 선택자에 자동으로 컴포넌트 경계를 부여하지는 않습니다. HTML Standard: The style element, MDN: External resource link element.

네이티브 CSS @scope는 선택 범위를 추가합니다. 루트 요소를 지정한 다음 그 하위 트리에 적용되는 규칙을 작성합니다. 주변 문서에 비슷한 요소가 있을 때 짧은 선택자를 유용하게 유지할 수 있습니다. Chrome 문서는 네이티브 범위 지정과 생성된 클래스나 속성으로 선택자를 다시 작성하는 도구도 구분합니다. 컴포넌트 예시가 이런 도구에 의존한다면 해당 도구도 별도로 필요합니다. Limit the reach of your selectors with the CSS @scope at-rule.

이 작업에서는 다음 판단 기준을 사용하세요. 이는 문서화된 방식에 근거한 편집상의 권장 사항이며, 브라우저 요구 사항은 아닙니다.

당장의 작업 권장 구성 함께 옮겨야 하는 항목
작은 페이지 하나를 단일 파일로 유지하기 style 요소에 CSS 삽입 HTML 및 별도로 참조하는 에셋
여러 페이지에서 같은 카드를 유지 관리하기 전용 컴포넌트 클래스를 사용하는 외부 스타일시트 각 HTML 페이지와 공유 CSS
정의된 하위 트리 안에서 더 짧은 선택자 사용하기 명시적 루트가 있는 @scope 규칙을 내장하거나 외부에 배치 CSS와 일치하는 루트가 포함된 마크업
범위 지정 지원이 불확실한 브라우저 지원하기 필수 스타일을 일반 클래스 규칙에 유지 HTML과 해당 규칙이 포함된 스타일시트

따라서 “이식 가능”의 의미를 구체적으로 정해야 합니다. HTML 파일 하나만 따로 옮기기 편리할 수 있습니다. HTML과 CSS가 든 폴더도 경로가 계속 유효하다면 이식 가능합니다. 재사용 가능한 컴포넌트에는 세 번째 이식성도 필요합니다. 목적지에서도 선택자가 기대하는 마크업 훅을 유지해야 합니다.

Mac에서 작동하는 두 파일 예제 만들기

form-study이라는 폴더를 만듭니다. 그 안에 index.html과 shared.css라는 일반 텍스트 파일 두 개를 저장합니다. TextEdit을 사용한다면 File > New를 선택한 다음 코드를 붙여넣기 전에 Format > Make Plain Text를 선택하세요. HTML 파일을 저장할 때 .html 확장자를 사용하고, 메시지가 표시되면 Use .html을 선택하는 방법은 Apple 문서에 설명되어 있습니다. 스타일시트의 실제 파일 이름이 shared.css이고 뒤에 .txt가 붙지 않았는지 확인하세요. Work with HTML documents in TextEdit on Mac.

다음 전체 HTML 문서를 index.html로 저장하세요:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Form Study</title>
  <link rel="stylesheet" href="shared.css">
</head>
<body>
  <main class="study-page">
    <h1>Form Study</h1>
    <section class="shape-card">
      <h2 class="shape-card__title">Tile A</h2>
      <div class="shape-card__shape" aria-hidden="true"></div>
      <p>A rounded square.</p>
    </section>
    <section class="plain-note">
      <h2>Note B</h2>
      <p>This section is outside the card.</p>
    </section>
  </main>
</body>
</html>

다음 전체 스타일시트를 shared.css로 저장하세요:

body {
  margin: 0;
  background: #f4f3ef;
  color: #252525;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
}

.study-page {
  max-width: 40rem;
  margin: 2rem auto;
  padding: 0 1rem;
}

.shape-card {
  padding: 1.5rem;
  border: 2px solid #526676;
  border-radius: 1rem;
  background: #ffffff;
}

.shape-card__title {
  margin: 0 0 1rem;
  color: #36576b;
}

.shape-card__shape {
  width: 6rem;
  height: 6rem;
  border-radius: 1.25rem;
  background: #597b91;
}

.plain-note {
  margin-top: 2rem;
}

index.html을 Safari나 다른 데스크톱 브라우저에서 엽니다. 의도된 결과는 파란색 둥근 정사각형이 있는 테두리 있는 흰색 카드와 그 아래의 테두리 없는 메모입니다. 스타일시트 연결 방식은 MDN에 문서화된 패턴을 따릅니다. HTML은 스타일시트 링크의 href을 통해 CSS 리소스를 지정합니다. MDN: Including a stylesheet.

이 예제는 카드 제목에 별도의 클래스를 의도적으로 지정합니다. 따라서 네이티브 범위 지정 없이도 의도한 스타일 관계가 드러납니다. 페이지 배경과 글꼴은 문서의 기본 스타일이고, 카드 테두리와 제목 색상 및 도형은 카드에 속합니다. 재사용 가능한 규칙을 추출할 때도 이 구분을 유지하세요. 목적지 페이지에서는 이 페이지의 배경이나 너비를 적용하지 않고 카드만 사용할 수 있습니다.

디자인을 공유하려면 같은 폴더에 두 번째 HTML 페이지를 만들고 동일한 스타일시트 링크를 사용하세요. 그러면 두 페이지가 하나의 CSS 파일을 참조합니다. 이 파일을 수정하면 연결된 모든 페이지에 변화가 생기므로 공유 규칙을 변경한 뒤에는 각 페이지를 확인하세요.

네이티브 범위 지정 CSS는 언제 유용한가요?

컴포넌트에 간단한 로컬 선택자를 적용할 수 있는 요소가 여러 개 있을 때, 특히 중첩된 콘텐츠에 명시적인 하한 경계가 필요할 때 @scope를 사용하세요. CSS Cascading and Inheritance 사양은 루트 요소와 선택적인 제한 요소로 범위를 정의합니다. 루트는 포함되고, 제한 요소와 그 하위 요소는 범위 지정 규칙의 선택 대상에서 제외됩니다. 이 사양은 작업 초안입니다. CSS Cascading and Inheritance Level 6: Scoping Styles.

간단히 실험하려면 다음 선택적 코드 조각을 shared.css 끝에 추가하세요. 기존 예제 마크업을 사용해 카드 안 문단의 모양을 바꿉니다:

/* Optional addition to shared.css */
@scope (.shape-card) {
  p {
    padding: 0.5rem;
    background: #edf2f5;
  }
}

지원되는 브라우저에서는 카드 안의 문단에 옅은 배경과 패딩이 적용됩니다. 메모 문단은 해당 규칙의 범위 밖에 남습니다. CSS는 여전히 공유 파일에 있습니다. 범위 지정과 공유는 함께 사용할 수 있습니다.

나중에 nested-sample 클래스가 있는 중첩 영역을 추가한다면, 앞의 선택적 코드 조각 대신 다음 코드 조각을 사용할 수 있습니다. 이는 경계를 보여 주는 예시이며, 원래 페이지에는 아직 그런 중첩 영역이 없습니다.

/* Alternative optional fragment */
@scope (.shape-card) to (.nested-sample) {
  p {
    padding: 0.5rem;
    background: #edf2f5;
  }
}

제한 요소는 중첩 영역이 이 선택자와 일치하지 않게 합니다. 하지만 완전한 스타일 격리를 만들지는 않습니다. color과 font-family 같은 상속 속성은 여전히 범위 제한을 넘어 전달될 수 있습니다. 중첩 요소가 여전히 부모와 비슷한 모양을 보이는 원인을 파악할 때 이 차이를 기억하세요. MDN: @scope description.

.shape-card 같은 명시적 루트는 CSS를 파일 간에 옮길 때도 의존성을 분명히 해 줍니다. 목적지 문서에는 해당 클래스가 있는 요소가 있어야 합니다. 스타일시트만 옮겨서는 필요한 마크업을 제공할 수 없습니다.

브라우저 지원에는 어떤 한계가 있나요?

MDN은 현재 @scope를 Baseline 2026으로 표시합니다. 2026년 3월부터 최신 브라우저 버전 전반에서 새롭게 사용할 수 있습니다. 이전 브라우저에서는 지원되지 않을 수 있습니다. Mac이 책상 위에 있다고 해서 설치된 브라우저가 어떤 CSS 기능을 지원하는지 알 수는 없습니다. 사용하려는 버전을 호환성 정보와 대조해 확인하세요. MDN: @scope browser compatibility.

이전 브라우저도 지원해야 한다면 필수 카드 스타일은 위의 일반 클래스 규칙에 유지하세요. 그러면 선택적 범위 지정 문단 스타일을 추가 개선 사항으로 둘 수 있습니다. CSS 오류 처리 방식에 따라 브라우저는 지원하지 않는 콘텐츠를 버리고 유효한 CSS 처리는 계속할 수 있습니다. 따라서 스타일시트가 있어도 그 안의 모든 규칙이 적용되었다고 단정할 수는 없습니다. MDN: CSS error handling.

@scope 없이 같은 문단 스타일을 적용하려면 카드 문단에 shape-card__caption 같은 전용 클래스를 지정하고 일반 규칙에서 해당 클래스를 대상으로 삼으세요. 이렇게 하면 마크업 훅이 추가되지만, 결과를 네이티브 범위 지정에 의존하지 않아도 됩니다.

같은 동작을 기대하며 style 요소에 scoped 속성을 추가하지 마세요. 현재 HTML Standard의 해당 요소 속성 목록에는 이 속성이 없습니다. 네이티브 CSS 범위 지정에는 @scope 규칙을 사용합니다. HTML Standard: The style element, MDN: @scope syntax.

페이지를 어떻게 이식 가능하게 유지하나요?

이 예제에서는 form-study 폴더 전체를 옮기면 index.html과 shared.css의 관계가 유지됩니다. HTML만 옮기면 스타일시트가 빠집니다. 작성한 페이지를 넘기거나 재구성하기 전에 다음의 간단한 의존성 조건을 확인하세요:

  1. 마크업: 컴포넌트 클래스와 선택자에 필요한 구조를 유지합니다.
  2. 스타일시트: CSS 파일을 포함하고 HTML 링크가 해당 위치를 가리키도록 유지합니다.
  3. 리소스: CSS에서 참조하는 파일을 포함하고 경로를 유지하거나 업데이트합니다.
  4. 브라우저: 페이지를 열 브라우저 버전에서 지원되는 스타일 적용 방식을 유지합니다.

컴포넌트에 글꼴이나 장식용 파일을 추가하면 세 번째 확인이 중요해집니다. MDN 문서에 따르면 상대 CSS URL은 스타일시트 URL을 기준으로 해석됩니다. 따라서 선언을 다른 폴더의 스타일시트로 옮기면 해당 선언이 가리키는 리소스 위치가 달라질 수 있습니다. MDN: url() CSS function.

예를 들어 외부 스타일시트를 프로젝트 폴더에서 styles 하위 폴더로 옮기면 url("assets/tile.png")을 가리키는 선언이 이제 styles/assets 안을 가리킵니다. 경로를 업데이트하거나 해당 디렉터리 구조를 유지하세요. 작동 예제는 도형을 CSS만으로 그리므로 이런 의존성이 없습니다.

단일 파일로 전달하는 것이 우선이라면 제공된 CSS를 문서의 head 안에 있는 style 요소에 넣고 스타일시트 링크를 제거하세요. 그러면 현재 예제에는 HTML 파일만 필요합니다. 선택적인 명시적 루트 @scope 블록을 포함해 같은 선택자를 유지하세요. HTML은 style 요소를 통해 스타일시트를 내장할 수 있습니다. HTML Standard: The style element.

파일 이동 및 다시 불러오기로 선택 확인하기

완성된 프로젝트 폴더를 다른 위치에 복사한 다음, 복사한 HTML을 브라우저에서 엽니다. 복사본에서 shared.css의 도형 배경색을 바꾸고 저장한 다음 페이지를 새로고침합니다. 화면의 변화로 복사한 페이지가 사용하는 스타일시트를 편집했는지 확인할 수 있습니다.

그다음 카드와 메모를 모두 살펴보세요. 성공적으로 적용되었다면 카드 스타일은 유지되고 메모는 선택적인 범위 지정 문단 규칙의 대상이 되지 않습니다. 페이지 전체의 스타일이 사라지면 먼저 CSS 파일 이름과 링크 경로를 확인하세요. 선택적 스타일만 보이지 않는다면 브라우저 지원과 범위 루트를 확인하세요. 관계없는 요소가 바뀐다면 의도한 컴포넌트 너머까지 적용되는 선택자를 살펴보세요.

TextEdit에서 HTML을 다시 열 때는 File > Open을 선택한 다음, 소스 코드를 확인해야 한다면 Show Options와 Ignore rich text commands를 선택하세요. Apple은 이후에 열 때 사용할 수 있는 Display HTML files as HTML code instead of formatted text 설정도 문서화하고 있습니다. Work with HTML documents in TextEdit on Mac.

이 작은 페이지를 한데 유지하는 것이 주된 작업이라면 내장 CSS를 선택하세요. 여러 페이지에서 같은 규칙을 함께 유지 관리해야 한다면 공유 스타일시트를 선택하세요. 경계가 규칙을 단순하게 만들고 브라우저가 지원한다면 네이티브 범위 지정을 추가하세요. 선택한 구성에 필요한 마크업, 스타일시트, 리소스의 관계를 확인하려면 실제 파일을 옮기고 다시 여는 것으로 마무리하세요.

출처