5.2 KiB
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 |
|
구역 전체에 건 격자가 제목까지 잡아 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 측정
재현 조건
- 구역 클래스 아래에 태그 선택자로 격자를 건다
- 그 구역 안 제목에 링크를 넣는다
- 제목의 높이를 잰다
본문
행을 위한 규칙이 제목을 잡았다
.home-comparison a {
display: grid;
grid-template-columns: 200px minmax(0, 1fr);
padding: 27px 2px 28px;
}
선택자가 구역 클래스 아래의 a 이므로 그 구역 안의 모든 링크가 걸린다. 제목 안에 링크가 있으면 그 링크도 격자가 되고 첫 칸의 200px 에 갇힌다.
제목은 한 줄로 들어갈 길이였는데 200px 안에서 두 줄로 접혔고, 행을 위한 위아래 padding 까지 물려 h2 높이가 199px 이 됐다. 같은 이유로 주제 화면의 안내 문단도 행의 크기와 색으로 덮여 있었다.
사용자가 원인을 정확히 짚어 주었다 — 「디자인이 안 된 게 아니라 CSS 선택자가 새고 있습니다」.
아홉 구역에 같은 모양이 있었다
같은 형태가 다른 구역 아홉 곳에도 있었다. 선택자 51개를 li > a 처럼 그 배치를 쓰는 요소까지 좁혔다.
li > a 는 목록 항목의 바로 아래 링크만 잡는다. 제목 안의 링크는 목록 항목의 자식이 아니므로 걸리지 않는다.
CSS 만으로 막지 않았다
선택자를 좁히는 것은 같은 구조가 다시 생기면 다시 샌다. 제목 안에 링크를 두지 않도록 구조를 바꿨고, 주제로 가는 길은 아래 한 줄이 맡는다.
전역 규칙이 닿지 않는 화면
버튼에서 상자를 걷어내는 변경이 앱 전역 규칙만 고쳤다. 게시 기록·게시 흐름·워크플로 게이트는 CSS module 을 쓰므로 그 규칙이 닿지 않는다 — module 은 클래스 이름을 빌드 때 바꿔 전역 선택자와 겹치지 않게 만드는 방식이라, 전역에서 그 클래스를 가리킬 방법이 없다.
다른 화면에서 상자를 걷어낸 뒤에도 「Snapshot 보기」·「게시 취소」·「적용」 세 버튼만 테두리와 파란 채움으로 남았다. 한 화면 안에서 두 언어가 섞여 더 눈에 띄었다.
검사
section-selector-scope.test.ts 가 .클래스 태그 모양에 배치 속성(display: grid|flex, grid-template-columns, padding)이 걸려 있으면 멈춘다. 이미 좁혀 둔 곳은 SETTLED 로 명시한다.
색이나 글꼴만 거는 규칙은 대상이 아니다. 새어도 티가 나지 않으므로 검사에 넣으면 결과가 늘 빨갛고, 그러면 곧 읽히지 않는다.
확인하지 못한 것
CSS module 을 쓰는 화면은 전역 규칙이 닿지 않아 따로 고쳤다. 「지금 집중하는 것」 탭과 주제 탭의 표시 방식이 아직 다르다 — 한쪽은 파란 밑줄이고 한쪽은 알약이다. 주제 탭 밑줄을 그쪽에서 베껴 왔다가 뺐기 때문이다.