묻고답하기
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
테두리가 둥근 표만들기
2006.07.07 13:51
어느 홈페이지가보면 테두리가 둥글게 되있어서 굉장히 보기에
안정감이 있고 좋아보이더라구요.
나모에서는 아무리 해봐도 그런 기능이 없는것 같고
포토샾으로 만들어서 나모에 표배경으로 넣으면 되겠다는 생각이 언뜻 들던데요
해보니까 또 그게 쉽지 않더라구요
좋은 방법 없을까요? 네이버에서도 찾아봤지만 잘 없었어요.
안정감이 있고 좋아보이더라구요.
나모에서는 아무리 해봐도 그런 기능이 없는것 같고
포토샾으로 만들어서 나모에 표배경으로 넣으면 되겠다는 생각이 언뜻 들던데요
해보니까 또 그게 쉽지 않더라구요
좋은 방법 없을까요? 네이버에서도 찾아봤지만 잘 없었어요.
댓글 4
-
괄리자
2006.07.07 16:36
-
퍼니핑크
2006.07.07 17:51
<table cellpadding=0 cellspacing=0 border=0 width=300 >
<tr height=1>
<td rowspan=4 width=1></td>
<td rowspan=3 width=1></td>
<td rowspan=2 width=1></td>
<td width=2></td>
<td bgcolor=#e7e7e7></td>
<td width=2></td>
<td rowspan=2 width=1></td>
<td rowspan=3 width=1></td>
<td rowspan=4 width=1></td>
</tr>
<tr height=1>
<td bgcolor=#e7e7e7></td>
<td bgcolor=#ffffff></td>
<td bgcolor=#e7e7e7></td>
</tr>
<tr height=1>
<td bgcolor=#e7e7e7></td>
<td colspan=3 bgcolor=#ffffff></td>
<td bgcolor=#e7e7e7></td>
</tr>
<tr height=2>
<td bgcolor=#e7e7e7></td>
<td colspan=5 bgcolor=#ffffff></td>
<td bgcolor=#e7e7e7></td>
</tr>
</table>
<table cellpadding=0 cellspacing=0 border=0 width=300 >
<tr >
<td width=1 bgcolor=#e7e7e7></td>
<td valign=top bgcolor=#ffffff>
<table cellpadding=0 cellspacing=0 border=0 width=100%>
<tr height=0><td></td>
<td></td>
<td></td>
</tr>
<tr>
<td width=0></td>
<td align="center">이곳에다가 내용을 적어주시면 됩니다.</td>
<td width=0></td>
</tr>
<tr height=0>
<td></td>
<td bgcolor=#ffffff></td>
<td></td>
</tr>
</table>
</td>
<td width=1 bgcolor=#e7e7e7></td>
</tr>
</table>
<table cellpadding=0 cellspacing=0 border=0 width=300 >
<tr height=2>
<td rowspan=4 width=1></td>
<td width=1 bgcolor=#e7e7e7></td>
<td width=1 bgcolor=#ffffff></td>
<td width=2 bgcolor=#ffffff></td>
<td bgcolor=#ffffff></td>
<td width=2 bgcolor=#ffffff></td>
<td width=1 bgcolor=#ffffff></td>
<td width=1 bgcolor=#e7e7e7></td>
<td rowspan=4 width=1></td>
</tr>
<tr height=1>
<td rowspan=3></td>
<td bgcolor=#e7e7e7></td>
<td colspan=3 bgcolor=#ffffff></td>
<td bgcolor=#e7e7e7></td>
<td rowspan=3></td>
</tr>
<tr height=1>
<td rowspan=2></td>
<td bgcolor=#e7e7e7></td>
<td bgcolor=#ffffff></td>
<td bgcolor=#e7e7e7></td>
<td rowspan=2></td>
</tr>
<tr height=1>
<td></td>
<td bgcolor=#e7e7e7></td>
<td></td>
</tr>
</table> -
김상우
2006.07.07 20:03
<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>
사용법)
테이블에 아이디태그가 있어야 합니다.
전 한번 변환하는게 몇개 안되어서 아이디를 입력받아 함수를 실행하도록 했지만, 만약 많은 양을 한꺼번에 변환해야할 경우에는 함수를 변경해서 사용하시기 바랍니다. ^^
위 스크립트를 HTML문서에 포함하고(당연히...),
roundTable(테이블의 아이디문자열);
처럼 함수를 실행시키시면 됩니다.
단, 이 때 원래의 테이블에서 raidus(둥근 정도) 값과 테두리와 배경색의 색상값을 지정하도록 되어있습니다.
int radius : 둥근 정도입니다. 가능한 값은 1 <= radius<= 6 입니다. radius 를 계산하는 부분의 규칙을 잘 몰라서 우선은 한정시켜놨습니다. 나중에 모서리 픽셀을 제대로 구할 수 있게 되면 범위를 수정하겠습니다.
string rborder : 테두리의 색상값. #FFFFFF 와 같은 16진수 색상값과 white 와 같은 색상지시문자열 모두 사용가능.
string rbgcolor : 라운드테이블의 배경색. 배경색은 라운드 테이블 테두리 선 안쪽의 색상을 말하는 것입니다. rborder와 마찬가지로 16진수 색상값과 색상지시문자열 모두 사용가능합니다.
예)
<table id="ta" width="300" height="150" border="0" radius="3" rborder="#999999" rbgcolor="#F8F8F8">
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td colspan="2">테스트</td>
</tr>
</table>
<script>roundTable("ta");</script>
자세한 것은 링크를 참조하시면 됩니다.
브라우저 정보)
Internet Explorer 5.0 and later
Mozilla 1.5
Firebird 0.6 한글판
Netscapce Navigator 7 -
에지
2006.07.07 23:21
그냥 이미지를 만드시는게 훨씬 빠르지요 :)
글쓴이 | 제목 | 최종 글 |
---|---|---|
XE | 공지 글 쓰기,삭제 운영방식 변경 공지 [16] | 2019.03.05 by 남기남 |
gggggggggg | 모바일 게시판 스킨 링크 | |
딸꾹질 | 확장변수 옵션별로 색깔지정 하고싶습니다. [1] | 2013.09.01 by 딸꾹질 |
조용선186 | 잘되던 사이트가 갑자기 에러코드가 줄줄줄 뜹니다. [1] | 2013.09.01 by pentopen |
봉드기 |
스킨 값은 필수입니다...
[1]
![]() | 2013.09.01 by Arisae |
비로코 | 속도향상 관련 (Browser Caching) 캐싱 활용 방법좀 [1] | 2013.09.01 by nike077 |
nike077 | 회원가입하기를 완료하고 나서, " 가입 인증 메일 확인바랍니다" 라는 메세지가 너무 빨리 사라집니다. [1] | 2013.09.01 by 컴퓨터매니아 |
zartin |
관리자 모드가 이상합니다.
[1]
![]() | 2013.09.01 by 컴퓨터매니아 |
연시랑 | 전에 올린 질문 다시 올립니다 ㅠ | |
늅늅이 | 복권모듈 질문... | |
키보 |
원하는 게시글만 모아서 새로운 게시판만들기 질문입니다.
[1]
![]() | 2013.08.31 by 딸꾹질 |
sohorang | 댓글창을 안보이게 설정하려면? [1] | 2013.08.31 by 딸꾹질 |
samsick92 | 다른컴퓨터에서 접속문제로 문의드립니다! [1] | 2013.08.31 by 윈컴이 |
울라탱 | 아파치(apache) 속도 문제... [3] | 2013.08.31 by 빛의바다 |
연시랑 | 멤버의 정보의 몇개를 공개/비공개 설정을 주고 싶습니다. [2] | 2013.08.31 by 연시랑 |
스밀걸 | 모바일에서는 위젯 사용이 안되나요? | |
samsick92 | 포트포워딩에 대하여 질문드립니다. [2] | 2013.08.31 by 미디안 |
레비어스 | 회원 닉네임 누르면 나오는 팝업 창 [1] | 2013.08.31 by 컴퓨터매니아 |
하늘384 | 관리자 로그인 문제 [1] | 2013.08.31 by 컴퓨터매니아 |
레비어스 | 조회수 아예 없애기 [2] | 2013.08.31 by 딸꾹질 |
믕수 | 아이디/비밀번호 찾기 오류납니다 ㅠㅠ [1] | 2013.08.31 by 컴퓨터매니아 |
두 번째 방법은 진정한 노가다~