테스트 사이트 - 개발 중인 베타 버전입니다
SIR

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

혀니천사
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 9년 전 · 352 · 1

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

<!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개

불량학생
프로필 보기이 회원 글보기이 회원의 댓글보기
 9년 전
오~ 좋네요 b 태그를 div로 변경해도 잘되는군요

게시글 목록

번호 제목
12307
JavaScript 테이블 각 row 마우스오버시 색깔바꾸기 입니다.
12306
JavaScript png 24비트 투명처리하기 입니다.
12305
JavaScript full-down메뉴 자바스크립트 입니다.
12304
JavaScript iframe사용시 높이 자동 조정하기 입니다.
12303
JavaScript 계산기
12302
JavaScript 숫자를 한글로 변환하기 입니다.
12301
JavaScript 아이프레임 자동으로 늘어나는 자바 스크립트 입니다.
12300
JavaScript 끊기지 않는 배너 롤링 입니다.
12299
기타 랜섬에 당한 화일 복구
12298
JavaScript id값 변수명으로 치환 예제 자바스크립트 입니다.
12297
JavaScript 상태바의 링크 주소 감추기 입니다.
12296
JavaScript 가짜 카운터 달기 입니다.
12295
JavaScript 홈에 머문시간을 제목표시줄과 상태바에 실시간으로 알려주기 입니다.
12294
JavaScript prompt 와 alert 응용 자바스크립트 예제 입니다.
12293
JavaScript prompt 와 alert 간단한 자바스크립트 예제 입니다.
12292
jQuery 간단한 탭 제이쿼리
12291
jQuery 간단한 셀렉트 드롭다운 제이쿼리
12290
JavaScript 문서내 이미지갯수 출력하기 입니다.
12289
JavaScript 내용 복사해서 붙어넣기 하면 출처 따라오는 자바스크립트입니다.
12288
JavaScript 팝업창 지정한 시간대에 예약 열기 입니다.
12287
JavaScript 접속때마다 음악 다르게 나오기 입니다.
12286
JavaScript 자동 스크롤 메뉴 관련 입니다.
12285
JavaScript 이 브라우저로 몇페이지나 보았나 확인하기 입니다.
12284
JavaScript 사용자 브라우저의 펄러그인 목록 출력하기 입니다.
12283
JavaScript 상태표시줄 제어 + 간단한 복사 제어 하기 입니다.
이전 다음
전체 목록