Joe Han's Graphy
태그로 테이블 모서리를 둥글게 본문
1. 포토샵을 이용하는 방법
포토샵에서 테이블의 배경을 만드신 후, 그림파일로 저장하세요.
그림을 잘라서 이미지레디에서 불러오시면 테이블의 각 셀에 자른 이미지들이
정확한 위치에 들어갑니다.
그 후 입금계좌서를 테이블의 가운데 셀에 삽입해주시면 계좌서 주위에 둥근 테두리가
있는 효과가 생기겠죠.
그렇게 해주시는 것이 가장 간편한 방법입니다.
제 홈도 그 방법을 이용하였지요..
2. 스크립트 태그를 이용하는 방법
태그로 테이블 모서리를 둥글게 하기 위해선 아래의 소스를 넣어주시면 됩니다.
<head>와 </head> 사이에 아래의 소스를 넣어주세요.
<script>
function roundTable(objID) {
var obj = document.getElementById(objID);
var Parent, objTmp, Table, TBody, TR, TD;
var bdcolor, bgcolor, Space;
var trIDX, tdIDX, MAX;
var styleWidth, styleHeight;
// get parent node
Parent = obj.parentNode;
objTmp = document.createElement('SPAN');
Parent.insertBefore(objTmp, obj);
Parent.removeChild(obj);
// get attribute
bdcolor = obj.getAttribute('rborder');
bgcolor = obj.getAttribute('rbgcolor');
radius = parseInt(obj.getAttribute('radius'));
if (radius == null || radius < 1) radius = 1;
else if (radius > 6) radius = 6;
MAX = radius * 2 + 1;
/*
create table {{
*/
Table = document.createElement('TABLE');
TBody = document.createElement('TBODY');
Table.cellSpacing = 0;
Table.cellPadding = 0;
for (trIDX=0; trIDX < MAX; trIDX++) {
TR = document.createElement('TR');
Space = Math.abs(trIDX - parseInt(radius));
for (tdIDX=0; tdIDX < MAX; tdIDX++) {
TD = document.createElement('TD');
styleWidth = '1px'; styleHeight = '1px';
if (tdIDX == 0 || tdIDX == MAX - 1) styleHeight = null;
else if (trIDX == 0 || trIDX == MAX - 1) styleWidth = null;
else if (radius > 2) {
if (Math.abs(tdIDX - radius) == 1) styleWidth = '2px';
if (Math.abs(trIDX - radius) == 1) styleHeight = '2px';
}
if (styleWidth != null) TD.style.width = styleWidth;
if (styleHeight != null) TD.style.height = styleHeight;
if (Space == tdIDX || Space == MAX - tdIDX - 1) TD.style.backgroundColor = bdcolor;
else if (tdIDX > Space && Space < MAX - tdIDX - 1) TD.style.backgroundColor = bgcolor;
if (Space == 0 && tdIDX == radius) TD.appendChild(obj);
TR.appendChild(TD);
}
TBody.appendChild(TR);
}
/*
}}
*/
Table.appendChild(TBody);
// insert table and remove original table
Parent.insertBefore(Table, objTmp);
}
</script>
<body>와 </body> 안에 아래의 소스를 넣어주세요.
<table id="ta" width="300" height="100" border="0" radius="3" rborder="#999999" rbgcolor="#F8F8F8">
<tr>
<td valign="top">테스트</td>
</tr>
</table>
<script>roundTable("ta");</script>
* 테이블 테그 안의 가로 크기와 세로 크기를 수정
width="300" height="100"
* 테이블 테두리 색상과 테이블 안쪽 색상
rborder="#999999" rbgcolor="#F8F8F8"
* 테이블 둥근 테두리 정도 (값이 클수록 더욱 둥글 둥글 해집니다)
radius="3"
'작업실' 카테고리의 다른 글
| 우리 아이의 첫 스쿠터는?! 마이퍼스트 스쿠터 [오즈보즈] (1) | 2016.05.13 |
|---|---|
| 크레마 카르타(CREMA Carta) 대기화면 모음 (1) | 2016.05.13 |
| ART Autocare 님 이글 보세요~^^금칙어를 쓰고있다고.. 안되네요..ㅡㅡ;;; 헙.. (0) | 2014.09.16 |
| tistory background / 티스토리 배경 이미지 설정하기! (3) | 2014.09.10 |
| Font-Awesome (0) | 2014.06.18 |
| 애드센스 승인 거절?! (0) | 2014.05.30 |
| 도메인 포워딩 하는 방법 (0) | 2014.05.28 |
| 줄간격을 조절하는 css 속성 (0) | 2014.05.28 |
