HTML 파일을 스타일 그대로 PDF로 변환하기
FreePDF 팀 작성 ·
.html 파일을 남에게 건네는 건 생각보다 불안한 일입니다. 만든 컴퓨터에서는 잘 보이는데 상대방에게 가면 스타일시트가 빠져 있고, 다른 브라우저에서는 배치가 달라지고, 메일 첨부 단계에서 막히기도 합니다. PDF로 바꾸면 페이지가 그대로 고정됩니다. 파일 하나, 어디서 열어도 같은 모습, 인쇄하면 보이는 그대로입니다.
넘어오는 것과 넘어오지 않는 것
.html 또는 .htm 파일을 올리면 브라우저가 인쇄용으로 그리는 방식과 같게 PDF로 변환됩니다. 변환하기 전에 알아둘 세 가지가 있습니다.
- 파일 안의 CSS는 적용됩니다.
<style>블록이나style=속성에 쓴 것은 글꼴, 색, 테두리, 표, 배경까지 그대로 넘어옵니다. - JavaScript는 실행되지 않습니다. 페이지는 파일에 담긴 상태로 그려집니다. 차트나 표를 불러올 때 스크립트가 그리는 구조라면, PDF에는 비어 있는 자리만 남습니다.
- 상대 경로는 찾아갈 곳이 없습니다. 업로드된 파일에는 기준이 될 주소가 없어서
<img src="images/logo.png">나<link href="style.css">는 가리킬 대상이 없습니다.https://로 시작하는 절대 URL은 정상적으로 받아옵니다.
마지막 문제의 해법은 한 파일로 완결된 페이지입니다. CSS는 <style> 블록에 붙여 넣고, 이미지는 전체 URL을 쓰거나 data: URI로 심으면 됩니다. HTML 리포트를 만들어 주는 도구 대부분이, 그리고 브라우저의 “페이지 저장 → 단일 파일”이 이미 그렇게 합니다.
용지와 여백은 CSS로 정할 수 있다
인쇄 출력으로 그려지기 때문에 인쇄용 CSS가 그대로 먹습니다. HTML을 직접 만들고 있다면 규칙 몇 개로 충분합니다.
@page { size: A4; margin: 20mm; }로 용지 크기와 여백을 정합니다. 레터 용지를 쓰면A4를Letter로 바꾸세요.- 제목에
break-before: page를 주면 장마다 새 페이지에서 시작합니다. - 표나 카드에
break-inside: avoid를 주면 두 페이지로 잘리지 않습니다. @media print안의 규칙도 적용되므로, 내비게이션이나 배너처럼 애초에 인쇄하고 싶지 않은 것은 PDF에 들어오지 않습니다.
브라우저 인쇄 대화상자가 더 나은 경우
그쪽이 정답인 경우가 많으니 분명히 적어 둡니다. 살아 있는 웹페이지를 PDF로 저장하고 싶다면 그 페이지를 열어 PDF로 인쇄하세요. 브라우저에는 이미지가 받아지고 스크립트가 돌고 로그인까지 된 페이지가 이미 올라와 있습니다. 업로드된 파일에는 아예 들어 있지 않은 것들이 거기에는 있습니다.
여기서 파일을 변환하는 쪽이 나은 때는, 스스로 완결된 .html이 손에 있을 때입니다. 메일로 받은 청구서, 스크립트가 써낸 리포트, 어떤 도구에서 내보낸 파일, 저장해 둔 영수증 같은 것이고, 브라우저가 가장자리에 찍는 머리글과 꼬리글, 페이지 번호 없이 깔끔한 PDF를 원할 때입니다. 재현된다는 장점도 있습니다. 같은 파일은 어느 기기에서든 같은 PDF가 되지만, 설정이 사람마다 다른 인쇄 대화상자는 그렇지 않습니다.
변환할 문서가 아니라 이제 쓸 문서라면, Markdown이 이 문제를 통째로 비켜갑니다. 관리할 CSS도 없고 따라다닐 이미지 파일도 없습니다.
자주 묻는 질문
파일 대신 URL을 줄 수 있나요?
아니요, 업로드한 파일을 변환합니다. 먼저 페이지를 저장하고(Ctrl+S / Cmd+S, 브라우저에 단일 파일 옵션이 있으면 그 옵션으로) 그 파일을 올리세요. 로그인 뒤에 있는 페이지라면 직접 저장하는 것이 애초에 내용을 꺼내는 유일한 방법입니다.
PDF에 스타일이 하나도 안 걸렸습니다. 왜죠?
거의 항상 스타일시트가 별도 파일인 경우입니다. HTML은 style.css를 참조하는데 올린 것은 HTML뿐이니 불러올 것이 없습니다. 텍스트 편집기로 파일을 열어 CSS를 <head> 안의 <style> 블록으로 옮기고 다시 변환하세요.