document-haness/docs/TechLog/tech-log-studio/css-rules-that-leak/case/case-a-section-wide-rule-caught-the-heading.md

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

kind	slug	title	topic	topicName	project	status	lastVerifiedOn	sourceRevision	source
CASE	a-section-wide-rule-caught-the-heading	구역 전체에 건 격자가 제목까지 잡아 h2 높이가 199px 이 됐다	css-rules-that-leak	CSS 규칙이 구역을 넘어 샌다	TechLog	게시 전	2026-09-04	tech-log@2026-09-02	final/document.md#§11.1 final/document.md#§11.3 final/document.md#§16.3

구역 전체에 건 격자가 제목까지 잡아 h2 높이가 199px 이 됐다

「디자인이 안 된 것처럼 보인다」고 보고된 화면에서 h2 높이가 199px 이었다. 비교 행을 위한 격자 규칙의 선택자가 구역 전체라 제목 안의 링크까지 잡았다. 같은 모양이 다른 구역 아홉 곳에도 있어 선택자 51개를 고쳤다.

관계

• 배치를 거는 규칙은 그 배치를 쓰는 요소까지 좁혀 적는다 이 사건에서 굳힌 기준이다.
• 프록시 지표가 아니라 보이는 것을 측정한다 이 부류를 어떻게 확인하는지가 그 기준에 있다.
• 규칙이 없었던 게 아니라 절반만 있었다 같은 화면에서 난 다른 부류의 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. 제목의 높이를 잰다

본문

행을 위한 규칙이 제목을 잡았다

.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 을 쓰므로 그 규칙이 닿지 않아, 다른 화면에서 상자를 걷어낸 뒤에도 세 버튼만 테두리와 파란 채움으로 남았다. 한 화면 안에서 두 언어가 섞여 더 눈에 띄었다.

검사

section-selector-scope.test.ts 가 .클래스 태그 모양에 배치 속성(display: grid|flex, grid-template-columns, padding)이 걸려 있으면 멈춘다. 이미 좁혀 둔 곳은 SETTLED 로 명시한다. 색이나 글꼴만 거는 규칙은 새어도 티가 나지 않으므로 대상이 아니다.

확인하지 못한 것

CSS module 을 쓰는 화면은 전역 규칙이 닿지 않아 따로 고쳤다. 「지금 집중하는 것」 탭과 주제 탭의 표시 방식이 아직 다르다 — 한쪽은 파란 밑줄이고 한쪽은 알약이다.