아이프레임 처럼 스크롤바를 넣고 싶은경우

특정위치의 내용의 가로 세로 사이즈가 고정되어 야 하는경우가있다

이때 범위가 벗어나면 안되는경우가 있는데

벗어나게되면 전체적인 디자인이 깨지거나 하는경우이다

 

이때 사용하는 방법이 스크롤이 생기게 하는방법인데

아이프레임으로 스크롤을 처리해도 되지만 스타일로 간단하게 처리하는 방법이있다

 

 

<table>

 <tr><td>아이프레임 효과</td></tr>

 <tr>

  <td>

<div style="width:300px; height:300px;overflow:auto;">

줄바꿈<br>

줄바꿈<br>

줄바꿈<br>

줄바꿈<br>

줄바꿈<br>

줄바꿈<br>

줄바꿈<br>

줄바꿈<br>

줄바꿈<br>

줄바꿈<br>

줄바꿈<br>

줄바꿈<br>

줄바꿈<br>

줄바꿈<br>

줄바꿈<br>

줄바꿈<br>

줄바꿈<br>

줄바꿈<br>

줄바꿈<br>

줄바꿈<br>

줄바꿈<br>

줄바꿈<br>

줄바꿈<br>

줄바꿈<br>

줄바꿈<br>

줄바꿈<br>

줄바꿈<br>

줄바꿈<br>

줄바꿈<br>

줄바꿈<br>

</div>

  </td>

 </tr>

</table>

 

가로세로 300px가 넘어가는 경우 자동으로 스크롤 처리하는 부분이다

overflow:auto; 부분으로 스크롤이 없다가 사이즈가 오버되면 그때 스크롤이 생긴다 

<table>
 <tr><td>아이프레임 효과</td></tr>
 <tr>
  <td>
<div style="width:300px; height:300px;overflow:auto;">
줄바꿈<br>
줄바꿈<br>
줄바꿈<br>
줄바꿈<br>
줄바꿈<br>
줄바꿈<br>
줄바꿈<br>
줄바꿈<br>
줄바꿈<br>
줄바꿈<br>
줄바꿈<br>
줄바꿈<br>
줄바꿈<br>
줄바꿈<br>
줄바꿈<br>
줄바꿈<br>
줄바꿈<br>
줄바꿈<br>
줄바꿈<br>
줄바꿈<br>
줄바꿈<br>
줄바꿈<br>
줄바꿈<br>
줄바꿈<br>
줄바꿈<br>
줄바꿈<br>
줄바꿈<br>
줄바꿈<br>
줄바꿈<br>
줄바꿈<br>
</div>
  </td>
 </tr>
</table>