v8:문서유형 분석등록 및 추출_20260206
This commit is contained in:
302
templates/hwp_guide.md
Normal file
302
templates/hwp_guide.md
Normal file
@@ -0,0 +1,302 @@
|
||||
# A4 HTML 문서 레이아웃 가이드
|
||||
> 이 가이드는 글벗 doc_template_analyzer가 HWPX에서 추출한 구조를
|
||||
> A4 규격 HTML template.html로 변환할 때 참조하는 레이아웃 규격입니다.
|
||||
>
|
||||
> ★ 이 파일의 값은 코드에 하드코딩하지 않습니다.
|
||||
> ★ doc_template_analyzer._build_css(), _build_full_html() 등에서 이 파일을 읽어 적용합니다.
|
||||
> ★ 색상, 폰트 등 스타일은 HWPX에서 추출한 값을 우선 사용하고, 없으면 이 가이드의 기본값을 사용합니다.
|
||||
|
||||
---
|
||||
|
||||
## 1. 페이지 규격 (Page Dimensions)
|
||||
|
||||
```yaml
|
||||
page:
|
||||
width: 210mm # A4 가로
|
||||
height: 297mm # A4 세로
|
||||
background: white
|
||||
boxSizing: border-box
|
||||
|
||||
margins:
|
||||
top: 20mm # 상단 여백 (머릿말 + 본문 시작)
|
||||
bottom: 20mm # 하단 여백 (꼬릿말 + 본문 끝)
|
||||
left: 20mm # 좌측 여백
|
||||
right: 20mm # 우측 여백
|
||||
|
||||
# 본문 가용 높이 = 297mm - 20mm(상) - 20mm(하) = 257mm ≈ 970px
|
||||
bodyMaxHeight: 970px
|
||||
```
|
||||
|
||||
## 2. HTML 골격 구조 (Page Structure)
|
||||
|
||||
각 페이지는 `.sheet` 클래스로 감싸며, 내부에 header/body/footer를 absolute로 배치합니다.
|
||||
|
||||
```html
|
||||
<!-- 페이지 단위 -->
|
||||
<div class="sheet">
|
||||
<!-- 머릿말: 상단 여백(20mm) 안, 위에서 10mm 지점 -->
|
||||
<div class="page-header">
|
||||
<!-- HWPX 머릿말 테이블 내용 -->
|
||||
</div>
|
||||
|
||||
<!-- 본문: 상하좌우 20mm 안쪽 -->
|
||||
<div class="body-content">
|
||||
<!-- 섹션 제목, 표, 개조식 등 -->
|
||||
</div>
|
||||
|
||||
<!-- 꼬릿말: 하단 여백(20mm) 안, 아래에서 10mm 지점 -->
|
||||
<div class="page-footer">
|
||||
<!-- HWPX 꼬릿말 테이블 내용 -->
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## 3. 핵심 CSS 레이아웃 (Layout CSS)
|
||||
|
||||
### 3.1 용지 (.sheet)
|
||||
```css
|
||||
.sheet {
|
||||
width: 210mm;
|
||||
height: 297mm;
|
||||
background: white;
|
||||
margin: 20px auto; /* 화면 미리보기용 */
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 0 15px rgba(0,0,0,0.1);
|
||||
}
|
||||
```
|
||||
|
||||
### 3.2 인쇄 대응
|
||||
```css
|
||||
@media print {
|
||||
.sheet { margin: 0; break-after: page; box-shadow: none; }
|
||||
body { background: white; }
|
||||
}
|
||||
```
|
||||
|
||||
### 3.3 머릿말 (.page-header)
|
||||
```css
|
||||
.page-header {
|
||||
position: absolute;
|
||||
top: 10mm; /* 상단 여백(20mm)의 중간 */
|
||||
left: 20mm;
|
||||
right: 20mm;
|
||||
font-size: 9pt;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
```
|
||||
- 머릿말이 **테이블 형태**인 경우: `<table>` 사용, 테두리 없음
|
||||
- HWPX에서 추출한 열 수와 셀 내용을 placeholder로 배치
|
||||
- 다중행 셀은 `<br>`로 줄바꿈
|
||||
|
||||
### 3.4 꼬릿말 (.page-footer)
|
||||
```css
|
||||
.page-footer {
|
||||
position: absolute;
|
||||
bottom: 10mm; /* 하단 여백(20mm)의 중간 */
|
||||
left: 20mm;
|
||||
right: 20mm;
|
||||
font-size: 9pt;
|
||||
color: #555;
|
||||
border-top: 1px solid #eee;
|
||||
padding-top: 5px;
|
||||
}
|
||||
```
|
||||
- 꼬릿말이 **테이블 형태**인 경우: `<table>` 사용, 테두리 없음
|
||||
- 2열 이상일 때 `display: flex; justify-content: space-between` 패턴도 가능
|
||||
- 페이지 번호는 별도 `<span class="pg-num">` 으로
|
||||
|
||||
### 3.5 본문 영역 (.body-content)
|
||||
```css
|
||||
.body-content {
|
||||
position: absolute;
|
||||
top: 20mm;
|
||||
left: 20mm;
|
||||
right: 20mm;
|
||||
bottom: 20mm; /* 또는 auto + JS 제어 */
|
||||
}
|
||||
```
|
||||
|
||||
## 4. 타이포그래피 기본값 (Typography Defaults)
|
||||
|
||||
> HWPX에서 폰트/크기를 추출했으면 그 값을 사용합니다.
|
||||
> 추출 실패 시 아래 기본값을 적용합니다.
|
||||
|
||||
```yaml
|
||||
typography:
|
||||
fontFamily: "'Noto Sans KR', sans-serif"
|
||||
fontImport: "https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap"
|
||||
|
||||
body:
|
||||
fontSize: 12pt
|
||||
lineHeight: 1.6
|
||||
textAlign: justify
|
||||
wordBreak: keep-all # 한글 단어 중간 끊김 방지
|
||||
|
||||
heading:
|
||||
h1: { fontSize: 20pt, fontWeight: 900 }
|
||||
h2: { fontSize: 18pt, fontWeight: 700 }
|
||||
h3: { fontSize: 14pt, fontWeight: 700 }
|
||||
|
||||
headerFooter:
|
||||
fontSize: 9pt
|
||||
|
||||
table:
|
||||
fontSize: 9.5pt
|
||||
thFontSize: 9pt
|
||||
```
|
||||
|
||||
## 5. 표 스타일 기본값 (Table Defaults)
|
||||
|
||||
```yaml
|
||||
table:
|
||||
width: "100%"
|
||||
borderCollapse: collapse
|
||||
tableLayout: fixed # colgroup 비율 적용 시 fixed 필수
|
||||
borderTop: "2px solid" # 상단 굵은 선 (색상은 HWPX 추출)
|
||||
|
||||
th:
|
||||
fontWeight: 900
|
||||
textAlign: center
|
||||
verticalAlign: middle
|
||||
whiteSpace: nowrap # 헤더 셀은 한 줄 유지
|
||||
wordBreak: keep-all
|
||||
padding: "6px 5px"
|
||||
|
||||
td:
|
||||
textAlign: center
|
||||
verticalAlign: middle
|
||||
wordBreak: keep-all
|
||||
wordWrap: break-word
|
||||
padding: "6px 5px"
|
||||
border: "1px solid #ddd"
|
||||
```
|
||||
|
||||
## 6. 머릿말/꼬릿말 테이블 (Header/Footer Table)
|
||||
|
||||
머릿말/꼬릿말이 HWPX에서 테이블로 구성된 경우:
|
||||
|
||||
```yaml
|
||||
headerFooterTable:
|
||||
border: none # 테두리 없음
|
||||
width: "100%"
|
||||
fontSize: 9pt
|
||||
|
||||
# 열 역할 패턴 (HWPX에서 추출)
|
||||
# 보통 3열: [소속정보 | 빈칸/로고 | 작성자/날짜]
|
||||
# 또는 2열: [제목 | 페이지번호]
|
||||
|
||||
cellStyle:
|
||||
padding: "2px 5px"
|
||||
verticalAlign: middle
|
||||
border: none
|
||||
```
|
||||
|
||||
## 7. 개조식 (Bullet Style)
|
||||
|
||||
```yaml
|
||||
bulletList:
|
||||
marker: "·" # 한국 문서 기본 불릿
|
||||
className: "bullet-list"
|
||||
|
||||
css: |
|
||||
.bullet-list {
|
||||
list-style: none;
|
||||
padding-left: 15px;
|
||||
margin: 5px 0;
|
||||
}
|
||||
.bullet-list li::before {
|
||||
content: "· ";
|
||||
font-weight: bold;
|
||||
}
|
||||
.bullet-list li {
|
||||
margin-bottom: 3px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
```
|
||||
|
||||
## 8. 색상 (Color Scheme)
|
||||
|
||||
> HWPX에서 추출한 색상을 CSS 변수로 주입합니다.
|
||||
> 추출 실패 시 아래 기본값을 사용합니다.
|
||||
|
||||
```yaml
|
||||
colors:
|
||||
# Navy 계열 (기본)
|
||||
primary: "#1a365d"
|
||||
accent: "#2c5282"
|
||||
lightBg: "#EBF4FF"
|
||||
|
||||
# 문서별 오버라이드 (HWPX 추출값)
|
||||
# doc_template_analyzer가 HWPX의 글자색/배경색을 분석하여
|
||||
# 이 값을 덮어씁니다.
|
||||
|
||||
css: |
|
||||
:root {
|
||||
--primary: #1a365d;
|
||||
--accent: #2c5282;
|
||||
--light-bg: #EBF4FF;
|
||||
--bg: #f5f5f5;
|
||||
}
|
||||
```
|
||||
|
||||
## 9. 페이지 분할 규칙 (Page Break Rules)
|
||||
|
||||
```yaml
|
||||
pageBreak:
|
||||
# H1(대제목)에서만 강제 페이지 분할
|
||||
h1Break: true
|
||||
|
||||
# H2/H3이 페이지 하단에 홀로 남지 않도록
|
||||
orphanControl: true
|
||||
orphanMinSpace: 90px # 이 공간 미만이면 다음 페이지로
|
||||
|
||||
# 표/그림은 분할하지 않음
|
||||
atomicBlocks:
|
||||
- table
|
||||
- figure
|
||||
- ".highlight-box"
|
||||
|
||||
# break-inside: avoid 적용 대상
|
||||
avoidBreakInside:
|
||||
- table
|
||||
- figure
|
||||
- ".atomic-block"
|
||||
```
|
||||
|
||||
## 10. 배경 (Preview Background)
|
||||
|
||||
```yaml
|
||||
preview:
|
||||
bodyBackground: "#525659" # 회색 배경 위에 흰색 용지
|
||||
# 인쇄 시 배경 제거 (@media print)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## ★ 사용 방법 (How doc_template_analyzer uses this guide)
|
||||
|
||||
1. `doc_template_analyzer._build_full_html()` 호출 시:
|
||||
- 이 가이드 파일을 읽음
|
||||
- HWPX에서 추출한 스타일(색상, 폰트, 크기)이 있으면 오버라이드
|
||||
- 없으면 가이드 기본값 사용
|
||||
|
||||
2. CSS 생성 순서:
|
||||
```
|
||||
가이드 기본값 → HWPX 추출 스타일 오버라이드 → CSS 변수로 통합
|
||||
```
|
||||
|
||||
3. HTML 구조:
|
||||
```
|
||||
가이드의 골격(.sheet > .page-header + .body-content + .page-footer)
|
||||
+ HWPX에서 추출한 placeholder 배치
|
||||
= template.html
|
||||
```
|
||||
|
||||
4. 색상 결정:
|
||||
```
|
||||
HWPX headerTextColor → --primary
|
||||
HWPX headerBgColor → --light-bg
|
||||
없으면 → 가이드 기본값(Navy 계열)
|
||||
```
|
||||
Reference in New Issue
Block a user