From 519c25b848361490f6da1a1a39e50a10f03d2431 Mon Sep 17 00:00:00 2001 From: seonghobae <8172694+seonghobae@users.noreply.github.com> Date: Fri, 7 Aug 2026 21:05:00 +0000 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=EA=B8=B4=20=EB=94=94?= =?UTF-8?q?=EB=A0=89=ED=86=A0=EB=A6=AC=20=EC=9D=B4=EB=A6=84=EC=9D=98=20?= =?UTF-8?q?=EB=AA=A8=EB=B0=94=EC=9D=BC=20=EB=A0=88=EC=9D=B4=EC=95=84?= =?UTF-8?q?=EC=9B=83=20=EA=B9=A8=EC=A7=90=20=EB=B0=A9=EC=A7=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 생성된 디렉토리 목록 HTML 파일의 `

` 태그에 `overflow-wrap: anywhere;` CSS 속성을 추가하여 띄어쓰기가 없는 매우 긴 디렉토리 이름이 렌더링될 때 모바일 환경 등에서 화면 가로 스크롤이 발생하거나 전체 레이아웃이 깨지는 문제를 방지함. --- .jules/palette.md | 4 ++++ src/main/kotlin/html4tree/main.kt | 3 +++ 2 files changed, 7 insertions(+) diff --git a/.jules/palette.md b/.jules/palette.md index 7b223901..caf36f0e 100644 --- a/.jules/palette.md +++ b/.jules/palette.md @@ -52,3 +52,7 @@ ## 2024-07-13 - 빈 디렉토리 상태의 접근성(Accessibility) 개선 **Learning:** 정적 파일 서버의 빈 디렉토리 상태는 스크린 리더 사용자에게 컨텐츠 누락으로 오해받을 수 있으며, 시각적으로도 일반 리스트 아이템과 정렬이 맞지 않는 문제가 있었습니다. **Action:** 빈 상태를 나타내는 요소에 `role="status"`를 추가하여 스크린 리더가 명확하게 인지할 수 있도록 하고, 아이콘과 flex 레이아웃을 통해 다른 리스트 아이템과 일관된 시각적 흐름을 제공하도록 합니다. + +## 2026-08-07 - 긴 디렉토리 이름의 모바일 레이아웃 깨짐 방지 +**Learning:** `h1`과 같은 제목 요소에 공백이 없는 매우 긴 문자열(예: 긴 디렉토리 이름)이 포함될 경우, 기본 줄바꿈 동작으로 인해 텍스트가 컨테이너를 벗어나 모바일 화면에서 레이아웃이 깨지거나 가로 스크롤이 발생할 수 있습니다. +**Action:** 긴 문자열을 렌더링하는 제목 요소(예: `h1`)에는 항상 `overflow-wrap: anywhere;` 또는 `word-break: break-all;` CSS 속성을 적용하여 텍스트가 줄바꿈되도록 하고 반응형 레이아웃을 보호하십시오. diff --git a/src/main/kotlin/html4tree/main.kt b/src/main/kotlin/html4tree/main.kt index f52a1468..ba1fbca0 100644 --- a/src/main/kotlin/html4tree/main.kt +++ b/src/main/kotlin/html4tree/main.kt @@ -24,6 +24,9 @@ main { max-width: 800px; margin: 0 auto; } +h1 { + overflow-wrap: anywhere; +} ul { list-style-type: none; padding-left: 0;