css 라운드 테이블

웹스터디/xhtmlcss
필요에 따라 자바스크립트 php등을 부분 결합해서 많은 응용이 가능합니다

전 이것을 폴더를 담는 그릇으로 자바 스크립트를 이용해서 열림 닫힘 박스로 만들어,
쪼물딱 거리고 있는 프로그램의 서브메뉴 표현부에 쓰고 있습니다
포토샵으로 라운드를 그려놓고 확대시켜 일일이 css 픽셀을 맞춰 표현했기에 라운드가 정확합니다


장점이라면
css를 이용한 것이기에 로딩이 빠르고
혹 기타사유로 로딩이 실패해도 div로 자리매김 했기에 그림 파일로 만든 것 보다는 좀더 표현이 완만합니다
자바 스크립트나 그림파일등은 간혹 로딩중 에러가 나올수 있는고 거기에
비하면 사용하는 입장에서느 꽤 쓸모 있지 않을까 싶습니다

더블어 php 또는 자바 스크립트의 변수등을 이용해서
여러가지 사용자 정의 색을 한계 범위 없이 만들어 낼수 있습니다
ㅡ 실상 이부분 때문에 만들었구 디비와 결합해서 사용하고 있습니다
그림 파일등으로 표현하게 되면 사용할수 있는 색은 고정될수 밖에 없습니다 ㅡ

단점이라면 라운드가 고정이라는 ...
자바 스크립트의 라운드 테이블등이 나와 있기도 하지만 그보다 부드러운 표현이 가능하고 이중 테두리 구조이기에
용도에 따라 표현하기 좋을거 같습니다







<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<style type="text/css">
body {
font: 14px Arial, Helvetica, sans-serif;
color: #000;
background-color: #fff;
}
/*
사용법: ┏━━━━━━━━━━━━ 높이와 넓이 ━━━━━━━━━━━━━┓
┃넓이 : 테이블을 감싸줄 DIV에서 조절 ┃
┃높이 : .CONTENTS에서 높이와 마진을 조절 ┃
┗━━━━━━━━━━━━ 높이와 넓이 ━━━━━━━━━━━━━┛ ┏━━━━━━━━━━━━ 바깥쪽 테이블 ━━━━━━━━━━━━━┓
┃테두리 색 : ┃
┃ .rt1에서 .rt6까지는 border-right border-left의 색을 조절 ┃
┃ .rt7 은 background-color로 라인의 색을 맞춰줌 ┃
┃ ┃
┃배경색 : ┃
┃.rt1에서 .rt6까지 background-color로 맞춤 ┃
┗━━━━━━━━━━━━ 바깥쪽 테이블 ━━━━━━━━━━━━━┛ ┏━━━━━━━━━━━━━ 안쪽 테이블 ━━━━━━━━━━━━━┓
┃테두리 색 : ┃
┃.rt1in1 에서 .rt2in4 까지는 border-right border-left의 색을 조절 ┃
┃.rt2in5 는 background-color로 라인의 색을 맞춰줌 ┃
┃ ┃
┃배경색 : ┃
┃.rt1in1 에서 .rt2in4 까지 background-color로 맞춤 ┃
┗━━━━━━━━━━━━━ 안쪽 테이블 ━━━━━━━━━━━━━┛ */ /* 바깥쪽 테이블 테이블: 시작 */
.rt1{
background-color: #fdfdfd;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
margin : 0px 0px 0px 0px;
padding : 0px;
overflow: hidden;
height : 4px;
}
.rt2{
background-color: #fdfdfd;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
margin : 0px 1px 0px 1px;
padding : 0px;
overflow: hidden;
height : 2px;
}
.rt3{
background-color: #fdfdfd;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
margin : 0px 2px 0px 2px;
padding : 0px;
overflow: hidden;
height : 1px;
}
.rt4{
background-color: #fdfdfd;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
margin : 0px 3px 0px 3px;
padding : 0px;
overflow: hidden;
height : 1px;
}
.rt5{
background-color: #fdfdfd;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
margin : 0px 4px 0px 4px;
padding : 0px;
overflow: hidden;
height : 1px;
}
.rt6{
background-color: #fdfdfd;
border-right: 2px solid #ccc;
border-left: 2px solid #ccc;
margin : 0px 5px 0px 5px;
padding : 0px;
overflow: hidden;
height : 1px;
}
.rt7{/* 상하단 라인 */
background-color: #ccc;
margin : 0px 7px 0px 7px;
padding : 0px;
overflow: hidden;
height : 1px;
}
.rtoutLRline{/* 좌우 라인 */
background-color: #fdfdfd;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
margin : 0px 0px 0px 0px;
padding : 0px;
overflow: hidden;
} /* 바깥쪽 테이블 테이블: 끝 */
/* 안쪽 테이블: 시작 */
.rt2in5{/* 상하단 라인 */
background-color: #000;
margin : 0px 8px 0px 8px;
padding : 0px;
overflow: hidden;
height : 1px;
}
.rt2in4{
background-color: #F2F2F2;
border-right: 2px solid #000;
border-left: 2px solid #000;
margin : 0px 6px 0px 6px;
padding : 0px;
overflow: hidden;
height : 1px;
}
.rt1in3{
background-color: #F2F2F2;
border-right: 1px solid #000;
border-left: 1px solid #000;
margin : 0px 6px 0px 6px;
padding : 0px;
overflow: hidden;
height : 1px;
}
.rt1in2{
background-color: #F2F2F2;
border-right: 1px solid #000;
border-left: 1px solid #000;
margin : 0px 5px 0px 5px;
padding : 0px;
overflow: hidden;
height : 2px;
}
.rt1in1{
background-color: #F2F2F2;
border-right: 1px solid #000;
border-left: 1px solid #000;
margin : 0px 4px 0px 4px;
padding : 0px;
overflow: hidden;
height : 1px;
} .rtinLRline{/* 좌우 라인 */
background-color: #F2F2F2;
border-right: 1px solid #000;
border-left: 1px solid #000;
margin : 0px 4px 0px 4px;
padding : 0px;
overflow: hidden;
} /* 안쪽 테이블: 끝 */
/* 내용 테이블 */
.CONTENTS{
margin : 0px 0px 0px 0px;
padding : 5px 10px 5px 10px;
height : 100px; }
</style> </head>
<body> css 처리한 라운드
<div style="margin : 0px 10px 0px 0px; width: 250px;">
<div class="rt7"></div>
<div class="rt6"></div><div class="rt5"></div>
<div class="rt4"></div><div class="rt3"></div>
<div class="rt2">
<div class="rt2in5"></div><div class="rt2in4"></div>
</div>
<div class="rt1">
<div class="rt1in3"></div><div class="rt1in2"></div>
<div class="rt1in1"></div>
</div>
<div class="rtoutLRline">
<div class="rtinLRline"> <div class="CONTENTS">
내용을 이곳에 넣으시면 됩니다 ^_____________________^*
</div> </div>
</div>
<div class="rt1">
<div class="rt1in1"></div><div class="rt1in2"></div>
<div class="rt1in3"></div>
</div>
<div class="rt2">
<div class="rt2in4"></div><div class="rt2in5"></div>
</div>
<div class="rt3"></div><div class="rt4"></div>
<div class="rt5"></div><div class="rt6"></div>
<div class="rt7"></div>
</div>
<br />
이미지 처리한 라운드( gif 파일 )
<br />
<img src="http://repter.ddam119.com/test/images/roundTable.gif" alt="이미지처리한 라운드 테이블" />
</body>
</html>


태그로 넣었더니 코드가 깨지네요 링크로 올립니다

http://repter.ddam119.com/test/roundTable.html

'웹스터디 > xhtmlcss' 카테고리의 다른 글

꾸며진 셀렉트박스 (decorated select box)  (0) 2008.05.30
select 박스 CSS  (0) 2008.05.30
CSS핵(hack) 정리 2  (0) 2008.05.30
html, css, javascript, DOM (Reference) -유용합니다.  (0) 2008.05.09
CSS핵(hack) 정리  (1) 2008.04.12
PNG 포멧 용법  (0) 2008.04.12
클릭하면 즐겨찾기(또는 북마크) 추가되는 소스  (0) 2008.04.06
버튼 클릭시 숨겨져있던 레이어 띄우기  (0) 2008.03.21
둥근 모서리 테이블  (0) 2008.03.21
여백조절하는 padding과 margin . 차이점을 한방에 알려드리죠.  (0) 2008.03.21
by Anna 안나 2008. 3. 1. 20:08

티스토리툴바