diff --git a/M02_MasterTemplete/M02_MasterTemplete_Hopyo.css b/M02_MasterTemplete/M02_MasterTemplete_Hopyo.css index 2e14e8f32..7ab0ce9b4 100644 --- a/M02_MasterTemplete/M02_MasterTemplete_Hopyo.css +++ b/M02_MasterTemplete/M02_MasterTemplete_Hopyo.css @@ -252,6 +252,14 @@ min-height: 0; } +/* 좁은 폭(730-2) — 오른쪽 목록 22rem 이 시트 칸을 폭 0 으로 짓누름 → 위(시트) · 아래(목록) 쌓기 */ +@media (max-width: 900px) { + .m02-hopyo-sheet { + grid-template-columns: minmax(0, 1fr); + grid-template-rows: minmax(0, 3fr) minmax(0, 2fr); + } +} + .m02-hopyo-sheet__grid { display: flex; flex-direction: column; diff --git a/resources/tester/test_730_2_hopyo_sheet_narrow.py b/resources/tester/test_730_2_hopyo_sheet_narrow.py new file mode 100644 index 000000000..7cbe8b6bc --- /dev/null +++ b/resources/tester/test_730_2_hopyo_sheet_narrow.py @@ -0,0 +1,15 @@ +"""730-2 지킴 — 엑셀 보기 창은 좁은 폭에서 시트(위) · 목록(아래)로 쌓임(오른쪽 22rem 이 시트를 폭 0 으로 짓누르지 않음).""" + +import re +from pathlib import Path + +CSS = (Path(__file__).parents[2] / "M02_MasterTemplete/M02_MasterTemplete_Hopyo.css").read_text( + encoding="utf-8" +) + + +def test_sheet_stacks_on_narrow_width(): + m = re.search(r"@media \(max-width: (\d+)px\) \{\s*\.m02-hopyo-sheet \{(.*?)\}", CSS, re.S) + assert m and int(m.group(1)) >= 700 + assert "grid-template-columns: minmax(0, 1fr)" in m.group(2) + assert "grid-template-rows" in m.group(2)