[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
Post a Comment