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

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

혀니천사
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 9년 전 · 353 · 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로 변경해도 잘되는군요

게시글 목록

번호 제목
12143
JavaScript 구글 맞춤검색 설정 방법, google custom search
12141
PHP php in_array 사용법 배열값 확인하기 1
12140
PHP ob_start callback에 대한 설명
12139
PHP call_user_func 함수 재정의
12131
MySQL 1000만건 게시판에 도전합니다. 두번째 7
20381
기타 ie 와 크롬 폰트 부분해결할 수 있는건지좀 알려주시면 감사드립니다. 1
12130
MySQL Join 을 이용한 delete
12129
PHP 정규식 (Regular Expression Functions) 입니다.
12128
PHP Apache 설치후 httpd.conf 설정
12127
PHP 미리 정의된 변수들 입니다.
12126
PHP array_rand 관련 입니다.
12122
MySQL 1000만건 게시판에 도전합니다. 첫번째 3
12121
MySQL select 해서 바로 insert하기
12120
MySQL 필드 내용에서 특정문자열을 기준으로 문자열 자르기
346
초간단 모바일인식 리다이렉트 스크립트 소스 1
12117
PHP PHP최근메뉴얼(도움말)파일입니다 2
12116
PHP 시스템 정보를 알아볼 수 있는 방법입니다.
12114
PHP number_format 시 빈값 예외처리 1
345
motiongrapic google play store logo intro 모션그래픽 구글 플레이스토어 인트로
344
motiongrapic text underline 모션그래픽소스 텍스트에 밑줄긋기
343
포토샵 photoshop 설정 - preferences
12113
웹서버 Could not reliably determine the server's fully qualified domain name
12102
PHP 텔레그램 푸쉬 봇 10
12101
OS 짧은 주소 만들기, htaccess RewriteRule 리다이렉션
12100
OS 파일분할 분할압축 해제
이전 다음
전체 목록