테이블에 스크롤박스 & 스크롤바 만들기


 

DIV를 사용하여 테이블에 스크롤박스 & 스크롤바 만드는 방법을 소개하고자 합니다. iframe을 사용하지 않고 테이블을 사용한 상태에서 스크롤바를 만드는것입니다.

 
 
소스 설명
 
　 





아래 코드를 문서내 적당한 위치에 삽입 해 놓으시면 됩니다.

 

 

<style>
/* 스크롤박스 & 스크롤바 */
.TDscrollbar {
  SCROLLBAR-FACE-COLOR: #ededed;
  FONT-SIZE: 9pt;
  SCROLLBAR-HIGHLIGHT-COLOR: #fafafa;
  SCROLLBAR-SHADOW-COLOR: #bdbdbd; COLOR: black;
  SCROLLBAR-3DLIGHT-COLOR: #ffffff;
  SCROLLBAR-ARROW-COLOR: #89a0bc;
  SCROLLBAR-TRACK-COLOR: #F7FFFF;
  FONT-FAMILY: 굴림;
  SCROLLBAR-DARKSHADOW-COLOR: #ffffff;
 }
#scrollbox {width:480; height:120; overflow:auto; padding:10px; border:0; border-style:solid; border-color:black;}
</style>
</HEAD>


<table border=0 width=460 cellspacing=0 cellpadding=0 align=center>
 <tr>
  <td height=25 align=center>+ XGI 카페를 방문해 주셔서 감사합니다 +</td>
 </tr>
 <tr>
  <td height=25>
  <DIV id="scrollbox" class=TDscrollbar>

 <p>XGI 툴로 멋진 기능성 홈페이지 제작을 위해&nbsp; 샘플
 홈페이지 소스를 제공하고, 강좌를 통한 교육과 정보를
 제공하고 있습니다.</p>

 <p>막강한 기능을 제공하는 홈페이지 개발툴 XGI 와 내용만
 채우면&nbsp;되는 완벽한 샘플&nbsp;홈페이지를 무료로
 제공하고 있습니다.</p>

 <p>통합 관리자모드 및 회원관리까지 지원되는
 샘플홈페이지는 사용자 웹 인터페이스와 프로그램 <font color="red">소스까지
 수정 가능하게 공개</font>가 되고&nbsp; 카페를 통해 사용자가
 직접 바꾸며 배워가는 <font color="#006699">차별화된 서비스</font>
 를 제공합니다.</p>

 <p>소스변경에 대한 정보를 카페를 통해 해결할 수 있어
 독립된 차별화된 나만의 홈페이지 제작을 지원합니다.</p>
  </DIV>
  </td>
 </tr>
</table>