HTML5 페이지에 PDF 파일을 포함하는 방법 완벽 가이드

HTML5 페이지에서 PDF 파일 표시하기

웹 페이지에서 PDF 문서를 직접 보여주고 싶다면 <iframe> 요소를 사용하는 것이 가장 간단한 방법입니다. <iframe>은 HTML 문서 안에 또 다른 문서를 삽입할 수 있는 인라인 프레임 요소로, PDF 파일의 경로를 src 속성에 지정하기만 하면 됩니다.

<iframe>을 사용한 기본 예제

아래 코드는 HTML5 페이지에 PDF 파일을 포함하는 기본적인 방법을 보여줍니다.

<!DOCTYPE html>
<html>
    <head>
        <title>HTML iframe Tag</title>
    </head>
    <body>
        <h1>HTML5 Tutorial</h1>
        <iframe src = " https://www.tutorialspoint.com/html5/html5_tutorial.pdf" style="width:500px; height:300px;"></iframe>
    </body>
</html>

코드 설명

src 속성: 화면에 표시할 PDF 파일의 URL 경로를 지정합니다. 로컬 파일이나 외부 링크 모두 사용할 수 있습니다.
style 속성: width와 height 값을 조절하여 PDF 뷰어의 크기를 원하는 대로 설정할 수 있습니다.

참고: 다른 대체 방법들