[javascript] 자바스크립트로 프린트 시에 페이지에 워터마크를 추가하는 방법

14 Dec 2023

javascript

웹페이지를 프린트할 때, 종종 워터마크를 추가하여 문서의 복사 및 인쇄를 방지하거나 문서의 특정 상태를 강조하는 데 사용됩니다. 이 게시물에서는 자바스크립트를 사용하여 웹페이지에 프린트할 때 워터마크를 추가하는 방법에 대해 설명하겠습니다.

워터마크를 추가하는 방법

자바스크립트로 웹페이지에 워터마크를 추가하는 방법은 간단합니다. 일반적으로, 워터마크는 CSS에 ::after 가상 요소를 사용하여 추가됩니다. 이를 통해 프린트될 때 워터마크가 포함됩니다. 또한, 자바스크립트를 사용하여 프린트 버튼을 클릭할 때 동적으로 워터마크를 추가할 수 있습니다.

아래는 워터마크를 추가하는 예제 코드입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>워터마크 추가 예제</title>
  <style>
    @media print {
      body::after {
        content: '워터마크 추가';
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 50px;
        color: rgba(0, 0, 0, 0.1);
        z-index: -1;
      }
    }
  </style>
</head>
<body>
  <h1>워터마크 추가 예제</h1>
  <button onclick="window.print()">프린트</button>
</body>
</html>

위의 코드는 워터마크를 추가하기 위한 간단한 예제입니다. @media print 미디어 쿼리를 사용하여 프린트 시에만 body 요소의 끝에 워터마크를 추가합니다. 프린트 버튼을 클릭하면 동적으로 워터마크가 추가됩니다.

결론

이렇게 자바스크립트와 CSS를 사용하여 프린트할 때 워터마크를 추가할 수 있습니다. 이를 통해 문서의 보안을 강화하거나 특정 정보를 강조하는 데 도움이 될 수 있습니다.

참고: MDN Web Docs