A4-html/template.html at main · StatPan/A4-html · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>랜덤 문서 예제</title>
  <link rel="stylesheet" href="style.css"> <!-- style.css 파일 연결 -->
</head>
<body>
  <!-- 페이지 1: 내용이 있는 페이지 -->
  <div class="page portrait">
    <h1>랜덤 문서 제목</h1>
    <h2>1. 소개 섹션</h2>
    <p>이 문서는 페이지가 잘 나뉘는지 테스트하기 위한 예제입니다. 다양한 내용을 추가해서 확인해보겠습니다.</p>
    <ul>
      <li>항목 1: 이건 그냥 예시입니다.</li>
      <li>항목 2: 내용이 길어지면 페이지가 나뉘는지 확인합니다.</li>
      <li>항목 3: 더 많은 텍스트를 추가할게요.</li>
    </ul>
    <p>여기엔 좀 더 긴 문단을 넣어볼게요. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <table>
      <tr>
        <th>번호</th>
        <th>내용</th>
      </tr>
      <tr>
        <td>1</td>
        <td>테스트 데이터입니다.</td>
      </tr>
      <tr>
        <td>2</td>
        <td>랜덤한 내용을 채워봅니다.</td>
      </tr>
    </table>
  </div>

  <!-- 페이지 2: 내용이 있는 페이지 -->
  <div class="page landscape">
    <h2>2. 랜덤 섹션</h2>
    <p>두 번째 페이지입니다. 이 페이지에도 내용을 채워서 페이지가 잘 나뉘는지 확인합니다.</p>
    <p>다음은 임의의 텍스트입니다: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <img src="https://via.placeholder.com/200" alt="샘플 이미지">
    <p>이미지를 추가해서 페이지가 어떻게 나뉘는지 봅시다.</p>
  </div>

  <!-- 페이지 3: 내용이 없는 페이지 -->
  <div class="page portrait">
    <!-- 빈 페이지로, 인쇄 시 빈 페이지가 출력됨 -->
  </div>

  <!-- 페이지 4: 내용이 있는 페이지 -->
  <div class="page portrait">
    <h2>3. 결론 섹션</h2>
    <p>마지막 페이지입니다. 여기엔 결론을 작성할 수 있습니다.</p>
    <p>랜덤한 내용: 이 템플릿은 A4 크기에 맞춰져 있으며, 내용이 없어도 빈 페이지가 인쇄됩니다.</p>
    <ul>
      <li>결론 항목 1</li>
      <li>결론 항목 2</li>
    </ul>
  </div>

  <!-- 페이지 5: 내용이 있는 페이지 -->
  <div class="page portrait">
    <h2>4. 결론 섹션</h2>
    <p>마지막 페이지입니다. 여기엔 결론을 작성할 수 있습니다.</p>
    <p>랜덤한 내용: 이 템플릿은 A4 크기에 맞춰져 있으며, 내용이 없어도 빈 페이지가 인쇄됩니다.</p>
    <ul>
      <li>결론 항목 1</li>
      <li>결론 항목 2</li>
    </ul>
  </div>
</body>
</html>