[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>
```