@media print @page

김수은·2022년 11월 11일

CSS

🎨css

목록 보기

2/2

# Media print & Media page

print (cirl + p ) 프린트 할 때 적용 할 때 css조정 할 수 있는 것.
page는 print 시 page 여백 및 크기를 조정 할 수 있다.

# 1-1 print size 조정

A4가 익숙하여 기본으로 해놓았지만 A4뿐만아니라, A3, B3 등 넣을 수 있다. margin: 0 은 위아래 머리글을 제외시킬 수 있다.


@media page {
  size: A4;
  margin: 0;
}

# 1-2 필요없는 부분

Print 때 보여지고 싶지 않은 부분은 display:none 해주면 된다.
그리고 기본으로 lnb또는 Gnb부분 등 간격을 주기위해 content안에 margin 또는 padding 등 없애고 싶으면 해당 media print 안에 class를 추가 한 후 에 필요없는 부분을 없애면 된다.


@media print {
  header {
    display: none;
  }
  .특정클래스이름 {
  	margin: 0;
  }
}

# 1-3 background 넣는 방법

background 를 넣지 못하고 이미지 넣으면 흰여백으로 나온다.
이런경우 아래 코드를 추가 하면 나타나게 할 수 있다.


@media print {
	-webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

# 1-4 page-break 속성들

page-break 속성들은 print될 때 해당 element가 다음페이지로 넘어가거나 넘어가는걸 막는데 쓰인다고 생각하면 될 거 같다.

Page-break-before / Page-break-after : 다음 페이지 전 후를 설정
page-break-inside : table같은 요소들이 중간에 잘리지 않게 설정

  /*page-break-before도 같은 value사용*/
 
  page-break-after: auto;
  page-break-after: always;
  page-break-after: avoid;
  page-break-after: left;
  page-break-after: right;
  page-break-after: recto;
  page-break-after: verso;
  
  page-break-inside: auto; 
  page-break-inside: avoid;

# Example code

아래 예시로 만들어 놓은 코드를 확인 할 수 있다.
print환경에서는 header,footer,button을 나오지않게 display:block;
background는 나오게 하였다. Print This page 의 button을 눌러보면 print 되는 걸 확인 할 수 있다.

※ sandbox code와 다르게 아래 코드에는 table이 짤리는걸 보여주지 않기 위해 lorem을 한 개를 제외하고 똑같이 넣지않았다.

    <header>This is Header</header>

    <div class="print-area">
      <h3>Print Name</h3>
      <div class="content">
        <img
          src="https://images.pexels.com/photos/2662116/pexels-photo-2662116.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
          alt="images"
        />
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. In quam
          impedit, voluptatibus aliquam optio, sunt voluptatem culpa sequi ut
          libero modi enim assumenda neque. Impedit laborum provident voluptates
          aliquam illo!
        </p>
        <!-- 여기부분 해제 시 p element 이후 부분 잘림 -->
        <!-- <p style="page-break-after: always;">
          page-break-after: always;
        </p> -->
        <table style="page-break-inside: avoid;">
          <tr>
            <th>Company</th>
            <th>Contact</th>
            <th>Country</th>
          </tr>
          <tr>
            <td>Alfreds Futterkiste</td>
            <td>Maria Anders</td>
            <td>Germany</td>
          </tr>
          <tr>
            <td>Berglunds snabbköp</td>
            <td>Christina Berglund</td>
            <td>Sweden</td>
          </tr>
          <tr>
            <td>Centro comercial Moctezuma</td>
            <td>Francisco Chang</td>
            <td>Mexico</td>
          </tr>
          <tr>
            <td>Ernst Handel</td>
            <td>Roland Mendel</td>
            <td>Austria</td>
          </tr>
        </table>
      </div>
      <button onclick="window.print()" class="print-button">
        Print this page
      </button>
    </div>
    <footer>
      This is footer
    </footer>

header,
footer {
  border-radius: 10px;
  padding: 20px 10px;
  color: #faf3f3;
  font-weight: bold;
  font-size: 20px;
  background-color: #febe8c;
}
.print-area {
  margin: 50px 30px;
  padding: 20px 40px;
  background-color: #fffbc16b;
  border-radius: 20px;
}
h3 {
  text-align: center;
}

.content img {
  display: block;
  width: 500px;
  margin: 0 auto;
}
.print-button {
  display: block;
  margin: 0 auto;
  padding: 5px 20px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  color: #fff;
  background: #febe8c;
}
@media page {
  size: A4;
  margin: 0;
}

@media print {
  footer,
  header,
  .print-button {
    display: none;
  }

  .print-area {
    margin: 0;
  }

  * {
    -webkit-print-color-adjust: exact;
  }
}

※ 참고 링크

김수은

TooLazyNotToDo

이전 포스트