document-haness/docs/TechLog/tech-log-studio/css-rules-that-leak/reference/reference-scope-a-layout-rule-to-what-uses-it.md

kind, slug, title, topic, topicName, project, status, verifiedOn, sourceRevision, source

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

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

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

관계

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

목적

「디자인이 안 된 것처럼 보인다」는 보고의 원인이 되는 선택자 누출을 막는다. 이 부류는 규칙 자체는 맞고 걸리는 대상이 넓다.

규칙

배치 속성은 그 배치를 쓰는 요소까지 좁혀 적는다 display: grid|flex, grid-template-columns, padding 을 구역 클래스 아래 태그 선택자로 걸지 않는다.

CSS 만으로 막지 않고 구조도 본다 선택자를 좁히면 같은 구조가 다시 생겼을 때 다시 샌다. 제목 안에 링크를 두지 않는 편이 낫다.

이미 좁혀 둔 곳은 검사에서 명시적으로 뺀다 예외를 적어 두지 않으면 검사 결과가 늘 빨갛고 곧 읽히지 않는다.

전역 규칙과 CSS module 이 섞인 화면을 따로 센다 전역 규칙을 고쳐도 module 을 쓰는 화면에는 닿지 않는다. 한 화면 안에서 두 언어가 섞이면 더 눈에 띈다.

적용 조건

구역 클래스 아래에 태그 선택자로 배치를 거는 CSS. 같은 구역 안에 제목과 목록이 함께 있으면 특히 걸린다.

예외

색이나 글꼴만 거는 규칙은 새어도 티가 나지 않으므로 대상이 아니다.

구역 안의 모든 같은 태그가 실제로 같은 배치를 써야 하는 화면이라면 좁히지 않아도 된다. 그때는 그 의도를 검사의 예외 목록에 적는다.

예시

비교 행을 위한 격자가 제목 안의 링크까지 잡아 제목이 200px 칸에 갇혔다.

같은 모양이 다른 구역 아홉 곳에도 있어 선택자 51개를 고쳤다.

section-selector-scope.test.ts 가 .클래스 태그 모양에 배치 속성이 걸려 있으면 멈춘다.