천

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

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

<!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,921
15-12-11 조회 3,385
15-12-11 조회 3,086
15-12-11 조회 2,919
15-12-11 조회 2,576
15-12-11 조회 2,535
15-12-11 조회 2,541
15-12-10 조회 2,496
15-12-10 조회 2,559
15-12-10 조회 2,534
15-12-10 조회 2,780
15-12-09 조회 2,696
15-12-08 조회 3,625
15-12-08 조회 2,899
15-12-08 조회 2,653
15-12-08 조회 2,927
15-12-07 조회 3,012
15-12-07 조회 2,727
15-12-07 조회 3,109
15-12-07 조회 2,759
15-12-06 조회 2,880
15-12-06 조회 2,594
15-12-06 조회 2,835
15-12-05 조회 2,760
15-12-05 조회 3,017
15-12-05 조회 2,784
15-12-04 조회 2,651
15-12-04 조회 2,759
15-12-04 조회 2,816
15-12-03 조회 2,768
15-12-03 조회 2,797
15-12-03 조회 2,833
15-12-03 조회 2,905
15-12-03 조회 3,174
15-12-03 조회 2,695
15-12-02 조회 2,917
15-12-02 조회 2,862
15-12-02 조회 2,852
15-12-02 조회 3,002
15-12-02 조회 3,049
15-12-01 조회 2,740
15-12-01 조회 2,533
15-12-01 조회 2,612
15-11-30 조회 2,802
15-11-30 조회 2,959
15-11-30 조회 2,860
15-11-29 조회 2,628
15-11-29 조회 2,882
15-11-29 조회 2,687
15-11-28 조회 2,622
15-11-28 조회 2,651
15-11-28 조회 2,684
15-11-27 조회 2,773
15-11-27 조회 2,628
15-11-27 조회 2,643
15-11-26 조회 2,807
15-11-26 조회 3,669
15-11-25 조회 2,771
15-11-25 조회 2,725
15-11-25 조회 2,778
15-11-25 조회 2,574
15-11-25 조회 2,936
15-11-23 조회 2,845
15-11-23 조회 2,993
15-11-23 조회 2,822
15-11-21 조회 2,716
15-11-21 조회 2,612
15-11-21 조회 2,559
15-11-20 조회 2,556
15-11-20 조회 2,505
15-11-20 조회 2,634
15-11-20 조회 2,889
15-11-18 조회 2,789
15-11-18 조회 2,676
15-11-18 조회 2,654
15-11-17 조회 2,854
15-11-17 조회 2,611
15-11-17 조회 2,753
15-11-16 조회 2,641
15-11-16 조회 2,605
15-11-16 조회 2,793
15-11-15 조회 2,802
15-11-15 조회 2,663
15-11-15 조회 2,749
15-11-13 조회 3,609
15-11-12 조회 3,491
15-11-12 조회 2,952
15-11-12 조회 3,621
15-11-11 조회 2,749
15-11-11 조회 3,011
15-11-11 조회 3,266
15-11-09 조회 2,762
15-11-09 조회 2,992
15-11-09 조회 2,965
15-11-09 조회 2,722
15-11-09 조회 2,769
15-11-09 조회 3,024
15-11-06 조회 3,360
15-11-05 조회 2,820
15-11-05 조회 2,703