웹표준에 맞게 코딩했으며 이미지를 포샵처리해서 일일이 비교 작업해서 만든것이니 정확합니다
테스트된 브라우져는 익스 파이어폭스 오페라 네스케이프등 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;
}
/*
사용법:
┏━━━━━━━━━━━━ 높이와 넓이 ━━━━━━━━━━━━━┓
┃넓이 : 테이블을 감싸줄 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: #ccc;
margin : 0px 8px 0px 8px;
padding : 0px;
overflow: hidden;
height : 1px;
}
.rt2in4{
background-color: #F2F2F2;
border-right: 2px solid #ccc;
border-left: 2px solid #ccc;
margin : 0px 6px 0px 6px;
padding : 0px;
overflow: hidden;
height : 1px;
}
.rt1in3{
background-color: #F2F2F2;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
margin : 0px 6px 0px 6px;
padding : 0px;
overflow: hidden;
height : 1px;
}
.rt1in2{
background-color: #F2F2F2;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
margin : 0px 5px 0px 5px;
padding : 0px;
overflow: hidden;
height : 2px;
}
.rt1in1{
background-color: #F2F2F2;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
margin : 0px 4px 0px 4px;
padding : 0px;
overflow: hidden;
height : 1px;
}
.rtinLRline{/* 좌우 라인 */
background-color: #F2F2F2;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
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>
출처:http://cafe.naver.com/pspboolp/411
'인터넷정보' 카테고리의 다른 글
| 익스플로러7 업데이트후 '이 웹 페이지에서 클립보드에 엑세스 할 수 있도록 허용하시겠습니까?' 란 메시지가 뜰 때 조치방법 (0) | 2008.03.13 |
|---|---|
| 익스플로러7 업데이트후 '이 웹 페이지에서 클립보드에 엑세스 할 수 있도록 허용하시겠습니까?' 란 메시지가 뜰 때 조치방법 (0) | 2008.03.13 |
| FF,파폭,파이어폭스,모질라에서 손모양 커서 (0) | 2008.03.13 |
| FF,파폭,파이어폭스,모질라에서 손모양 커서 (0) | 2008.03.13 |
| css로 만든 DIV 2중 라운드 테이블 (0) | 2008.03.07 |
| 메모장(노트패드,Note Pad)의 상태표시줄이 비활성화되어 선택이 안될때 대처법 (0) | 2008.03.06 |
| 메모장(노트패드,Note Pad)의 상태표시줄이 비활성화되어 선택이 안될때 대처법 (0) | 2008.03.06 |
| 파이어폭스(FF,모질라)에서 mp3, avi, mpg 파일 재생하기 - 음악 노래 재생 방법 (0) | 2008.02.26 |
| 파이어폭스(FF,모질라)에서 mp3, avi, mpg 파일 재생하기 - 음악 노래 재생 방법 (0) | 2008.02.26 |
| Embed 태그 정리 (0) | 2008.02.26 |