태그

CSS - A4

CSS - A4

CSS in A4 size

A4 크기에 맞에 css를 적용하고 싶을 때, 프린트할 때 A4사이즈에 맞게 하고 싶은 경우 css를 아래와 같이 추가하면 된다.
<body>
  <div class="page"></div>
</body>

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.page {
  width: 210mm; /* A4의 너비와 높이 지정 */
  height: 297mm;
  margin: 10mm auto;
}
@page {
  size: A4;
  margin: 0;
}

@media print { /* 프린트 할 때 사용하는 css(프린트하지 않으면 이 부분은 필요 없음) */
  html, body {
    width: 210mm;
    height: 297mm;
  }
  .page {
    margin: 0;
    width: initial;
    min-height: initial;
    page-break-after: always; /* 페이지를 나눌 수 있음 */
    /* auto: 자동으로 계산 */
    /* always: 항상 분리 */
    /* avoid: 분리시키기 않음 */
    /* inherit: 상속받음 (대체로 이 정도로 사용될 것 같다.) */
}

프린트 함수 연결

추가로 버튼이나 페이지가 로딩되었을 때, 프린트할 수 있는 창까지 띄울 수 있다.
window.print();
위의 코드를 추가하면 된다.

참고

라벨:

댓글

댓글 쓰기

가장 많이 본 글