docs(TechLog): Reference 15편의 규칙 표기를 게시된 기록에 맞추고 주제 6 을 다시 쓴다

게시된 Reference 15편이 전부 규칙을 `### N. 제목` 으로 쓰고 적용 조건·예외·예시를 항목으로 쓴다. 내 15편은 규칙을 `**굵게**` 로, 나머지 셋을 문단으로 쓰고 있었다 — Studio 의 rules[]·applyWhen[]·exceptions[]·examples[] 는 배열이라 문단으로 두면 항목이 하나로 접힌다. 규칙 68개를 `### N. 제목` 으로 바꿨다 (편당 3~7개, 게시된 것은 4~10개) 적용 조건·예외·예시를 항목으로 갈랐다. 한 항목뿐이던 아홉 편은 조건을 나눠 적었다 주제 6 은 본문을 다시 썼다 — location = 이 정확히 일치하는 경로만 잡아 27개가 얼어붙은 구조, 여덟 곳이 우는 시점을 셋으로 가른 표, digest 를 다시 계산할 때 옛 값을 먼저 재현하는 이유. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-09-07 19:01:44 +09:00
parent 53537e37e8
commit 193da20d09
18 changed files with 327 additions and 198 deletions
@@ -34,34 +34,41 @@ source:

 ## 규칙

-**보고된 증상과 같은 축의 값을 잰다**
+### 1. 보고된 증상과 같은 축의 값을 잰다
+
 「제목이 작아 보인다」는 글자 크기와 굵기다. 격자와 열은 다른 축이다.

-**촬영을 스크립트로 고정한다**
+### 2. 촬영을 스크립트로 고정한다
+
 손으로 찍으면 뷰포트와 축소 배율이 매번 달라진다.

-**폭을 고정해 여러 개를 돌고, 폭마다 측정값도 남긴다**
+### 3. 폭을 고정해 여러 개를 돌고, 폭마다 측정값도 남긴다
+
 스크린샷만 남기면 나중에 그 값이 얼마였는지 다시 잴 수 없다.

-**전체 페이지를 한 장으로 찍지 않는다**
+### 4. 전체 페이지를 한 장으로 찍지 않는다
+
 축소되어 글자 크기가 실제와 달라진다. 화면 높이만큼 잘라 찍는다.

 ## 적용 조건

-화면이 잘못됐다는 보고를 확인하는 일. 배포본의 실제 렌더 결과를 판단 근거로 삼을 때.
+- 화면이 잘못됐다는 보고를 확인할 때
+- 배포본의 실제 렌더 결과를 판단 근거로 삼을 때
+- 고쳤다고 답하기 전에 무엇을 쟀는지 대야 할 때
+- 여러 폭에서 배치가 갈리는 사이트를 검토할 때

 ## 예외

-측정 대상이 좌표나 간격 자체라면 바운딩 박스는 프록시가 아니라 대상이다.
+- 측정 대상이 좌표나 간격 자체라면 바운딩 박스는 프록시가 아니라 대상이다.

-CSS 선언이 정본과 같은지를 보는 검사는 렌더 결과를 재지 않는다. 그 검사가 덮는 범위를 알고 쓰면 된다.
+- CSS 선언이 정본과 같은지를 보는 검사는 렌더 결과를 재지 않는다. 그 검사가 덮는 범위를 알고 쓰면 된다.

 ## 예시

-격자와 열만 재고 「정상」이라 답했다. 사용자가 다시 지적한 뒤 전체 페이지 스크린샷을 찍어서야 26px 과 400 을 봤다.
+- 격자와 열만 재고 「정상」이라 답했다. 사용자가 다시 지적한 뒤 전체 페이지 스크린샷을 찍어서야 26px 과 400 을 봤다.

-목록 간격을 바운딩 박스로만 재서 「판단 기준」을 결함으로 잘못 지목한 적이 있다.
+- 목록 간격을 바운딩 박스로만 재서 「판단 기준」을 결함으로 잘못 지목한 적이 있다.

-브라우저 세션이 리셋되면 창이 약 877px 로 돌아가는데 이 사이트의 분기는 1179·1050·900·767 이라, 877px 에서 본 배치는 방문자 대부분이 보는 배치가 아니다.
+- 브라우저 세션이 리셋되면 창이 약 877px 로 돌아가는데 이 사이트의 분기는 1179·1050·900·767 이라, 877px 에서 본 배치는 방문자 대부분이 보는 배치가 아니다.

-전체 페이지를 한 장으로 찍으면 1425x4466 이 638x2000 으로 들어와 17px 글자가 7~8px 이 된다.
+- 전체 페이지를 한 장으로 찍으면 1425x4466 이 638x2000 으로 들어와 17px 글자가 7~8px 이 된다.
@@ -31,32 +31,39 @@ source:

 ## 규칙

-**배치 속성은 그 배치를 쓰는 요소까지 좁혀 적는다**
+### 1. 배치 속성은 그 배치를 쓰는 요소까지 좁혀 적는다
+
 `display: grid|flex`, `grid-template-columns`, `padding` 을 구역 클래스 아래 태그 선택자로 걸지 않는다.

-**CSS 만으로 막지 않고 구조도 본다**
+### 2. CSS 만으로 막지 않고 구조도 본다
+
 선택자를 좁히면 같은 구조가 다시 생겼을 때 다시 샌다. 제목 안에 링크를 두지 않는 편이 낫다.

-**이미 좁혀 둔 곳은 검사에서 명시적으로 뺀다**
+### 3. 이미 좁혀 둔 곳은 검사에서 명시적으로 뺀다
+
 예외를 적어 두지 않으면 검사 결과가 늘 빨갛고 곧 읽히지 않는다.

-**전역 규칙과 CSS module 이 섞인 화면을 따로 센다**
+### 4. 전역 규칙과 CSS module 이 섞인 화면을 따로 센다
+
 전역 규칙을 고쳐도 module 을 쓰는 화면에는 닿지 않는다. 한 화면 안에서 두 언어가 섞이면 더 눈에 띈다.

 ## 적용 조건

-구역 클래스 아래에 태그 선택자로 배치를 거는 CSS. 같은 구역 안에 제목과 목록이 같이 있으면 특히 걸린다.
+- 구역 클래스 아래에 태그 선택자로 배치를 거는 CSS 를 쓸 때
+- 같은 구역 안에 제목과 목록이 함께 있을 때
+- 전역 규칙과 CSS module 이 한 화면에 섞여 있을 때
+- 「디자인이 안 된 것처럼 보인다」는 보고를 받았을 때

 ## 예외

-색이나 글꼴만 거는 규칙은 새어도 티가 나지 않으므로 대상이 아니다.
+- 색이나 글꼴만 거는 규칙은 새어도 티가 나지 않으므로 대상이 아니다.

-구역 안의 모든 같은 태그가 실제로 같은 배치를 써야 하는 화면이라면 좁히지 않아도 된다. 그때는 그 의도를 검사의 예외 목록에 적는다.
+- 구역 안의 모든 같은 태그가 실제로 같은 배치를 써야 하는 화면이라면 좁히지 않아도 된다. 그때는 그 의도를 검사의 예외 목록에 적는다.

 ## 예시

-비교 행을 위한 격자가 제목 안의 링크까지 잡아 제목이 200px 칸에 갇혔다.
+- 비교 행을 위한 격자가 제목 안의 링크까지 잡아 제목이 200px 칸에 갇혔다.

-같은 모양이 다른 구역 아홉 곳에도 있어 선택자 51개를 고쳤다.
+- 같은 모양이 다른 구역 아홉 곳에도 있어 선택자 51개를 고쳤다.

 `section-selector-scope.test.ts` 가 `.클래스 태그` 모양에 배치 속성이 걸려 있으면 멈춘다.