천

이미지 없는 라운드테이블 만들기 입니다.

이미지 없이 스타일쉬트로만 만들어 봅니다...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>이미지 없이 라운딩 박스 표현하기!</title>
<style type="text/css">
.rtop, .rbottom{display:block}
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden; background:#CCCCCC}
 .r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}
.box { background:#CCCCCC; padding:5px 10px; font-size:12px; font-size:12px}
</style>
</head>

<body>

<div id="container">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
 <div class="box">이미지 없이 라운딩 박스 표현하기!</div>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
 </div>

</body>
</html>

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>이미지 없이 라운딩 보더 표현하기!</title>
<style>
.rtop, .rbottom{display:block;}
.rtop *, .rbottom *{display:block; height:1px; overflow:hidden;}
.r1{margin:0 5px; background:#CCCCCC}
.r2{margin:0 3px; border-left:2px solid #CCCCCC; border-right:2px solid #CCCCCC;}
 .r3{margin:0 2px; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC;}
 .r4{margin:0 1px; height:2px; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC;}
 .box { margin:0; padding:5px 10px; border-left:#CCCCCC solid 1px; border-right:#CCCCCC solid 1px; font-size:12px}
 </style>
</head>

<body>
<div id="container" style="background: #fff">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
 <div class="box">이미지 없이 라운딩 보더 표현하기!</div>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b></div>
 </body>
</html>

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>이미지 없이 라운딩 박스 + 보더 표현하기!</title>
<style>
.rtop, .rbottom{display:block;}
.rtop *, .rbottom *{display:block; height:1px; overflow:hidden;}
.r1{margin:0 5px; background:#CCCCCC}
.r2{margin:0 3px; border-left:2px solid #CCCCCC; border-right:2px solid #CCCCCC; background:#EEEEEE}
 .r3{margin:0 2px; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; background:#EEEEEE}
 .r4{margin:0 1px; height:2px; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; background:#EEEEEE}
 .box{ margin:0; padding:5px 10px; border-left:#CCCCCC solid 1px; border-right:#CCCCCC solid 1px;  background:#EEEEEE; font-size:12px}
 </style>
</head>

<body>
<div id="container" style="background: #fff">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
 <div class="box">이미지 없이 라운딩 박스 + 보더 표현하기!</div>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b></div>
 </body>
</html>  

|

댓글 1개

오~ 좋네요 b 태그를 div로 변경해도 잘되는군요
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

8,188건
+
제목 글쓴이 날짜 조회
15-12-13 조회 2,916
15-12-11 조회 3,381
15-12-11 조회 3,078
15-12-11 조회 2,910
15-12-11 조회 2,563
15-12-11 조회 2,527
15-12-11 조회 2,529
15-12-10 조회 2,486
15-12-10 조회 2,552
15-12-10 조회 2,524
15-12-10 조회 2,771
15-12-09 조회 2,691
15-12-08 조회 3,616
15-12-08 조회 2,897
15-12-08 조회 2,646
15-12-08 조회 2,924
15-12-07 조회 3,008
15-12-07 조회 2,723
15-12-07 조회 3,103
15-12-07 조회 2,756
15-12-06 조회 2,879
15-12-06 조회 2,588
15-12-06 조회 2,828
15-12-05 조회 2,754
15-12-05 조회 3,009
15-12-05 조회 2,779
15-12-04 조회 2,647
15-12-04 조회 2,756
15-12-04 조회 2,809
15-12-03 조회 2,765
15-12-03 조회 2,796
15-12-03 조회 2,826
15-12-03 조회 2,904
15-12-03 조회 3,169
15-12-03 조회 2,690
15-12-02 조회 2,909
15-12-02 조회 2,857
15-12-02 조회 2,849
15-12-02 조회 2,993
15-12-02 조회 3,041
15-12-01 조회 2,735
15-12-01 조회 2,529
15-12-01 조회 2,605
15-11-30 조회 2,799
15-11-30 조회 2,955
15-11-30 조회 2,853
15-11-29 조회 2,623
15-11-29 조회 2,877
15-11-29 조회 2,685
15-11-28 조회 2,617
15-11-28 조회 2,648
15-11-28 조회 2,679
15-11-27 조회 2,771
15-11-27 조회 2,625
15-11-27 조회 2,638
15-11-26 조회 2,803
15-11-26 조회 3,664
15-11-25 조회 2,763
15-11-25 조회 2,717
15-11-25 조회 2,773
15-11-25 조회 2,570
15-11-25 조회 2,926
15-11-23 조회 2,838
15-11-23 조회 2,986
15-11-23 조회 2,814
15-11-21 조회 2,713
15-11-21 조회 2,608
15-11-21 조회 2,554
15-11-20 조회 2,555
15-11-20 조회 2,502
15-11-20 조회 2,631
15-11-20 조회 2,885
15-11-18 조회 2,785
15-11-18 조회 2,665
15-11-18 조회 2,649
15-11-17 조회 2,849
15-11-17 조회 2,608
15-11-17 조회 2,750
15-11-16 조회 2,635
15-11-16 조회 2,599
15-11-16 조회 2,785
15-11-15 조회 2,800
15-11-15 조회 2,657
15-11-15 조회 2,745
15-11-13 조회 3,601
15-11-12 조회 3,486
15-11-12 조회 2,940
15-11-12 조회 3,613
15-11-11 조회 2,745
15-11-11 조회 3,006
15-11-11 조회 3,260
15-11-09 조회 2,761
15-11-09 조회 2,990
15-11-09 조회 2,959
15-11-09 조회 2,717
15-11-09 조회 2,765
15-11-09 조회 3,011
15-11-06 조회 3,355
15-11-05 조회 2,814
15-11-05 조회 2,699