인쇄(print) 화면을 위한 html, css 작성하기🍇

상황 설명 🌈

이번 스프린트에 사용자가 송장(invoice)을 신청하고, pdf로 받아볼 수 있는 기능을 추가했다.
나는 인보이스 신청하는 프론트엔드 코드도 작성하고, pdf생성을 위한 html,css를 작성해서 백엔드 개발자님에게 넘기기로 했다.

디자인도 심플하니까 빨리 할 수 있을 것이라고 생각했다.
그.런.데. 생각보다 오래 걸렸다 🥹 디자이너님도 많이 괴롭혔다 🥹 (죄송하고 감사해요...)

웹 브라우저에서 보는 것과 pdf로 뽑은 결과물이 많이 달랐기 때문이다!!

그래도 이번 시간을 통해서 인쇄용일 때는 html, css을 어떻게 작성해야 할지, 무엇을 고려해야 할지 알게 됐다.
엄청 고생하면서 알게 된 것들이라서ㅠㅠ 블로그에 남기려고 한다 ㅎㅎ

(pdf로 뽑는 것은 인쇄용과 동일했기 때문에, 인쇄용이라고 쓰겠습니다~)

인쇄용 화면을 위해서 고려할 점들 ✅

꼭 인쇄용 화면을 위한 html 작성할 때 고려할 점 뿐 아니라, 웹 브라우저에 보여주는 html 작성할 때도 알아야 할 점도 적었다!
이 작업하면서 마주쳤던 문제들, 알게 된 점들은 다 적는다.

flex 안돼요 ❌

처음에는 정렬을 위해서 flex를 사용했다. 그런데 이상하게 그쪽 정렬만 안되는 것이었다.
알고보니 인쇄용에서는 flex가 적용이 안되는 것 같았다. (정확한 공식 문서 같은 걸 찾고 싶은데 못 찾았다.ㅠㅠ 다른 분도 블로그에서 flex를 사용하던 것을 float를 이용했다고 하시는 것으로 봐서는 flex는 못 쓰는 것 같다)

font size 10px 미만은 브라우저에서 다 10px로 보이는 경우가 있어요.

와우. 처음 알았다. 이런 문제가 있을 수 있구나..
디자인에 font size 8px이 있는데, 나는 분명히 font size 8px로 설정했는데 사이즈가 안 맞아보였다.ㅠㅠ
알고보니 크롬에서 font size 의 최소 크기가 10px로 정해있고, 이 이하는 10px로 표기되는 것이었다.
그래도 10px 미만으로 보여주고 싶을 때 할 수 있는 방법이 있다.

만약에 8px로 보여주고 싶다면 다음과 같이 하면 된다.

// html

<p class="font-8"> hello </p>

// css

.font-8{
  font-size: 10px;
  transform: scale(0.8);
}

이 블로그 를 참고했는데, 가면 더 자세한 설명이 있다.

1px 미만의 선은 안보이거나 1px로 보여요..

이것도 처음 알았다!! 신기!!

0.5px로 hr, border를 그려야 했다.
그런데 이건 브라우저에서부터 두껍게 보였다.

알아보니 '픽셀 밀도'때문에 대부분 웹 브라우저에서 1px 보다 얇은 디자인을 표현할 수 없다고 한다.
1인치 안에 몇 픽셀을 표현할 수 있는지인데, 기기마다 다르다.
0.5px을 화면에 나타내려면 픽셀밀도가 2 이상이어야 하는데, 일반 화면 & 크롬에서는 밀도가 1이라서 표현할 수가 없다. 0.5px이라고 써도 1px로 보인다.

나는 hr은 div로 바꾸고, scale을 이용하는 방법을 사용했다.

// html

  <div class="line" role="presentation"></div>

// css

.line {
  border-bottom: 1px solid #cccccc;
  transform: scaleY(0.5);
}

이 블로그에서 잘 설명해준다 :)
이 문제를 해결하기 위한 여러 방법과 장단점도 알려준다.

font size px 아니고 pt 를 이용해야 해요..

이게 제일 문제 중에 하나였다ㅠㅠ
분명히 피그마 디자인에 있는 대로 px을 입력했는데, 이상하게 pdf로 만들면 작아보였다 ㅠㅠ
왜 그런지 정말 답답했다.

알고보니 pt를 이용해야 하는 거였다.
px는 화면에 표시할 때 쓰는 단위이고
pt는 point ! 인쇄물에서 쓰는 단위이다.

이걸 바꾸니 완전 잘됐다 ㅠㅠ

media query print 안에 입력해야 할 것들...

• 인쇄할 때 숨길 영역, 기본 패딩, 기본 사이즈 등을 조절할 수 있다 !!

틀린 내용이 있으면 댓글 남겨주세요~ 🤗🤗