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

느낌좋은날

· 19년 전 · 조회 2500 2500 · 댓글 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개

천상재회

번호	제목	글쓴이	날짜	조회
6052	pc 모바일 체크 #개발자 #php	서로웹 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	562
6051	계정 사용량(용량) 확인 #개발자 #php	서로웹 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	551
6050	Html, script 등 기초부터 배우실 분에게 유용한 #디자이너	m모비딕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	927
6049	textarea 입력한 엔터값 출력하기 [1] #개발자 #php	서로웹 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	318
6048	소수점 반올림 버림 #개발자 #mysql	서로웹 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	542
6047	제가 아는 무료 이미지 사이트 모음 [3] #디자이너	요메토 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	668
6046	jQuery version 1.9 이상에서 $.browser 사용하기 #개발자 #jquery	띠아블 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	668
6045	에러 로그파일 생성하기 #개발자 #php	서로웹 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	610
6044	간단한 특정 IP 차단하기 입니다. [1] #개발자 #php	혀니천사 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	571
6043	다른 사이트의 내용을 자동으로 긁어오기 입니다. #개발자 #php	혀니천사 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	741
6042	후이즈검색 하기 입니다. #개발자 #php	혀니천사 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	462
6041	그래프 그리기 입니다. #개발자 #php	혀니천사 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	531
6040	자바스크립트로 구현한 number_format() 입니다. #개발자 #javascript	혀니천사 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	409
6039	금액 관련 숫자를 한글로 변환하기 입니다. #개발자 #javascript	혀니천사 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	362
6038	PHP 날짜 계산 관련 함수 #개발자 #php	서로웹 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	370
6037	jQuery 1.x와 2.x 버전 동시에 사용하기 #개발자 #jquery	서로웹 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	354
6036	요일, 시간마다 다른 CSS 제어하기 입니다. #개발자 #php	혀니천사 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	357
6035	iframe내의 id셀렉터 입니다. #개발자 #php	혀니천사 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	324
6034	사업자 등록번호 검사하기 입니다. #개발자 #javascript	혀니천사 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	331
6033	웹디자인할때 유용한 색상조합 [4] #디자이너	디자몽 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	810
6032	폼전송을 통해서 페이지를 이동하기 입니다. #개발자 #php	혀니천사 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	341
6031	항상 같은곳에 광고창 만들기 입니다. #개발자 #javascript	혀니천사 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	293
6030	부메뉴 나오게 하기 입니다. #개발자 #javascript	혀니천사 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	329
6029	특정문자 제거하기 입니다. #개발자 #javascript	혀니천사 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	291
6028	휴대폰번호 검사 하기 입니다. #개발자 #javascript	혀니천사 프로필 보기 이 회원 글보기 이 회원의 댓글보기	9년 전	328

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

링크

댓글 작성

댓글 5개

게시판 목록

팁게시판

pc 모바일 체크

계정 사용량(용량) 확인

Html, script 등 기초부터 배우실 분에게 유용한

textarea 입력한 엔터값 출력하기 [1]

소수점 반올림 버림

제가 아는 무료 이미지 사이트 모음 [3]

jQuery version 1.9 이상에서 $.browser 사용하기

에러 로그파일 생성하기

간단한 특정 IP 차단하기 입니다. [1]

다른 사이트의 내용을 자동으로 긁어오기 입니다.

후이즈검색 하기 입니다.

그래프 그리기 입니다.

자바스크립트로 구현한 number_format() 입니다.

금액 관련 숫자를 한글로 변환하기 입니다.

PHP 날짜 계산 관련 함수

jQuery 1.x와 2.x 버전 동시에 사용하기

요일, 시간마다 다른 CSS 제어하기 입니다.

iframe내의 id셀렉터 입니다.

사업자 등록번호 검사하기 입니다.

웹디자인할때 유용한 색상조합 [4]

폼전송을 통해서 페이지를 이동하기 입니다.

항상 같은곳에 광고창 만들기 입니다.

부메뉴 나오게 하기 입니다.

특정문자 제거하기 입니다.

휴대폰번호 검사 하기 입니다.