HTML @media print

@media print

* HTML 코딩중  해당 페이지의 내용을 프린트로 인쇄 해야 하는경우들이 생긴다. 이때 아무런 처리를 하지 않으면 낭패를 볼수 있다.

프린터에 최적화(A4용지 등)된 인쇄 페이지가 필요 할경우 필수적인 요소 이므로 알아 두자.

 

@media print {
       // 여기에 프린트를 위한 css 설정을 나열하면 된다.
}

 

 

page-break-before

h1 {
    page-break-before: always;
}

• auto : 페이지 넘김을 해당 엘리먼트의 앞에 강제적으로 하거나 금지하지 않습니다.
• always : 해당 엘리먼트의 앞에 페이지 넘김을 항상 하도록 지정합니다.
• avoid : 해당 엘리먼트의 앞에 페이지 넘김을 금지하도록 지정합니다.
• left : 엘리먼트 앞에서 분리된 페이지가 왼쪽 면에 위치하도록 지정합니다.
• right : 엘리먼트 앞에 분리된 페이지가 오른쪽 면에 위치하도록 지정합니다.

 

page-break-after

* 다음 페이지로 .  무조건 새로운 페이지로 글넘김하여 처리 .

h1 {
    page-break-after: always;
}

• auto : 페이지 넘김을 해당 엘리먼트의 앞에 강제적으로 하거나 금지하지 않습니다.
• always : 해당 엘리먼트의 앞에 페이지 넘김을 항상 하도록 지정합니다.
• avoid : 해당 엘리먼트의 앞에 페이지 넘김을 금지하도록 지정합니다.
• left : 엘리먼트 앞에서 분리된 페이지가 왼쪽 면에 위치하도록 지정합니다.
• right : 엘리먼트 앞에 분리된 페이지가 오른쪽 면에 위치하도록 지정합니다.

 

page-break-inside

* 새로운 페이지로 넘기지 않고 페이지의 내용을 쭉 이어서 써야 하는경우. ( list, 테이블의 내용 등. )

h1 {
    page-break-inside: avoid;
}

• auto : 페이지 넘김을 해당 엘리먼트의 내부에서 강제적으로 하거나 금지하지 않습니다.
• avoid : 해당 엘리먼트의 내부에서 페이지 넘김을 금지하도록 지정합니다.

 

 

 프린트 페이지는 신경이 많이 쓰이는 부분..

 

* 디자인 잘되어 webpage 구성이 되었더라도  프린트를 위한 css 설정부분을 잘 고려하여 적용해야 한다.