---
kind: REFERENCE
slug: scope-a-layout-rule-to-what-uses-it
title: 배치를 거는 규칙은 그 배치를 쓰는 요소까지 좁혀 적는다
topic: css-rules-that-leak
topicName: CSS 규칙이 구역을 넘어 샌다
project: TechLog
status: 게시 전
verifiedOn: 2026-09-04
sourceRevision: tech-log@2026-09-02
source:
  - final/document.md#§11.1
---

# 배치를 거는 규칙은 그 배치를 쓰는 요소까지 좁혀 적는다

구역 클래스 아래에 태그 선택자로 배치를 걸면 그 구역 안의 모든 같은 태그가 걸린다. 제목 안의 링크가 행용 격자에 갇혀 h2 높이가 199px 이 됐다. 배치를 거는 규칙은 그 배치를 쓰는 요소까지 좁혀 적는다.

## 관계

- **구역 전체에 건 격자가 제목까지 잡아 h2 높이가 199px 이 됐다**
  이 기준의 근거 사건이다.
- **프록시 지표가 아니라 보이는 것을 측정한다**
  이 부류를 확인하는 방법이 그 기준에 있다.
- **규칙이 없었던 게 아니라 절반만 있었다**
  같은 화면에서 난 다른 부류의 CSS 결함이다.

## 목적

「디자인이 안 된 것처럼 보인다」는 보고의 원인이 되는 선택자 누출을 막는다.

이 부류는 규칙 자체는 맞고 걸리는 대상이 넓다. 그래서 규칙을 읽어서는 틀린 것을 찾을 수 없고, 그려진 결과를 봐야 한다.

## 규칙

### 1. 배치 속성은 그 배치를 쓰는 요소까지 좁혀 적는다

`display: grid|flex`·`grid-template-columns`·`padding` 을 구역 클래스 아래 태그 선택자로 걸지 않는다.

행을 위한 격자를 구역 전체에 걸면 제목 안의 링크도 그 격자가 된다. 첫 칸 너비에 갇혀 접히고 행용 padding 까지 물린다.

### 2. CSS 만으로 막지 않고 구조도 본다

선택자를 좁히면 같은 구조가 다시 생겼을 때 다시 샌다. 제목 안에 링크를 두지 않는 편이 낫고, 주제로 가는 길은 별도의 한 줄이 맡는다.

### 3. 이미 좁혀 둔 곳은 검사에서 명시적으로 뺀다

예외를 적어 두지 않으면 검사 결과가 늘 빨갛고 곧 읽히지 않는다. 뺀 것이 코드에 이름으로 남아 다음 사람이 세어 볼 수 있어야 한다.

### 4. 전역 규칙과 CSS module 이 섞인 화면을 따로 센다

module 은 클래스 이름을 빌드 때 바꿔 전역 선택자와 겹치지 않게 만든다. 그래서 전역 규칙을 고쳐도 module 을 쓰는 화면에는 닿지 않고, 한 화면 안에서 두 언어가 섞이면 더 눈에 띈다.

## 적용 조건

- 구역 클래스 아래에 태그 선택자로 배치를 거는 CSS 를 쓸 때
- 같은 구역 안에 제목과 목록이 함께 있을 때
- 전역 규칙과 CSS module 이 한 화면에 섞여 있을 때
- 「디자인이 안 된 것처럼 보인다」는 보고를 받았을 때

## 예외

- 색이나 글꼴만 거는 규칙은 새어도 티가 나지 않으므로 대상이 아니다. 검사에 넣으면 결과가 늘 빨갛다.
- 구역 안의 모든 같은 태그가 실제로 같은 배치를 써야 하는 화면이라면 좁히지 않아도 된다. 그때는 그 의도를 검사의 예외 목록에 적는다.

## 예시

- 비교 행을 위한 격자가 제목 안의 링크까지 잡아 제목이 200px 칸에 갇히고 h2 높이가 199px 이 됐다
- 같은 모양이 다른 구역 아홉 곳에도 있어 선택자 51개를 고쳤다
- 전역 규칙만 고쳐서 CSS module 을 쓰는 세 버튼만 테두리와 파란 채움으로 남았다