이미지 없는 라운드테이블 만들기 ^^;

느낌좋은날

· 19년 전 · 조회 2501 2501 · 댓글 5 5

링크

http://www.html.it/articoli/nifty/index.html (221)

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

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

출처-phpschool + http://www.html.it/articoli/nifty/index.html<div class='small'>[이 게시물은 관리자님에 의해 2011-10-31 17:16:08 PHP & HTML에서 이동 됨]</div>

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 5개

천상재회

번호	제목	글쓴이	날짜	조회
6027	이미지 좌우로 이동 갤러리 입니다. #개발자 #javascript	혀니천사 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	311
6026	파일 확장자 검사 함수 입니다. #개발자 #php	혀니천사 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	267
6025	쉬운 replaceAll 입니다. #개발자 #javascript	혀니천사 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	244
6024	그누보드 최근 게시물 파싱하기 입니다. #개발자 #php	혀니천사 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	405
6023	[알고리즘]퀵 정렬(Quick Sort) #개발자 #php	슈와이 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	285
6022	php로 옥션 지마켓 11번가 쿠팡 위메프 등의 발주내역서 파일을 #개발자 #php	판도라g 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	284
6021	array_unique 배열중복값 제거 #개발자 #php	서로웹 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	277
6020	콤보스타일 메뉴 입니다. #개발자 #javascript	혀니천사 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	253
6019	쿠키를 이용한 레이어 공지창 입니다. #개발자 #javascript	혀니천사 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	224
6018	효과있는 텍스트 틱커 입니다. #개발자 #javascript	혀니천사 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	206
6017	[알고리즘]힙 정렬(Heap Sort) #개발자 #php	슈와이 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	245
6016	HTTP 인증 하기 입니다. #개발자 #php	혀니천사 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	232
6015	외부 문서 불러오기 입니다. #개발자 #javascript	혀니천사 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	198
6014	지정한 날짜까지 New 이미지를 띄워주기 입니다. #개발자 #javascript	혀니천사 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	163
6013	Common MySQL Queries 다양한 MySQL 쿼리 예제 #개발자 #mysql	서로웹 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	267
6012	메일 주소 검사하기 체크박스 입니다. #개발자 #javascript	혀니천사 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	207
6011	무단링크 금지하기 입니다. #개발자 #javascript	혀니천사 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	223
6010	간단하게 마우스,드래그,복사 등 막기 입니다. #개발자 #php	혀니천사 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	217
6009	DB백업 및 복원 #개발자 #mysql	서로웹 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	306
6008	페이지가 다른 사이트의 프레임에 갇히는 것을 막기 입니다. #개발자 #javascript	혀니천사 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	197
6007	다른 사이트로 이동시 또는 창 닫을 시에 자동 로그아웃 하기 입니다. #개발자 #php	혀니천사 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	201
6006	PHP에 MYSQL 와 자바스크립트 연동 예제 입니다. #개발자 #php	혀니천사 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	253
6005	input text 대문자만 받는 Jquery #개발자 #jquery	서로웹 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	217
6004	현재 페이지 URL 출력하기 입니다. #개발자 #php	혀니천사 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	310
6003	이미지 업로드와 미리보기 입니다. #개발자 #javascript	혀니천사 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	270

이미지 없는 라운드테이블 만들기 ^^;

링크

댓글 작성

댓글 5개

게시판 목록

팁게시판

이미지 좌우로 이동 갤러리 입니다.

파일 확장자 검사 함수 입니다.

쉬운 replaceAll 입니다.

그누보드 최근 게시물 파싱하기 입니다.

[알고리즘]퀵 정렬(Quick Sort)

php로 옥션 지마켓 11번가 쿠팡 위메프 등의 발주내역서 파일을

array_unique 배열중복값 제거

콤보스타일 메뉴 입니다.

쿠키를 이용한 레이어 공지창 입니다.

효과있는 텍스트 틱커 입니다.

[알고리즘]힙 정렬(Heap Sort)

HTTP 인증 하기 입니다.

외부 문서 불러오기 입니다.

지정한 날짜까지 New 이미지를 띄워주기 입니다.

Common MySQL Queries 다양한 MySQL 쿼리 예제

메일 주소 검사하기 체크박스 입니다.

무단링크 금지하기 입니다.

간단하게 마우스,드래그,복사 등 막기 입니다.

DB백업 및 복원

페이지가 다른 사이트의 프레임에 갇히는 것을 막기 입니다.

다른 사이트로 이동시 또는 창 닫을 시에 자동 로그아웃 하기 입니다.

PHP에 MYSQL 와 자바스크립트 연동 예제 입니다.

input text 대문자만 받는 Jquery

현재 페이지 URL 출력하기 입니다.

이미지 업로드와 미리보기 입니다.