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>
2.7 KiB
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 |
|
배치를 거는 규칙은 그 배치를 쓰는 요소까지 좁혀 적는다
구역 클래스 아래에 태그 선택자로 배치를 걸면 그 구역 안의 모든 같은 태그가 걸린다. 제목 안의 링크가 행용 격자에 갇혀 h2 높이가 199px 이 됐다. 배치를 거는 규칙은 그 배치를 쓰는 요소까지 좁혀 적는다.
관계
- 구역 전체에 건 격자가 제목까지 잡아 h2 높이가 199px 이 됐다 이 기준의 근거 사건이다.
- 프록시 지표가 아니라 보이는 것을 측정한다 이 부류를 확인하는 방법이 그 기준에 있다.
- 규칙이 없었던 게 아니라 절반만 있었다 같은 화면에서 난 다른 부류의 CSS 결함이다.
목적
「디자인이 안 된 것처럼 보인다」는 보고의 원인이 되는 선택자 누출을 막는다. 이 부류는 규칙 자체는 맞고 걸리는 대상이 넓다.
규칙
배치 속성은 그 배치를 쓰는 요소까지 좁혀 적는다
display: grid|flex, grid-template-columns, padding 을 구역 클래스 아래 태그 선택자로 걸지 않는다.
CSS 만으로 막지 않고 구조도 본다 선택자를 좁히면 같은 구조가 다시 생겼을 때 다시 샌다. 제목 안에 링크를 두지 않는 편이 낫다.
이미 좁혀 둔 곳은 검사에서 명시적으로 뺀다 예외를 적어 두지 않으면 검사 결과가 늘 빨갛고 곧 읽히지 않는다.
전역 규칙과 CSS module 이 섞인 화면을 따로 센다 전역 규칙을 고쳐도 module 을 쓰는 화면에는 닿지 않는다. 한 화면 안에서 두 언어가 섞이면 더 눈에 띈다.
적용 조건
구역 클래스 아래에 태그 선택자로 배치를 거는 CSS. 같은 구역 안에 제목과 목록이 같이 있으면 특히 걸린다.
예외
색이나 글꼴만 거는 규칙은 새어도 티가 나지 않으므로 대상이 아니다.
구역 안의 모든 같은 태그가 실제로 같은 배치를 써야 하는 화면이라면 좁히지 않아도 된다. 그때는 그 의도를 검사의 예외 목록에 적는다.
예시
비교 행을 위한 격자가 제목 안의 링크까지 잡아 제목이 200px 칸에 갇혔다.
같은 모양이 다른 구역 아홉 곳에도 있어 선택자 51개를 고쳤다.
section-selector-scope.test.ts 가 .클래스 태그 모양에 배치 속성이 걸려 있으면 멈춘다.