화면 장치에서 HTML의 모양과 느낌을 갖는 방법-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

화면 장치에서 HTML의 모양과 느낌을 갖는 방법

Susan Sarandon

Sep 21, 2024 am 06:26 AM

How to Have the Look and Feel of An HTML on Screen devices

화면 장치에서 HTML로 A4의 모양과 느낌을 갖는 방법

구식 HTML 페이지를 사용하여 이력서를 작성하기 시작했는데 화면에서 열었을 때 즉시 작동하지 않는다는 것을 금방 깨달았습니다. 페이지 나누기 없이 내용이 끝없이 흘러가는데 확실히 A4 문서처럼 보이지는 않았습니다. 이 문제를 해결하려면 CSS와 JavaScript를 포함한 몇 가지 트릭을 적용해야 했습니다.

내 목표는 다음과 같습니다.

내 이력서가 인쇄된 것과 화면에서 동일하게 보이도록 하기 위해.
PDF나 Google Docs 문서와 동일한 방식으로 화면에 별도의 페이지를 표시합니다.

HTML로 이력서를 작성할 때의 과제

이력서 작성을 시작하면서 스크린 기기의 브라우저는 A4와 같은 페이지 크기를 고려하지 않는다는 사실을 금방 깨달았습니다. 대신 콘텐츠가 연속적으로 흐르기 때문에 페이지 나누기 없이 텍스트와 섹션이 넘칠 수 있습니다. A4 크기를 기반으로 고유한 페이지를 만들기 위해 콘텐츠가 일반적인 A4 페이지 높이를 초과할 때마다 페이지 나누기를 수동으로 처리해야 했습니다.

기본 솔루션은 CSS @media 인쇄 및 페이지 나누기 속성을 사용하여 한 페이지에 너무 긴 콘텐츠의 동작 방식을 제어하고 JavaScript를 적용하여 화면의 동적 콘텐츠를 처리하는 것이었습니다.

1. CSS를 사용한 자동 페이지 나누기(인쇄용)

인쇄 시 내용이 올바르게 흐르도록 하기 위해 페이지 나누기 내부: 방지 속성을 사용했습니다. 이 속성은 제목이나 큰 단락과 같은 중요한 요소가 두 페이지 간에 분할되는 것을 방지하여 브라우저가 필요에 따라 자동으로 콘텐츠를 페이지로 나눌 수 있도록 합니다.

인쇄용 HTML 예:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>A4 Styled Document</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="page">
    <h1>Title of Page 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
  </div>

  <div class="page">
    <h1>Title of Page 2</h1>
    <p>Content will automatically break into new pages for printing...</p>
  </div>
</body>
</html>

로그인 후 복사

인쇄용 CSS:

/* Define page layout for A4 size */
@media print {
  body {
    margin: 0;
    padding: 0;
  }

  .page {
    width: 210mm;
    height: 297mm;
    margin: 0;
    padding: 20mm;
    page-break-after: always; /* Automatically breaks after each page */
    box-shadow: none;
    overflow: visible; /* Ensures content flows properly when printing */
  }

  /* Prevent page breaks inside headers or large paragraphs */
  h1, h2, h3, p {
    page-break-inside: avoid;
  }
}

로그인 후 복사

이 CSS의 작동 방식:

page-break-after: Always; 인쇄 모드에서 각 .page div 다음에 콘텐츠가 새 페이지로 나누어지도록 합니다.
page-break-inside: 피하기; 머리글이나 큰 섹션이 두 페이지 사이에 어색하게 분할되는 것을 방지합니다. 이는 인쇄 시 깔끔하고 전문적인 모양을 유지하는 데 필수적입니다.

2. JavaScript를 사용하여 화면에서 페이지 나누기 처리

CSS는 인쇄 시 페이지 나누기를 처리할 수 있지만 화면 장치는 같은 방식으로 작동하지 않습니다. 브라우저는 콘텐츠를 화면에서 자동으로 별개의 페이지로 나누지 않기 때문에 콘텐츠가 A4 페이지 크기를 초과하는 경우 이를 감지하고 이를 새 페이지로 동적으로 분할하려면 JavaScript가 필요했습니다.

제가 관리한 방법은 다음과 같습니다.

동적 페이지 분할을 위한 JavaScript:

window.onload = function () {
  const pages = document.querySelectorAll('.page');

  pages.forEach(page => {
    if (page.scrollHeight > page.clientHeight) {
      splitPageContent(page);
    }
  });
};

function splitPageContent(page) {
  const newPage = document.createElement('div');
  newPage.classList.add('page');

  const contentToMove = page.innerHTML.slice(page.clientHeight / 2); 
  newPage.innerHTML = contentToMove;
  page.innerHTML = page.innerHTML.slice(0, page.clientHeight / 2);

  // Insert the new page into the DOM after the current page
  page.parentNode.insertBefore(newPage, page.nextSibling);
}

로그인 후 복사

JavaScript가 필요한 이유:

화면에서는 인쇄와 달리 텍스트가 오버플로될 때 한 .page div에서 다음 div로 자동으로 흐르지 않습니다. 브라우저는 단순히 콘텐츠가 페이지 경계를 넘어 퍼지도록 허용합니다. 위의 JavaScript 코드를 사용하면 콘텐츠가 오버플로되는 시기를 감지하여 새 페이지로 분할하여 PDF나 Google Docs에서 기대할 수 있는 다중 페이지 환경을 시뮬레이션합니다.

3. 화면과 인쇄에서 일관된 페이지 흐름 보장

이 접근 방식을 사용하면 콘텐츠가 여러 기기에서 일관되게 작동합니다.

On Screen: JavaScript는 콘텐츠 오버플로를 감지하고 필요에 따라 추가 .page div를 생성합니다. 깔끔하게 구분된 페이지 사이를 스크롤할 수 있는 A4 문서를 보는 것과 같은 경험을 시뮬레이션합니다.
인쇄 중: CSS @media 인쇄 및 페이지 나누기 속성은 인쇄 시 자동 페이지 나누기를 처리하므로 문서가 종이에 인쇄된 것처럼 보입니다.

결론

화면 장치에서 A4 페이지의 모양과 느낌을 모방하는 HTML 문서를 작성하려면 CSS와 JavaScript의 조합이 필요합니다. CSS만으로도 인쇄 측면을 효과적으로 처리할 수 있지만, 화면의 페이지 나누기를 관리하려면 JavaScript가 필수적입니다. 두 가지를 결합하면 화면과 인쇄 모두에서 텍스트가 페이지 전체에 깔끔하게 흐르는 원활한 경험을 보장할 수 있습니다.

위 내용은 화면 장치에서 HTML의 모양과 느낌을 갖는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.