DongHyeonkaandClaude Opus 5
0650d91def
rewriting-technical-prose-naturally 를 서브에이전트 셋으로 나눠 56편에 적용했다. ai-tells.md 의 첫 절대로 다른 표현으로 바꾸는 대신 문장을 통째로 지웠다. 설명한 것의 중요성을 다시 평가하는 꼬리 19 이미 설명한 것을 추상어로 되풀이 19 독자에게 읽는 법을 지시하거나 오해를 가정 9 자료가 뒷받침하지 않는 덧붙인 이득 4 문서군 전체의 문형 편중도 풀었다 — 함께 27→7(한 묶음), 그대로 22→12(두 묶음), 하게 된다 1→0. 한 편에서 세 번 반복되던 「같은 병이 ~에서도 났다」와 두 기록에 같은 문장으로 있던 세 쌍을 갈랐다. 계약 제목 「여덟 자리」가 본문의 「여덟 곳」과 어긋나 있었다. 제목이 spatial-metaphor 규칙에도 걸리므로 계약과 기록을 함께 「여덟 곳」으로 맞췄다. 검사 넷 전부 통과한다 — check_prose 56편 error 0 · check_body PASS · check_evidence --repo 문제 없음 · verify-tech-log-tree error 0 warn 0. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
63 lines
2.7 KiB
Markdown
63 lines
2.7 KiB
Markdown
---
|
|
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 결함이다.
|
|
|
|
## 목적
|
|
|
|
「디자인이 안 된 것처럼 보인다」는 보고의 원인이 되는 선택자 누출을 막는다. 이 부류는 규칙 자체는 맞고 걸리는 대상이 넓다.
|
|
|
|
## 규칙
|
|
|
|
**배치 속성은 그 배치를 쓰는 요소까지 좁혀 적는다**
|
|
`display: grid|flex`, `grid-template-columns`, `padding` 을 구역 클래스 아래 태그 선택자로 걸지 않는다.
|
|
|
|
**CSS 만으로 막지 않고 구조도 본다**
|
|
선택자를 좁히면 같은 구조가 다시 생겼을 때 다시 샌다. 제목 안에 링크를 두지 않는 편이 낫다.
|
|
|
|
**이미 좁혀 둔 곳은 검사에서 명시적으로 뺀다**
|
|
예외를 적어 두지 않으면 검사 결과가 늘 빨갛고 곧 읽히지 않는다.
|
|
|
|
**전역 규칙과 CSS module 이 섞인 화면을 따로 센다**
|
|
전역 규칙을 고쳐도 module 을 쓰는 화면에는 닿지 않는다. 한 화면 안에서 두 언어가 섞이면 더 눈에 띈다.
|
|
|
|
## 적용 조건
|
|
|
|
구역 클래스 아래에 태그 선택자로 배치를 거는 CSS. 같은 구역 안에 제목과 목록이 같이 있으면 특히 걸린다.
|
|
|
|
## 예외
|
|
|
|
색이나 글꼴만 거는 규칙은 새어도 티가 나지 않으므로 대상이 아니다.
|
|
|
|
구역 안의 모든 같은 태그가 실제로 같은 배치를 써야 하는 화면이라면 좁히지 않아도 된다. 그때는 그 의도를 검사의 예외 목록에 적는다.
|
|
|
|
## 예시
|
|
|
|
비교 행을 위한 격자가 제목 안의 링크까지 잡아 제목이 200px 칸에 갇혔다.
|
|
|
|
같은 모양이 다른 구역 아홉 곳에도 있어 선택자 51개를 고쳤다.
|
|
|
|
`section-selector-scope.test.ts` 가 `.클래스 태그` 모양에 배치 속성이 걸려 있으면 멈춘다.
|