[테이블 관련 자바스크립트/소스]
1. 마우스 오버시 테이블 컬러가 변하는 태그
2. 테이블에 frame속성을 이용하여 외곽선 형태 제어하기
3. 알파필터를 이용한 투명테이블 만들기
4. 레이어를 이용한 깔끔한 테이블박스 만들기
5. <fieldset>을 이용한 textarea 효과
6. <fieldset>속 테이블선 가운데 legend주기
7. style 지정으로 각 셀테두리 색상을 맘대로 갖고놀자
1.마우스 오버시 테이블 컬러가 변하는 태그
<table border="1" width="300" height="30">
<tr>
<td bgcolor="red" onmouseover="this.style.background='pink'" onmouseout="this.style.background='skyblue'">
여기에 마우스를 올려봐요 </td>
</tr>
</table>
소스 설명 : bgcolor="red" 는 마우스를 올리기전의 원래 배경색이구요. onmouseover=.....='pink'"는 말 그대로 마우스를 올렸을때 배경색입니다. onmouseout=.......='skyblue'"는 마우스가 테이블을 벗어 났을때의 배경색입니다. 메인화면의 플래시 보드 밑에하고 지금 화면의 상단의 것과 같습니다
2. 테이블에 frame속성을 이용하여 외곽선 형태 제어하기
<table width="500" cellspacing="0" cellpadding="4" bordercolor=#999999 frame=hsides>
<tr>
<td bgcolor="#efefef" align=center> 간단하게 라인 표현하기</td>
</tr>
</table>
소스설명:
void : 표의 외각선이 나타나지 않습니다.
border : 기본적인 외각선이 나타납니다.(frame 옵션 안쓰는것과 같은 효과)
above : 바깥쪽 경계선중 위쪽만 나타납니다.
below : 바깥쪽 경계선중 아랫쪽만 나타납니다.
hsides : 바깥쪽 경계선중 위 아래만 나타납니다.
lhs : 바깥쪽 경계선중 왼쪽만 나타납니다.
rhs : 바깥쪽 경계선중 오른쪽만 나타납니다.
vsides : 바깥쪽 경계선중 좌우만 나타납니다
3.알파필터를 이용한 투명테이블 만들기
<table style='background-color:#222222; border:1 solid white; filter: Alpha(Opacity=50);'>
<tr><td> - 내용 삽입 - </td>
</tr>
</table>
background-color:#222222; 테이블 백그라운드 색상을 지정
border:1 solid white; 테이블의 테두리 설정 ( 예제는 1 픽셀의 흰색 테투리 )
filter: Alpha(Opacity=50); 가장 중요한 테이블의 필터효과 설정부 Opacity=50 의 수치를 변경하면서 투명도를 조절 ^^
4. 레이어를 이용한 깔끔한 테이블박스 만들기
<style type="text/css">
#box {width:360; height:100; overflow:auto; padding:7px; border:1 solid navy; background-image:url('a1.gif'); background-repeat:no-repeat; background-attachment:fixed; background-position:right bottom;background-color:#BFD0EF;}
</style>
<body>
<div id="box">내용</div>
</body>
5. <fieldset>을 이용한 textarea 효과
<fieldset style="background-color:lightskyblue; border: 1px solid ; padding=10; width=400; height=200; overflow: auto">
안녕하세요<p>
</fieldset>
6. <fieldset>속 테이블선 가운데 legend주기
<fieldset>
<legend align=center>
<font color=red>[공지사항]</font>
</legend>
^^
</fieldset>
7. style 지정으로 각 셀테두리 색상을 맘대로 갖고놀자
<td style="BORDER-BOTTOM: green 4px solid; BORDER-LEFT: red 4px solid; BORDER-RIGHT: red 4px solid; BORDER-TOP: green 4px solid;">
소스 : 각 셀에만 효과를 주시려면.. table border=0 으로 주셔야 합니다.
왜냐면.. 저기 td 안에 스타일 지정으로 border 의 두께를 지정해 주기 때문이죠..
BORDER-BOTTOM: green 4px solid 아랫쪽 선의 색을 green 색으로 하고 두께를 4픽셀로 하며 선의 형태는 직선
BORDER-LEFT: red 4px solid 왼쪽 선의 색을 red 색으로 하고 두께를 4픽셀 선의형태는 직선
BORDER-RIGHT: red 4px solid 오른쪽 선의 색을 red 색으로 하고 두께를 4픽셀 선의형태는 직선
BORDER-TOP: green 4px solid 윗쪽 선의 색을 green 색으로 하고 두께를 4픽셀로 하며 선의 형태는 직선
'정보기술의 샘터........о♡ > 접근성과 사용성' 카테고리의 다른 글
| 웹사이트기획을 위한 분석 (0) | 2008.09.22 |
|---|---|
| [자바스크립트]유용 소스 37가지 (0) | 2008.09.08 |
| “청와대 웹사이트도 소통 부재” (0) | 2008.06.09 |
| 장애인사업, 대기업이 나설 때다기자수첩 (0) | 2008.05.29 |
| [숙명여자대학교] 웹접근성 외교통상부와 경찰청 최우수, 청와대 최하 (0) | 2008.05.28 |