본문 바로가기
프로그램 개발(분석, 설계, 코딩, 배포)/100. 기타

AI 웹페이지 A4 화면처럼 출력

by 3604 2025. 4. 28.
728x90

1. Gemini 사용

2. 명령어

1. 워드 파일을 HTML 코드로 변환해주고, 2. HTML은 A4 용지처럼 사용자가 보일 수 있도록 해주고, 3. CSS파일은 HTML 파일에 포함해

3. 결과

<!DOCTYPE html>
<html>
<head>
<title>TEST Document - A4 Layout</title>
<style>
  body {
    background-color: #eee; /* Light gray background to see the page contrast */
    margin: 0;
    padding: 0;
    display: flex; /* Use flexbox to center the page */
    justify-content: center; /* Center horizontally */
    align-items: flex-start; /* Align page to the top */
    min-height: 100vh; /* Ensure body takes at least viewport height */
    font-family: sans-serif;
  }

  .page {
    /* A4 dimensions: 210mm x 297mm. Using pixels for screen representation. */
    /* Common conversion: 1mm ≈ 3.78px. So, 210mm ≈ 794px, 297mm ≈ 1123px */
    width: 794px;
    min-height: 1123px; /* Use min-height to allow content to expand if needed */
    padding: 2.54cm; /* 1 inch margin (1 inch = 2.54cm) */
    margin-top: 20px; /* Add some margin at the top */
    margin-bottom: 20px; /* Add margin at the bottom */
    background-color: white; /* White paper background */
    box-shadow: 0 0 10px rgba(0,0,0,0.1); /* Add a slight shadow for effect */
    box-sizing: border-box; /* Include padding in width/height calculations */
  }

  p {
    margin-bottom: 1em;
    line-height: 1.5; /* Improve readability */
  }

  /* Styles for printing - ensures it uses A4 size when printed */
  @media print {
    body {
      background-color: white; /* White background for printing */
      display: block; /* Reset display for printing */
      min-height: 0;
    }
    .page {
      width: 21cm;
      min-height: 29.7cm; /* Use cm for actual print dimensions */
      margin: 0; /* Remove screen margins */
      padding: 2cm; /* Standard print margin */
      box-shadow: none; /* Remove shadow for printing */
      page-break-inside: avoid; /* Try to avoid breaking the page div */
    }
    /* Ensure A4 size is respected */
    @page {
      size: A4;
      margin: 2cm; /* Define page margins directly */
    }
  }
</style>
</head>
<body>

<div class="page">
  <p>TEST----------------------------------------------------------------------------------------------</p>
  <p>TEST------------------------------------------------------------------------------------------끝</p>
</div>

</body>
</html>

728x90