웹코딩을 하다보면 일정한 공간안에 테이블이나 다른 내용들을 넣어야 할 경우가 생긴다.
이럴때 흔히 iframe을 사용하는데, css로 간단하게 iframe처럼 사용할 수 있는 방법이 있다.
소스는 다음과 같다.
붉게 표시된 부분만 본다면 바로 이해가 가능할 것이라 믿어 의심치 않는다.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>css로 iFrame효과 내기....</title>
<style type="text/css">
<!--
#scroll_international { height=150; overflow:auto; }
-->
</style>
</head>
<body>
<table width="90%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="25">* 국제팩스메시지</td>
<td align="right">[단위:원/분] * 부가세 별도</td>
</tr>
</table>
<div id="scroll_international">
<table width="90%" border="0" cellpadding="0" cellspacing="1" bgcolor="c2c2c2">
<tr align="center" bgcolor="f5f5f5">
<td>국가</td>
<td>국가코드</td>
<td>표준</td>
<td height="21">할인</td>
</tr>
<tr align="center" bgcolor="#FFFFFF">
<td height="21">괌 </td>
<td>1+617</td>
<td>420</td>
<td>378</td>
</tr>
<tr align="center" bgcolor="#FFFFFF">
<td height="21">그루지아</td>
<td>995</td>
<td>670</td>
<td>603</td>
</tr>
<tr align="center" bgcolor="#FFFFFF">
<td height="21">쿠웨이트</td>
<td>965</td>
<td>810</td>
<td>729</td>
</tr>
<tr align="center" bgcolor="#FFFFFF">
<td height="21">태국</td>
<td>66</td>
<td>570</td>
<td>513</td>
</tr>
<tr align="center" bgcolor="#FFFFFF">
<td height="21">터키</td>
<td>90</td>
<td>586</td>
<td>527</td>
</tr>
<tr align="center" bgcolor="#FFFFFF">
<td height="21">파키스탄</td>
<td>92</td>
<td>1,150</td>
<td>1,035</td>
</tr>
<tr align="center" bgcolor="#FFFFFF">
<td height="21">포르투갈</td>
<td>351</td>
<td>558</td>
<td>502</td>
</tr>
<tr align="center" bgcolor="#FFFFFF">
<td height="21">폴란드</td>
<td>48</td>
<td>670</td>
<td>603</td>
</tr>
<tr align="center" bgcolor="#FFFFFF">
<td height="21">프랑스</td>
<td>33</td>
<td>350</td>
<td>315</td>
</tr>
<tr align="center" bgcolor="#FFFFFF">
<td height="21">홍콩</td>
<td>852</td>
<td>395</td>
<td>356</td>
</tr>
</table>
</div>
</body>
</html>
