From 7ec17353e7b9b21cfadf59ec78f5cc4e210e50f2 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Mon, 10 Aug 2026 21:02:19 +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의 h1 요소에 overflow-wrap: anywhere; 스타일을 추가했습니다.
---
 .jules/palette.md                 | 3 +++
 src/main/kotlin/html4tree/main.kt | 3 +++
 2 files changed, 6 insertions(+)

diff --git a/.jules/palette.md b/.jules/palette.md
index 7b223901..b0d2a0ad 100644
--- a/.jules/palette.md
+++ b/.jules/palette.md
@@ -52,3 +52,6 @@
 ## 2024-07-13 - 빈 디렉토리 상태의 접근성(Accessibility) 개선
 **Learning:** 정적 파일 서버의 빈 디렉토리 상태는 스크린 리더 사용자에게 컨텐츠 누락으로 오해받을 수 있으며, 시각적으로도 일반 리스트 아이템과 정렬이 맞지 않는 문제가 있었습니다.
 **Action:** 빈 상태를 나타내는 요소에 `role="status"`를 추가하여 스크린 리더가 명확하게 인지할 수 있도록 하고, 아이콘과 flex 레이아웃을 통해 다른 리스트 아이템과 일관된 시각적 흐름을 제공하도록 합니다.
+## 2026-08-10 - 긴 텍스트로 인한 모바일 레이아웃 깨짐 방지
+**Learning:** 디렉토리 이름과 같이 띄어쓰기가 없는 긴 문자열은 모바일 뷰포트에서 레이아웃을 손상시키고 가독성을 크게 저하시킬 수 있습니다.
+**Action:** 긴 텍스트가 표시될 가능성이 있는 헤딩(h1 등) 요소에는 항상 overflow-wrap: anywhere; 속성을 적용하여 레이아웃 안정성을 확보해야 합니다.
diff --git a/src/main/kotlin/html4tree/main.kt b/src/main/kotlin/html4tree/main.kt
index 8942c047..cba82da3 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;