인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

gncnzkf3님의 프로필 이미지
gncnzkf3

작성한 질문수

면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작

PDF 파일도 모달로 띄우는 방법이 궁금합니다.

작성

·

1.1K

1

안녕하세요 선생님. 강의 보면서 열심히 포트폴리오를 준비하고 있습니다. 

질문은 모달로 PDF 파일을 띄우는 방법이 궁금합니다. PDF파일인지 파워포인트인지 정확하게 모르겠네요..!

https://www.youtube.com/watch?v=-kz4EvLbbjE&t=1695s 이 유튜브 강좌에서 14분55초에 보면 PDF파일 같은걸 

모달로 띄우는데.. 이것도 featherlight 플러그인을 사용한건가요?? 아니라면 다른 방법은 뭔지 궁금합니다..!

답변 1

1

3가지 형태로 보여주실 수 있어요.

pdf 뿐만 아니라 html 파일, 이미지 파일도 동일한 방법으로 보여줄 수 있습니다.

첫번째는 직접 코딩해서 iframe으로 불러오는 방법입니다.

<div class="modal">

      <div class="modal-content">

        <iframe src="portfolio/website-01/plan.pdf" frameborder="0"></iframe>

      </div>

</div>

두번째 방법은 featherlight로 띄우는 방법입니다.

featherlight로 띄우면 자동적으로 iframe 형태로 들어갑니다.

<a href="portfolio/website-01/plan.pdf" data-featherlight="iframe">Open Portfolio</a>

https://github.com/noelboss/featherlight/

세번째 방법은 UIKit을 사용하는 방법입니다.

<a class="uk-button uk-button-default" href="#modal-full" uk-toggle>Open</a>

<div id="modal-full" class="uk-modal-full" uk-modal>

      <div class="uk-modal-dialog">

        <button class="uk-modal-close-full uk-close-large" type="button" uk-close></button>

        <iframe src="portfolio/website-01/plan.pdf" frameborder="0"></iframe>

      </div>

</div>

https://getuikit.com/docs/modal

 

gncnzkf3님의 프로필 이미지
gncnzkf3
질문자

아! 감사합니다 ㅎㅎ 작동됩니다!

gncnzkf3님의 프로필 이미지
gncnzkf3

작성한 질문수

질문하기