body에 페이지 텍스트 기본값을 설정하고, 상속된 속성이 구성 요소에 적용되도록 하며, 레이아웃 규칙은 의도적으로 지정하세요. 이 가이드에서는 모든 요소가 전역 규칙을 되돌리게 하지 않고 Mac에서 로컬 HTML 페이지를 만들고 확인하는 방법을 설명합니다.

전역 규칙은 왜 구성 요소 기본값에 간섭하나요?

전역 선택자 *는 모든 요소와 일치합니다. 따라서 해당 규칙 안의 선언은 일치하는 각 요소에 직접 적용되며, 자손이 상속할 값을 제공하는 데 그치지 않습니다. 또한 이 선택자는 의사 요소와 직접 일치하지 않으므로 *::before 같은 선택자가 필요합니다. 전역 선택자.

문단과 중첩된 텍스트 span을 포함하는 구성 요소에 다음 CSS 조각을 사용한다고 가정해 보세요.

/* Illustrative fragment: assumes a .tile with text descendants. */
* {
  color: #303840;
}

.tile {
  color: #245d75;
}

타일 자체는 파란색 텍스트 색상을 받습니다. 타일의 문단과 span에는 전역 규칙의 어두운 색상이 직접 적용됩니다. 일반적인 상속으로는 해당 선언을 거쳐 구성 요소의 색상이 전달되지 않습니다. CSS 기본값 설정 규칙에 따르면, 캐스케이드에서 해당 요소의 속성값을 제공하지 않을 때 상속되는 속성은 부모의 계산값을 얻습니다. CSS 캐스케이딩 및 상속 레벨 4, 기본값 설정.

*의 명시도가 0이므로 혼란스러울 수 있습니다. 명시도는 적용 가능한 캐스케이드 출처와 레이어 내에서 같은 요소에 적용되는 선언끼리 비교합니다. 부모에 지정된 선언은 자식에 적용되는 선택자와 경쟁하지 않습니다. 따라서 부모 선택자의 명시도를 높여도 이 상속 문제는 해결되지 않습니다. 명시도.

유용한 해결책은 전역 텍스트 선언을 제거하고 body에 기본값을 지정하는 것입니다. 그러면 구성 요소나 요소가 다른 값을 지정할 때까지 자손이 해당 값을 상속할 수 있습니다. MDN은 color가 상속되는 속성이며, 상속은 부모의 계산값을 따른다고 설명합니다. 상속.

페이지, 구성 요소 또는 모든 요소 중 어디에 기본값을 지정해야 하나요?

광범위한 선택자를 작성하기 전에, 속성이 텍스트 하위 트리를 통해 전달되어야 하는지, 하나의 상자를 설명해야 하는지, 아니면 모든 상자에 의도적으로 적용되어야 하는지 결정하세요. 다음 판단 기준은 이 구분을 작은 작성자 관리 페이지에 적용합니다.

원하는 결과 권장 위치 이유
일반 페이지 텍스트가 기본 색상과 서체를 공유함 body 상속을 통해 텍스트에 공통 시작값을 제공함
타일과 그 안의 일반 텍스트가 다른 색상을 공유함 .tile 구성 요소 안에 새로운 상속값을 설정함
하나의 캡션에 다른 색상을 적용함 .caption 예외가 필요한 요소에 적용함
한 패널에 여백, 테두리 또는 배경을 적용함 패널의 클래스 상자 장식을 해당 소유 요소에 연결함
상자에 일관된 크기 계산 모델을 적용함 의도적으로 지정한 box-sizing 규칙 명시적인 크기 계산 규칙을 설정함
쉽게 대체할 수 있는 여백 기본값을 제목에 적용함 필요한 요소로 범위를 제한한 제목 선택자. 필요하면 :where()으로 감쌈 기본값을 의도한 요소에만 적용함

상속 여부는 속성마다 다릅니다. body에 지정한 모든 선언이 자손에 전달된다고 가정하지 말고 속성 참조의 Inherited 항목을 확인하세요. 예를 들어 테두리는 기본적으로 상속되지 않습니다. 상속.

전역 크기 계산 규칙은 여전히 적절할 수 있습니다. border-box를 사용하면 요소의 선언된 너비에 패딩과 테두리가 포함되며, 여백은 그 너비 바깥에 남습니다. 이는 구체적인 박스 모델 결정이지, 모든 페이지 기본값을 전역으로 적용해야 한다는 이유가 아닙니다. box-sizing.

Mac에서 완전한 로컬 예제 만들기

TextEdit을 일반 텍스트 모드로 사용하거나 기존 코드 편집기를 이용하세요. TextEdit에서 File > New를 선택한 다음 Format > Make Plain Text를 선택하세요. 아래 문서 전체를 붙여 넣고 File > Save를 선택한 뒤 파일 이름을 page-defaults.html로 지정하세요. 메시지가 표시되면 Use .html을 선택하세요. Apple은 이 작업 흐름을 TextEdit HTML 가이드에서 설명합니다.

이 예제는 합성 라벨과 CSS로 그린 도형을 사용합니다. 스타일시트가 포함된 완전한 문서 하나이므로 별도 파일을 준비할 필요가 없습니다. 코드는 여기서 검토했지만 Mac 브라우저에서 렌더링을 실행하지는 않았습니다.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page defaults demonstration</title>
  <style>
    *, *::before, *::after {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: system-ui, sans-serif;
      font-size: 1rem;
      line-height: 1.5;
      color: #303840;
      background-color: #f4f5f6;
    }

    main {
      max-width: 44rem;
      margin: 0 auto;
      padding: 2rem 1rem;
    }

    h1 {
      line-height: 1.2;
    }

    .tile {
      margin: 1.5rem 0;
      padding: 1.25rem;
      border: 2px solid currentColor;
      border-radius: 0.75rem;
      color: #245d75;
      background-color: #ffffff;
    }

    .tile h2 {
      margin-top: 0;
    }

    .shape {
      width: 4rem;
      height: 4rem;
      background-color: currentColor;
    }

    .shape--round {
      border-radius: 50%;
    }

    .caption {
      color: #66523c;
    }
  </style>
</head>
<body>
  <main>
    <h1>Shape notes</h1>
    <p>Page sample: <span>Label A</span>.</p>

    <section class="tile">
      <h2>Tile B</h2>
      <div class="shape shape--round" aria-hidden="true"></div>
      <p>Component sample: <span>Label C</span>.</p>
      <p class="caption">Caption D has its own text color.</p>
    </section>

    <p>Page sample: <span>Label E</span>.</p>
  </main>
</body>
</html>

브라우저에서 page-defaults.html를 여세요. TextEdit에서 소스를 다시 열 때 마크업이 일관되게 표시되도록 하려면 TextEdit > Settings > Open and Save를 선택하고 Display HTML files as HTML code instead of formatted text를 활성화하세요. Mac의 TextEdit에서 HTML 문서 작업하기.

세 번 수정해 상속 경계 확인하기

다음 확인 절차를 통해 문서를 간단한 진단 연습으로 바꿀 수 있습니다. 수정할 때마다 소스를 저장하고 브라우저를 새로 고치세요. 다음 수정을 시도하기 전에 원본 문서의 복사본을 보관하거나 각 변경 사항을 실행 취소하세요.

  1. body의 색상만 #4b465f로 바꾸세요. Label A와 Label E 주변의 텍스트 색상이 바뀌어야 합니다. 타일은 자체 색상을 유지합니다.
  2. 페이지 색상을 원래대로 되돌린 다음 .tile만 color: #526637로 바꾸세요. Label C를 포함해 타일의 일반 제목과 문단 텍스트가 이 변경을 따라야 합니다. Caption D는 명시적으로 지정된 색상을 유지합니다.
  3. 타일 색상을 원래대로 되돌린 다음 스타일시트 맨 앞에 * { color: #303840; }을 임시로 추가하세요. 이제 Label C가 있는 문단에 해당 선언이 직접 적용됩니다. 그런 다음 임시 규칙을 제거하세요.

이 확인 절차는 구성 요소가 상속값을 설정하는 것과 자손이 자체 선언을 받는 것의 차이를 보여 줍니다. 예상되는 텍스트 동작은 명세의 상속 및 기본값 설정 규칙을 따릅니다.

HTML 페이지와 스타일시트는 어떤 관계를 맺나요?

리소스 로딩과 선택자 동작을 분리하세요. 이 예제는 CSS를 style 요소에 포함합니다. 스타일시트를 별도 파일로 만들려면 해당 요소의 내용만 일반 텍스트 파일로 옮겨 HTML 파일과 같은 위치에 page-defaults.css이라는 이름으로 저장하세요. style 요소 전체를 head 안의 다음 한 줄로 바꾸세요. 이는 교체용 조각이지 별도의 완전한 문서가 아닙니다.

<link rel="stylesheet" href="page-defaults.css">

stylesheet 링크 유형은 문서 표현에 사용되는 외부 CSS 리소스를 나타냅니다. href의 파일 이름은 실제로 저장한 파일을 가리켜야 합니다. 이 선언이 파일을 생성하지는 않습니다. HTML 표준은 링크 유형: stylesheet에서 이 관계를 정의합니다.

이 예제의 관계는 간단합니다. HTML은 요소와 클래스를 제공하고 CSS는 그 표현 방식을 제공합니다. 스타일시트에서 .tile의 이름을 바꾸면 HTML의 해당 클래스도 업데이트해야 합니다. CSS 파일을 옮기면 리소스 참조를 업데이트해야 합니다. 어느 변경에도 더 강한 선택자는 필요하지 않습니다.

외부 파일 버전이 스타일 없이 표시되면 먼저 CSS 파일이 예상한 이름으로 존재하는지, 파일 내용이 HTML 문서 전체가 아니라 CSS인지 확인하세요. 캐스케이드를 바꾸기 전에 포함형 버전으로 돌아가 리소스 로딩 문제를 분리하세요.

:where() 또는 캐스케이드 레이어는 언제 사용해야 하나요?

추가 문제를 해결할 때 이런 기능을 사용하세요. 위의 완전한 예제는 두 기능에 의존하지 않습니다.

:where()를 사용해 명시도 0인 기본값을 필요한 요소에 적용하기

페이지에 여러 단계의 제목이 추가된다고 가정해 보세요. 다음 선택 사항인 스타일시트 조각은 공유 여백을 설정하면서 일반 제목 선택자로 쉽게 대체할 수 있게 합니다.

/* Optional fragment: add to the example stylesheet. */
:where(h1, h2, h3) {
  margin-bottom: 0.75rem;
}

h2 {
  margin-bottom: 1rem;
}

인수를 포함한 :where() 선택자 전체의 명시도는 0입니다. 하지만 *를 :where(*)으로 바꿔도 앞서 설명한 색상 문제는 해결되지 않습니다. 여전히 모든 요소와 일치해 직접 선언을 지정하기 때문입니다. 이 문제는 상속으로 해결하세요. MDN은 :where()가 2021년 1월부터 대부분의 브라우저에서 폭넓게 지원된다고 기록합니다. 구형 브라우저를 지원한다면 호환성 표를 확인하세요. :where() 의사 클래스.

:where()을 지원하지 않는 브라우저에서는 이러한 여백 기본값에 h1, h2, h3 같은 일반 선택자 목록을 사용한 다음, 같은 스타일시트와 레이어에서 명시도가 같은 예외를 뒤에 배치하세요. 이렇게 하면 기본값을 필요한 요소에만 적용할 수 있지만 명시도는 더 이상 0이 아닙니다. 명시도.

규칙 그룹에 명시적인 순서가 필요할 때 레이어 사용하기

스타일시트가 커지면 다음 선택 사항인 조각으로 선언된 레이어 순서를 확인할 수 있습니다. 완전한 예제의 전체 CSS를 대체하는 것이 아니라 별도로 추가하는 내용입니다.

/* Optional fragment for browsers supporting cascade layers. */
@layer defaults, components;

@layer defaults {
  p {
    margin-bottom: 1rem;
  }
}

@layer components {
  .tile p {
    margin-bottom: 0.5rem;
  }
}

일반 작성자 선언에서는 뒤에 오는 레이어가 앞선 레이어보다 우선하며, 일반 비레이어 선언은 레이어가 지정된 선언보다 우선합니다. 중요 선언은 레이어 순서를 뒤집으므로 !important를 추가하면 이 순서가 달라집니다. 레이어는 서로 경쟁하는 규칙을 정리하지만 직접 스타일이 지정된 자식이 부모의 값을 상속하게 하지는 않습니다. @layer 규칙.

MDN은 @layer가 2022년 3월부터 여러 브라우저에서 지원된다고 기록합니다. 대상 브라우저가 더 오래되어 지원하지 않는다면 필수 표현 규칙을 레이어 블록 밖에 두고 완전한 예제에 나온 비레이어 방식을 사용하세요. 필수 스타일을 지원되지 않는 기능 안에만 두지 마세요. 캐스케이드 레이어 지원.

기존 스타일시트에 재정의를 더하지 않고 어떻게 수정하나요?

한 번에 속성 하나씩 살펴보세요. 텍스트 색상 문제라면 자손에 색상을 직접 지정하는 광범위한 규칙을 찾으세요. 해당 선언을 전역 규칙에서 제거하고 페이지 색상은 body에 지정하며, 구성 요소 색상은 각 구성 요소의 루트에 유지하세요. 디자인에 예외가 필요한 경우에만 요소 수준 선언을 남겨 두세요.

그런 다음 예제의 세 가지 수정을 다시 해 보세요. 일반 구성 요소 텍스트가 여전히 부모의 값을 따르지 않으면 해당 자손을 대상으로 하는 선언을 찾아보세요. 구성 요소의 테두리를 바꿔도 자손의 테두리가 바뀌지 않는다면 이는 예상된 동작입니다. 테두리의 상속 여부는 텍스트 색상의 상속 여부와 다릅니다. 상속.

유지 관리하기 쉬운 기본값에는 명확한 소유 요소가 있습니다. 페이지 서체는 페이지 경계에, 구성 요소 표현은 구성 요소 경계에, 의도된 예외는 해당 요소에 두세요. 일치하는 모든 요소에 실제로 적용하려는 결정에만 전역 선언을 사용한 다음, 작은 로컬 페이지에서 이러한 경계를 확인하세요.

출처