[CSS] 이미지 없이 CSS와 JavaScript를 이용한 라운드 테이블(Round Table) 만들기

티스토리 뷰

프로그래밍/CSS

[CSS] 이미지 없이 CSS와 JavaScript를 이용한 라운드 테이블(Round Table) 만들기

카이(KAi) 2008. 6. 23. 03:58

아래에 2가지의 CSS를 통해 라운드 테이블을 구현한 방법을 소개 합니다

사용화면

테이블 + 자바스크립트 사용하는 방법
테이블에 속성에 설정값을 넣고, 자바스크립트로 DOM 객체를 동적 생성하여 구현하는 방법입니다.

이 방법은 테두리 색을 지정할 수 있다는 장점이 있습니다. 그리고 코드가 짧고, 단순하다는 점이 있습니다.
단점은 다른 옵션들은 없기 때문에 직접 코드를 수정해서 바꿔야 합니다.

<html>
<body>

<table id="ta" width="300" height="150" border="0" radius="3" rborder="#303030" rbgcolor="#F8F8F8">
<tr><td valign="top">asdasdasd as daw e</td></tr>
</table>

<script type="text/javascript">
window.onload=function(){
    roundTable("ta");
}

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;

    Space = Math.abs(trIDX - parseInt(radius));
    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>
</html>

[링크] SIR - CSS
[팁] 이미지 없이 모서리 라운드 테이블 만들어 최신글 구현

사용화면

Nifty Corners Cube 라이브러리를 이용하는 방법
라운드 테이블을 다양한 옵션을 적용해서 만들 수 있는 라이브러리로 다운로드는 아래 링크에서 받으시면 됩니다.

다운로드 : Nifty Corners Cube

이 코드는 다양한 옵션을 지원하므로 HTML 테그를 수정하지 않고도 쉽게 라운드 테이블을 꾸밀 수 있수 있습니다.

단점은 테두리(두께)는 사용 못하고 코드가 좀 길다는 점.
그리고 JavaScript 파일과 HTML 파일 경로가 다르면 .js 파일에서 경로를 수정해줘야 합니다.

그렇지만 사용하기 쉽게 다양한 예제를 만들어 두고 있어서, 따라하다 보면 쉽게 만들 수 있습니다.
```
<html>
<style>
div#box { width:18em; padding:20px; margin:0 auto;
    background:#E6E6E6; color:#000; }
</style>

<body> 
<div id="box">
라운드 테이블 예제
</div>

<script type="text/javascript" src="niftycube.js"></script>
<script type="text/javascript">
    window.onload=function(){
    Nifty("div#box","big");
}
</script>

</body>
</html>
```

'프로그래밍 > CSS' 카테고리의 다른 글

[CSS] 마우스 오버시 밑줄이 왼쪽에서 나타나서 오른쪽으로 사라지는 효과 (0)	2024.04.06
[CSS] text-overflow:ellipsis 를 FireFox 에서 사용하기 (3)	2008.12.07
[HTML/CSS] IE6/IE7, 마지막 글자 중복 버그(IE Duplicate Charsters Bug) (1)	2008.08.13
[CSS] FireFox 에서 가운데 정렬하기(text-align:center) 위한 3가지 방법 (8)	2008.08.06
[CSS] 테이블이나 레이어를 삐져나가는 글자 정리하기! - CSS 워드랩(Word Wrap) (0)	2008.06.22

공지사항

글 퍼가실때 꼭 읽어주세요.

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/04 »
일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

글 보관함

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

Kingdom

티스토리 뷰

[CSS] 이미지 없이 CSS와 JavaScript를 이용한 라운드 테이블(Round Table) 만들기

'프로그래밍 > CSS' 카테고리의 다른 글

티스토리툴바

개인정보

단축키

내 블로그

블로그 게시글

모든 영역