css로 만든 2중 라운드 테이블
인터넷정보2007. 10. 11. 22:12
웹표준에 맞게 코딩했으며 이미지를 포샵처리해서 일일이 비교 작업해서 만든것이니
정확합니다
테스트된 브라우져는 익스 파이어폭스 오페라 네스케이프등 4개의 브라우져에서
이상 없이 출력되는 것을 확인했습니다
5픽셀 라운드 처리된 것이며 2중 테두리를 가진 테이블입니다
바깥 테두리 바깥 배경 안쪽 테두리 안쪽 배경을 적절히 조절해서 사용하시면 됩니다
자바 스크립트로 만들면 편하겠지만 시간이 없어서 거기까진 아직 손을 대지 않았습니다
필요하신 분은 자바스크립트로 만들어 지정된 div 에서 쓸수 있게 하면 될 것입니다
단점은 지정된 라운드를 쓰기 때문에 더 둥근 테이블이나 바깥과 안쪽의 경계선이
5픽셀 이상 벌어지는 지원이 되지 않습니다
주의 하실것은 내용 들어가는 부분을 적절히 줄바꿈 태그로 지정된 넓이 만큼
벗어나지 않도록 해야 합니다 줄바꿈이 되지 않으면 우측 경계부분이 깨집니다
첫번째 링크는 소스 적용된 테이블의 모양을 보실수 있습니다
<!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: yellow;
}
/*
사용법:
┏━━━━━━━━━━━━ 높이와 넓이 ━━━━━━━━━━━━━┓
┃넓이 : 테이블을 감싸줄 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>
</body>
</html>
정확합니다
테스트된 브라우져는 익스 파이어폭스 오페라 네스케이프등 4개의 브라우져에서
이상 없이 출력되는 것을 확인했습니다
5픽셀 라운드 처리된 것이며 2중 테두리를 가진 테이블입니다
바깥 테두리 바깥 배경 안쪽 테두리 안쪽 배경을 적절히 조절해서 사용하시면 됩니다
자바 스크립트로 만들면 편하겠지만 시간이 없어서 거기까진 아직 손을 대지 않았습니다
필요하신 분은 자바스크립트로 만들어 지정된 div 에서 쓸수 있게 하면 될 것입니다
단점은 지정된 라운드를 쓰기 때문에 더 둥근 테이블이나 바깥과 안쪽의 경계선이
5픽셀 이상 벌어지는 지원이 되지 않습니다
주의 하실것은 내용 들어가는 부분을 적절히 줄바꿈 태그로 지정된 넓이 만큼
벗어나지 않도록 해야 합니다 줄바꿈이 되지 않으면 우측 경계부분이 깨집니다
첫번째 링크는 소스 적용된 테이블의 모양을 보실수 있습니다
<!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: yellow;
}
/*
사용법:
┏━━━━━━━━━━━━ 높이와 넓이 ━━━━━━━━━━━━━┓
┃넓이 : 테이블을 감싸줄 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>
</body>
</html>
'인터넷정보' 카테고리의 다른 글
| PHP 변수 속도 테스트 (0) | 2007.10.11 |
|---|---|
| 웹하드 - webHard (0) | 2007.10.11 |
| 음성게시판 모듈 (0) | 2007.10.11 |
| 웹 대용량 파일 업로드 모듈 (0) | 2007.10.11 |
| 셀렉트 박스 꾸미기 - select (0) | 2007.10.11 |
| 월의 몇째 주인지, 이달의 총 주 (0) | 2007.10.11 |
| [PHP] 영문과 한글 브라우저 구분 방법 (0) | 2007.10.11 |
| 간단한 페이징 소스 (0) | 2007.10.11 |
| nuSoap을 이용한 서버간의 파일전송 (0) | 2007.10.11 |
| 로딩바 로딩중입니다 표시하기 (0) | 2007.10.11 |
