웹 페이지에 PDF 문서를 직접 표시하고 싶다면 HTML의 <iframe> 요소를 사용하는 것이 가장 간단한 방법입니다. iframe의 src 속성에 PDF 파일의 경로를 지정하기만 하면 됩니다.
기본적인 PDF 삽입 방법
<iframe src="path-to-your-file.pdf"></iframe>이렇게 작성하면 해당 위치에 PDF 뷰어가 나타나며, 사용자는 별도의 다운로드 없이 페이지 안에서 바로 문서를 열람할 수 있습니다.
iframe 테두리 제거하기
iframe은 기본적으로 테두리(border)가 표시됩니다. 이 테두리가 디자인에 어울리지 않는다면 frameborder 속성을 0으로 설정하여 제거할 수 있습니다.
<iframe src="path-to-your-file.pdf" frameborder="0"></iframe>너비와 높이 지정하기
PDF가 제대로 보이려면 iframe에 적절한 크기를 지정해 주는 것이 좋습니다. 크기는 CSS 클래스를 이용하거나 인라인 스타일로 설정할 수 있습니다.
아래 예제에서는 너비를 100%로 설정해 iframe이 부모 컨테이너의 전체 폭을 차지하도록 했습니다. 반응형 웹에서 권장되는 방식입니다. 또한 높이를 50vh(viewport height)로 지정했는데, 이는 화면 높이의 50%를 의미하므로 어떤 기기에서 보더라도 일관된 비율로 표시됩니다.
<iframe
src="path-to-your-file.pdf"
style="width:100%;height:50vh;"
frameborder="0"
></iframe>물론 프로젝트의 레이아웃과 디자인에 맞게 너비와 높이 값은 자유롭게 조절하면 됩니다.
참고: 대체 방법
iframe 외에도 <embed> 또는 <object> 태그를 사용해 PDF를 삽입할 수 있습니다. 다만 브라우저 호환성과 사용 편의성 측면에서 <iframe>이 가장 널리 사용되는 방식입니다. 모바일 환경에서는 PDF가 내장 뷰어 대신 다운로드되거나 새 창으로 열릴 수 있으니, 중요한 문서라면 대체 링크를 함께 제공하는 것이 좋습니다.