DongHyeonkaandClaude Opus 5
fd221353a3
SSOT 를 저장소에서 확인해 더 보강하고 그것으로 다시 썼다.
§7.2 참조 검사 SQL 을 문자열로 조립하는 실제 코드 — 컴파일러가 표 이름도
컬럼 이름도 보지 않는다는 것이 그 모양에서 드러난다
§11.2 section-heading-rank 가 미디어 쿼리 값을 먼저 걷어내는 이유(테스트 주석)
§16.1 질문 삭제는 참조가 둘뿐이라 같은 문제가 덜하다는 대조
Case 열 편과 Question 셋을 다시 썼다. Question 은 사실·가정·미지수·제약을 갈라
채우고 선택지마다 무엇을 감수하는지 적었다 — 오류 코드를 나누면 계약과 반입한 두
저장소가 함께 움직인다는 것처럼.
SSOT 62,643 → 68,319 자. 검사 넷 전부 통과한다.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
94 lines
4.5 KiB
Markdown
94 lines
4.5 KiB
Markdown
---
|
|
kind: CASE
|
|
slug: the-rule-was-not-missing-it-was-half-there
|
|
title: 규칙이 없었던 게 아니라 절반만 있었다
|
|
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.2
|
|
---
|
|
|
|
# 규칙이 없었던 게 아니라 절반만 있었다
|
|
|
|
한 구역 제목만 26px 에 굵기 400 으로 나왔다. 형제 구역은 30px 에 650 이라 같은 화면에서 이 구역만 급이 낮았다. 규칙이 없었던 것이 아니라 절반만 있었다 — 크기만 각자 적혀 있고 굵기를 아무도 정하지 않아 기본값으로 떨어졌다.
|
|
|
|
## 관계
|
|
|
|
- **프록시 지표가 아니라 보이는 것을 측정한다**
|
|
이 사건에서 굳힌 기준이다.
|
|
- **구역 전체에 건 격자가 제목까지 잡아 h2 높이가 199px 이 됐다**
|
|
같은 화면에서 난 다른 부류의 CSS 결함이다.
|
|
- **배치를 거는 규칙은 그 배치를 쓰는 요소까지 좁혀 적는다**
|
|
선택자 범위를 다루는 짝이 되는 기준이다.
|
|
|
|
## 문제
|
|
|
|
「구조별로 알게 된 것」 구역의 제목만 다른 구역보다 작고 가늘게 보였다.
|
|
|
|
같은 화면에 나란히 서 있는 구역들이라 이 하나만 급이 낮아 보였다.
|
|
|
|
## 결론
|
|
|
|
정본 규칙은 특정 래퍼 안의 h2 를 잡는다. 그 안에 들어가지 않는 두 구역이 크기만 각자 적어 두었고, 굵기를 아무도 정하지 않아 기본값 400 으로 떨어졌다.
|
|
|
|
정본 : 30px · 650
|
|
문제의 두 구역 : 26px · 400 (크기만 각자 선언, 굵기 미지정)
|
|
|
|
나란히 서는 구역 제목들이 정본과 같은 크기와 굵기를 쓰는지 CSS 를 파싱해 확인하는 검사를 뒀다. 굵기를 빼 보고 실제로 멈추는 것을 확인했다.
|
|
|
|
## 검증 환경
|
|
|
|
tech-log-frontend : 68538f2
|
|
확인 방식 : 전체 페이지 스크린샷과 getComputedStyle 로 실제 렌더된 값 측정
|
|
|
|
## 재현 조건
|
|
|
|
1. 정본 규칙의 래퍼 밖에 구역 제목을 하나 만든다
|
|
2. 크기만 선언하고 굵기는 선언하지 않는다
|
|
3. 배포본에서 그 제목의 실제 크기와 굵기를 잰다
|
|
|
|
## 본문
|
|
|
|
<!-- body:start -->
|
|
|
|
## 절반만 있었다
|
|
|
|
> 규칙이 없었던 게 아니라 **절반만 있었다.** 정본은 `.section-heading-row h2` 인데 그 안에 들어가지 않는 두 구역이 **크기만 각자 적어 두어 굵기를 아무도 정하지 않았고**, 그래서 기본값 400 으로 떨어졌다.
|
|
|
|
크기를 각자 적어 두었기 때문에 「규칙이 없다」로 보이지 않는다. 선언이 있고 그 선언이 절반만 덮는다.
|
|
|
|
| | 정본 | 문제의 두 구역 |
|
|
|---|---|---|
|
|
| 크기 | 30px | 26px (각자 선언) |
|
|
| 굵기 | 650 | 400 (아무도 선언하지 않음) |
|
|
|
|
같은 화면에 나란히 서 있는 구역들이라 이 둘만 급이 낮아 보였다. 「구조별로 알게 된 것」이 형제 구역보다 작고 가늘게 나왔고, 보고는 「디자인이 안 됐다」로 왔다.
|
|
|
|
## 처음에 잘못 판단한 것
|
|
|
|
> **이때 제가 저지른 판단 오류:** 처음에 grid/columns 만 측정하고 "정상"이라고 답했습니다. 사용자가 다시 지적한 뒤 **전체 페이지 스크린샷**을 찍어서야 26px/400 을 봤습니다. **프록시 지표가 아니라 보이는 것을 측정해야 합니다.**
|
|
|
|
격자와 열은 정상이었다. 보고된 증상은 글자 크기와 굵기였는데 다른 축을 재고 답했다.
|
|
|
|
## 검사가 무엇을 보고 무엇을 빼나
|
|
|
|
`section-heading-rank.test.ts` 가 globals.css 를 읽어 나란히 서는 구역 제목들이 정본과 같은 `font-size` 와 `font-weight` 를 쓰는지 확인한다.
|
|
|
|
이 검사는 미디어 쿼리 안의 값을 먼저 걷어낸다. 그 이유가 테스트 안에 적혀 있다.
|
|
|
|
> 좁은 화면용 값은 뺀다. 화면 폭마다 급이 달라지는 것은 의도이고, 여기서 보려는 것은 같은 폭에서 나란히 설 때의 급이다.
|
|
|
|
걷어내지 않으면 좁은 화면에서 일부러 급을 낮춘 선언이 전부 위반으로 나온다. 그러면 결과가 늘 빨갛고 곧 읽히지 않는다.
|
|
|
|
굵기를 빼 보고 실제로 멈추는 것을 확인한 뒤 커밋했다. 확인하지 않았다면 그 구역들이 원래 정본을 쓰고 있어서 통과한 것인지 검사가 그 구역을 안 보는 것인지 구별되지 않는다.
|
|
|
|
## 확인하지 못한 것
|
|
|
|
이 검사가 보는 것은 CSS 선언이다. 실제로 그려진 크기는 아니다 — 다른 규칙이 덮으면 선언이 같아도 결과가 갈릴 수 있다.
|
|
|
|
<!-- body:end -->
|