내장바구니 | 주문배송조회 | 내적립금
6만원 이상 무료배송
주문하시는
총상품금액의 합계가
6만원 이상일 경우
택배비가 무료입니다.
[개발자팁] 스타일시트 예제
작성자: 방장    작성일: 2009-01-13 09:16   조회: 13452   댓글: 0
▶ table border 1px로 표현하기
<html>
<head>
<title>..</title> 
</head>
<body>
<table border="1" widht=200 height=200 style="border-collapse:collapse;">
<tr>
<td>스타일이 적용됩니다. </td> 
</tr>
</table>
</body>
</html> 
   

▶ table border 다양한게 표현하기
<html>
<head>
<title>..</title> 
</head>
<body>

점선으로 표현
<table border="0" widht=20 height=20
style="border-width:1; border-color:#777777; border-style:dotted;">
<tr><td>점선으로</td> </tr> </table>

스티치선으로 표현 
<table border="0" widht=20 height=20
style="border-width:1; border-color:#777777; border-style:dashed;">
<tr><td>스티치선으로</td> </tr> </table> 

액자처럼으로 표현
<table border="0" widht=20 height=20
style="border-width:1; border-color:#777777; border-style:ridge;">
<tr><td>액자처럼</td> </tr> </table>

두가지 선으로 표현
<table border="0" widht=20 height=20
style="border-width:1; border-color:#777777; border-style:double;">
<tr><td>두가지 선섬으로</td> </tr> </table>
</body>
</html> 


▶ table에 링크걸기
<html>
<head>
<title>..</title> 
</head>
<body>
<table width=100 height=100  >
<tr>
<td style=cursor:hand; 
onClick="location.href='링크주소" onMouseOver="window.status='링크주소'"  onMouseOut="window.status=''">링크 </td> 
</tr>
</table>
</body>
</html> 


▶ table에 마우스 오버시 색바꾸기
<html>
<head>
<title>..</title> 
</head>
<body>
<table width=100 height=100  >
<tr bgcolor="#FFFFFF" onMouseOver="this.style.backgroundColor='#EEF1F6'" 
onMouseOut="this.style.backgroundColor='#FFFFFF'"> 
<td>스타일이 적용됩니다. </td> 
</tr>
</table>
</body>
</html> 


▶ table을 스타일시트로 제어하기
<html>
<head>
<title>..</title> 
<style type="text/css"> 
.table1 

border-top:solid 1px gray; 
border-right:solid 1px gray; 
border-left:solid 1px gray; 
border-left:solid 1px gray; 
border-bottom:solid 1px gray; 
BACKGROUND-COLOR: green;
font-size : 9pt; 
font-family : "돋움", "Arial", "sans-serif"; 
COLOR: #ffffff; 

</style> 
</head>
<body>
<table width=100 height=100 class="table1">
<tr>
<td>스타일이 적용됩니다.
</td> 
</tr>
</table>
</body>
</html> 


▶ table로 아이프레임 효과만들기
<html>
<head>
<title>.. </title>
<style type="text/css">
<!--
body,td {font-family:"굴림"; font-size: 9pt}
#scrollbox {width:400; height:100; overflow:auto; padding:10px; border:1; border-style:solid; border-color:black}
-->
</style>
</head>
<body bgcolor="#FFFFFF">
<table width=400 height=100 border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<DIV id="scrollbox"> 
모든사람이 나를 에워싸고 조여들며<br>
세상이 마치 작은 새장처럼 보일때<br>
좀 더 자라도록 <br>
내게 여유를 주십시오.<br> 
내 주변세계가 <br>
나에게 변치말고 그냥 있으라고 할때<br>
좀 더 자라도록 <br>
내게 여유를 주십시오.<br> 
당신이 가지고 있는 <br>
나에 대한 이미지에서 풀어주시어<br>
좀 더 자라도록 <br>
내게 여유를 주십시오.<br> 
내안에 깊이 자리잡은 <br>
내모습 그대로 자랄수 있도록 <br>
좀 더 여유를 주십시오.<br>
</DIV>
</td>
</tr>
</table>
</body>
</html>
 * 관련 댓글 한말씀 부탁합니다.
  작성자:    비밀번호:   (비밀번호는 숫자 4자리이며 본인댓글 삭제시 필요합니다.)
이용약관 | 개인정보취급방침