이 페이지는 실제 박스가 같은 수치 규칙을 따르는지 확인한다.
프런트엔드에서 보는 것
- 페이지 바깥 여백이 섹션마다 달라지지 않는가
- 본문 폭과 카드 폭이 서로 다른 규칙으로 계산되지 않는가
- 작은 화면에서 간격이 너무 붙거나 너무 벌어지지 않는가
- 긴 제목과 긴 문단이 같은 줄 간격을 유지하는가
.page {
padding-inline: var(--page-padding);
}
.article {
max-width: var(--content-max-width);
gap: var(--content-gap);
}
<section class="stack">
<article class="card">카드 A</article>
<article class="card">카드 B</article>
</section>
체크리스트
| 항목 | 기대값 |
|---|---|
| 페이지 패딩 | 모든 섹션에서 동일한 시작점이 보인다 |
| 카드 내부 간격 | 제목, 본문, 보조 문구가 같은 리듬을 가진다 |
| 목록 간격 | 리스트가 너무 조밀하거나 산만하지 않다 |
| 반응형 전환 | 폭이 좁아져도 줄바꿈이 자연스럽다 |
| 긴 콘텐츠 | 표와 코드 블록이 폭을 밀어내지 않는다 |