From 20c8d32ffdf9fe3eaef60c25c116982073ffe6f4 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Sun, 9 Aug 2026 20:52:42 +0000
Subject: [PATCH] =?UTF-8?q?h1=20=ED=83=9C=EA=B7=B8=EC=9D=98=20=ED=85=8D?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8=EA=B0=80=20=EB=B7=B0=ED=8F=AC=ED=8A=B8?=
 =?UTF-8?q?=EB=A5=BC=20=EB=B2=97=EC=96=B4=EB=82=98=EB=8A=94=20=EB=AC=B8?=
 =?UTF-8?q?=EC=A0=9C=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

긴 디렉토리 이름(공백 없음)이 제목으로 표시될 때 모바일 등 좁은 뷰포트에서
가로 스크롤을 유발하거나 레이아웃을 깨뜨리는 문제를 수정했습니다.
CSS h1 태그에 word-break와 overflow-wrap 속성을 추가하여 반응형으로
자연스럽게 줄바꿈 되도록 했습니다.
---
 .jules/palette.md                 | 4 ++++
 src/main/kotlin/html4tree/main.kt | 4 ++++
 2 files changed, 8 insertions(+)

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