[html] iframe으로 한 화면 안에 여러 html 파일 동시에 보이기

최근에 iframe 태그를 이용해서 웹사이트를 하나 만들었습니다. iframe 세 개를 만들고 그 안에 각각 html 파일을 띄웠습니다. 만들어진 결과물은 아래의 캡쳐 화면에서 볼 수 있습니다.  모바일에서 반응성 생각하느라 세로로 만들었는데 이렇게 보니 좀 비좁아 보이네요. 세 iframe을 한 번에 보여드리려고 화면을 축소해서 특히 작아 보이는데 실제로는 이렇게 비좁지는 않습니다.

웹사이트에서 구현된 모습을 직접 보고 싶으신 분은 아래 링크로 접속해 주시면 되겠습니다.

https://personaliiitytest.netlify.app/inquestions.html



위의 화면처럼 구현하기 위해 사용한 코드입니다.

너비, 높이 등을 수정할 수 있습니다. src="" 값을 바꾸어 가며 안에 보여줄 화면을 바꿀 수 있습니다.

    <h1>How I think of myself</h1>
    <tr>
        <td width="50%"><iframe src="question.html" style="width:300px;height:350px;"></iframe></td>
    </tr> <br>
    <h1>How others would think of me</h1>
    <tr>
        <td width="50%"><iframe src="question.html" style="width:300px;height:350px;"></iframe></td>
    </tr><br>
    <h1>How I wish others think of me</h1>
    <tr>
        <td width="50%"><iframe src="question.html" style="width:300px;height:350px;"></iframe></td>
    </tr>

iframe의 위치와 배열을 바꾸어가며 배치하면 폭넓은 활용이 가능한 태그라고 생각합니다.









Comments

Popular posts from this blog

재밌는 성향 테스트 소개 - 나와 비슷한 위인 찾기 (심리/성향 테스트)

구글 블로그스팟에 <쿠팡파트너스> '다이나믹 배너' 삽입하기

구글 블로그 스팟에 카카오 애드핏 삽입하는 방법