Content Reflow
콘텐츠 리플로우
콘텐츠 재배치는 내용을 잃거나 기능이 손상되지 않고 페이지를 좁은 공간에 맞춥니다. 대부분의 읽기는 양방향 스크롤을 필요로 하지 않아야 합니다.
320 CSS px / 400% zoom -> wrap + stack + no lost content or page-wide x-scroll3 열들좁게1 열min-inline-size: 0overflow-x:auto320 CSS px / 400% zoom -> wrap + stack + no lost content or page-wide x-scrollA11Y다른 예시
400% 확대 시, 카드가 하나의 열로 쌓이고 텍스트가 줄 바꿈됩니다. 넓은 테이블은 자신의 영역 안에서만 스크롤됩니다.
주요 부분
- 01좁은 뷰포트
- 02줄 바꿈된 텍스트
- 03겹쳐진 영역
- 04성장하는 컨트롤
- 05로컬 오버플로 예외
- 06손실된 기능 없음
사용할 때
320 CSS 픽셀에 해당하는 너비에서 테스트하세요. 텍스트가 줄바꿈되게 하고, 컨트롤은 확장되며, 페이지 섹션은 쌓이도록 합니다.
다음 경우에는 사용하지 마세요
중요한 내용을 높은 줌에서도 숨기거나 잘라내지 마세요. 페이지 전체에서 가로 스크롤을 피하세요.
코드에서 사용된 이름
320 CSS px / 400% zoom -> wrap + stack + no lost content or page-wide x-scroll 출시하기 전에
Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states.
Outcome：Complete the task with 콘텐츠 리플로우 (Content Reflow)。 User context：400% 확대 시, 카드가 하나의 열로 쌓이고 텍스트가 줄 바꿈됩니다. 넓은 테이블은 자신의 영역 안에서만 스크롤됩니다. Recommended pattern：콘텐츠 리플로우 (Content Reflow)。 Why it fits：320 CSS 픽셀에 해당하는 너비에서 테스트하세요. 텍스트가 줄바꿈되게 하고, 컨트롤은 확장되며, 페이지 섹션은 쌓이도록 합니다. Do not use it when：중요한 내용을 높은 줌에서도 숨기거나 잘라내지 마세요. 페이지 전체에서 가로 스크롤을 피하세요. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary)：이 표준은 나열된 범위만 적용합니다. 시각적 스타일, 제품 결정, 또는 Vibulary 예시는 선택하지 않습니다. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
이 요청을 확인하세요
Review how 콘텐츠 리플로우 (Content Reflow) is used now. Definition: 콘텐츠 재배치는 내용을 잃거나 기능이 손상되지 않고 페이지를 좁은 공간에 맞춥니다. 대부분의 읽기는 양방향 스크롤을 필요로 하지 않아야 합니다. Release checks: Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.