DongHyeonkaandClaude Opus 5
6feee5ba57
writing-as-the-person-who-did-it 을 서브에이전트 셋으로 나눠 56편에 적용했다. 56편 중 20편만 고쳤다 — 나머지 36편은 SSOT 를 절 단위로 대조했을 때 옮길 흔적이 이미 옮겨져 있었거나 없었다. 없는 목소리를 채우지 않는다. 옮긴 것은 전부 SSOT 의 어느 절에서 왔는지 댈 수 있다. §3.4 「눈으로 찾을 일이 아니었다」— 세 계약을 파싱해 뽑은 이유 §4.3 구현하지 않기로 한 것과 빠뜨린 것은 다르다 §8.5 표의 마지막 줄을 더할 때 이 목록을 또 빠뜨렸다 §9.4 「왜 주제 링크가 탐색으로 가지?」— 우회를 남겨 두면 계속 나온 질문 §11.3 「세 버튼」을 실제 이름으로 되돌리고 두 언어가 섞인 것을 그 자리에 §12.2 막지 않은 대신 메모리에 남긴 것 §13.1 여섯 벌 인용이 어느 커밋이 짚은 말인지 §13.3 고쳐 쓴 첫 안이 거절당한 것과 사용자가 고른 말 두 쌍 §14.3 「문서가 그대로 나온다」는 구조 차이가 아니라 내용 양의 차이라는 정정 §16.1 삭제가 막힌 실제 기록 이름과 그것을 막은 프로젝트 링크 §16.9 주제 논지와 축 결론이 AI 가 써서 DB 에 직접 넣은 미검토 초안이라는 것 §17.5 바운딩 박스로 잘못 지목한 대상이 「판단 기준」이었다는 것 검증 환경의 커밋 해시 하나가 틀려 있었다(ca1cfa2 → ca1fc92). SSOT §13.1 과 부록 A 가 적은 값이고 저장소에 그 커밋이 있다. 검사 넷 전부 통과한다 — check_prose 56편 error 0 · check_body PASS · check_evidence --repo 문제 없음 · verify-tech-log-tree 프로젝트 5 error 0 warn 0. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
102 lines
4.5 KiB
Markdown
102 lines
4.5 KiB
Markdown
---
|
|
kind: CASE
|
|
slug: a-section-wide-rule-caught-the-heading
|
|
title: 구역 전체에 건 격자가 제목까지 잡아 h2 높이가 199px 이 됐다
|
|
topic: css-rules-that-leak
|
|
topicName: CSS 규칙이 구역을 넘어 샌다
|
|
project: TechLog
|
|
status: 게시 전
|
|
lastVerifiedOn: 2026-09-04
|
|
sourceRevision: tech-log@2026-09-02
|
|
source:
|
|
- final/document.md#§11.1
|
|
- final/document.md#§11.3
|
|
- final/document.md#§16.3
|
|
---
|
|
|
|
# 구역 전체에 건 격자가 제목까지 잡아 h2 높이가 199px 이 됐다
|
|
|
|
「디자인이 안 된 것처럼 보인다」고 보고된 화면에서 h2 높이가 199px 이었다. 비교 행을 위한 격자 규칙의 선택자가 구역 전체라 제목 안의 링크까지 잡았다. 같은 모양이 다른 구역 아홉 곳에도 있어 선택자 51개를 고쳤다.
|
|
|
|
## 관계
|
|
|
|
- **배치를 거는 규칙은 그 배치를 쓰는 요소까지 좁혀 적는다**
|
|
이 사건에서 굳힌 기준이다.
|
|
- **프록시 지표가 아니라 보이는 것을 측정한다**
|
|
이 부류를 어떻게 확인하는지가 그 기준에 있다.
|
|
- **규칙이 없었던 게 아니라 절반만 있었다**
|
|
같은 화면에서 난 다른 부류의 CSS 결함이다.
|
|
|
|
## 문제
|
|
|
|
사용자가 홈 비교 구역의 「디자인이 안 된 것처럼 보인다」고 보고했다.
|
|
|
|
제목이 접혀 두 줄이 되고 위아래로 크게 벌어져 있었다. 같은 이유로 주제 화면의 안내 문단도 행의 크기와 색으로 덮여 있었다.
|
|
|
|
## 결론
|
|
|
|
사용자가 원인을 정확히 짚어 주었다 — 「디자인이 안 된 게 아니라 CSS 선택자가 새고 있습니다」.
|
|
|
|
```css
|
|
.home-comparison a {
|
|
display: grid;
|
|
grid-template-columns: 200px minmax(0, 1fr);
|
|
padding: 27px 2px 28px;
|
|
}
|
|
```
|
|
|
|
비교 행을 위한 규칙인데 선택자가 구역 전체라 제목 안의 링크까지 잡았다. 제목이 200px 칸에 갇혀 두 줄로 접히고 행용 padding 까지 물려 h2 높이가 199px 이 됐다.
|
|
|
|
배치를 거는 규칙은 그 배치를 쓰는 요소까지 좁혀 적는다. 같은 모양이 다른 구역 아홉 곳에도 있어 선택자 51개를 고쳤다.
|
|
|
|
CSS 로만 막는 것은 임시방편이라 구조도 바꿨다 — 제목 안에 링크를 두지 않고, 주제로 가는 길은 아래 한 줄이 맡는다.
|
|
|
|
## 검증 환경
|
|
|
|
tech-log-frontend : 344dadb · 805d400 · 8c5dbe1
|
|
확인 방식 : 배포본에서 전체 페이지 스크린샷과 getComputedStyle 측정
|
|
|
|
## 재현 조건
|
|
|
|
1. 구역 클래스 아래에 태그 선택자로 격자를 건다
|
|
2. 그 구역 안 제목에 링크를 넣는다
|
|
3. 제목의 높이를 잰다
|
|
|
|
## 본문
|
|
|
|
<!-- body:start -->
|
|
|
|
## 행을 위한 규칙이 제목을 잡았다
|
|
|
|
```css
|
|
.home-comparison a {
|
|
display: grid;
|
|
grid-template-columns: 200px minmax(0, 1fr);
|
|
padding: 27px 2px 28px;
|
|
}
|
|
```
|
|
|
|
`a` 는 구역 안의 모든 링크를 잡는다. 제목 안에 링크가 있으면 그 링크도 격자가 되고 첫 칸의 200px 에 갇힌다. 행을 위한 padding 까지 물려 h2 높이가 199px 이 됐다.
|
|
|
|
## 아홉 구역에 같은 모양이 있었다
|
|
|
|
같은 형태가 다른 구역 아홉 곳에도 있었다. 선택자 51개를 `li > a` 처럼 그 배치를 쓰는 요소까지 좁혔다.
|
|
|
|
## CSS 만으로 막지 않았다
|
|
|
|
선택자를 좁혀도 같은 구조가 다시 생기면 다시 샌다. 제목 안에 링크를 두지 않도록 구조를 바꿨고, 주제로 가는 길은 아래 한 줄이 맡는다.
|
|
|
|
## 전역 규칙이 닿지 않는 화면
|
|
|
|
버튼에서 상자를 걷어내는 변경이 앱 전역 규칙만 고쳤다. 게시 기록·게시 흐름·워크플로 게이트는 CSS module 을 쓰므로 그 규칙이 닿지 않아, 다른 화면에서 상자를 걷어낸 뒤에도 「Snapshot 보기」·「게시 취소」·「적용」만 테두리와 파란 채움으로 남았다. 한 화면 안에서 두 언어가 섞여 더 눈에 띄었다.
|
|
|
|
## 검사
|
|
|
|
`section-selector-scope.test.ts` 가 `.클래스 태그` 모양에 배치 속성(`display: grid|flex`, `grid-template-columns`, `padding`)이 걸려 있으면 멈춘다. 이미 좁혀 둔 곳은 `SETTLED` 로 명시한다. 색이나 글꼴만 거는 규칙은 새어도 티가 나지 않으므로 대상이 아니다.
|
|
|
|
## 확인하지 못한 것
|
|
|
|
CSS module 을 쓰는 화면은 전역 규칙이 닿지 않아 따로 고쳤다. 「지금 집중하는 것」 탭과 주제 탭의 표시 방식이 아직 다르다 — 한쪽은 파란 밑줄이고 한쪽은 알약이다. 주제 탭 밑줄을 그쪽에서 베껴 왔다가 뺐기 때문이다.
|
|
|
|
<!-- body:end -->
|