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

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

느낌좋은날
프로필 보기이 회원 글보기
 · 18년 전 · 2488 · 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개

천상재회
프로필 보기이 회원 글보기
 18년 전
이 좋은 것을.....

감사합니다....

제 홈에 언능 가져다가 해 볼렵니다...^^
느낌좋은날
프로필 보기이 회원 글보기
 18년 전
저도 저 곳 게시판 보다 소스를 넣어서 봤는데 좋더라구요 얼른 업어가세요 ^^;
열정
프로필 보기이 회원 글보기
 18년 전
테스트해본결과.....넘좋군요...감사합니다...^^
뮤죤
프로필 보기이 회원 글보기
 18년 전
너무 좋음. ^^ 고맙습니다.
swinter
프로필 보기이 회원 글보기
 17년 전
감사합니다.

게시글 목록

번호 제목
10853
JavaScript 속도를 위해 데이터를 접속자 메모리에
10852
기타 새창띄우기(ctrl + N) 금지 소스 입니다
10850
MySQL 사이트 첫페이지 로딩 속도 개선 (캐싱처리) 1
28848
HTML 사용자가 사이트를 떠나는지 체크 할 수 있는 자바스크립트 입니다
10849
JavaScript 백그라운드에음악걸기
28847
HTML 배경에 그림스타일지정
10846
기타 메신저형식의광고 2
28846
HTML 많이 쓰이는 자바스크립트
10845
기타 마우스오버시나타나는레이어
28845
HTML 마우스로 이미지크기 변경하기
10844
JavaScript 도메인 주소에 자동으로 www 붙이기 (php)
28844
HTML 다음부동산매물스크립트1
28843
HTML 다음부동산매물스크립트
10843
JavaScript 다각형이미지슬라이드쇼(익스네츠)
28842
HTML 날짜 형식 입력 받은 값 확인하기
10842
기타 날짜 체크, 그날까지'new.gif'이미지 띄우기
28841
HTML 그림클릭시 레이어 띄우기
10841
MySQL 그림을 디비에 저장하는 방법
28840
HTML 그림 앨범 스크립트
28839
HTML 간단한 팝업오브젝트 예제
10840
JavaScript 가운데 정렬된 홈페이지에서 따라다니는 레이어
10839
기타 마우스 오버시 윈도우창 확장 / 축소
24791
전자상거래 개인정보보호지침 및 해설서입니다. 2
24789
전자상거래 표준약관입니다. 1
10836
기타 외부 링크 막기 2
28838
HTML [SQL] 게시물과 각 게시물에 달린 코멘트 갯수 가져 오기
24788
소유권이전등기양식
24787
상속재산분할협의서
24786
계약서 농지임대차계약서
28837
HTML 다운로드 이어 받기 및 전송속도 제한 구현
28834
HTML URL옆에 뜨는 숏컷아이콘만들기. 2
10835
JavaScript 클릭시 펼쳐지는 메뉴
10834
정규표현식 수수료계산
28833
HTML 기본적인 페이징
28829
HTML 만 19세 확인하기 3
10833
JavaScript IE에서 쓰는 CSS filter 사이트 소개
10831
기타 소개-문서 전체를 중앙 정렬하기 1
10830
기타 나만의 새로운 태그속성 만들어 쓰기
10829
JavaScript iconv 함수 사용시 일부 글자가 변환되지 않는경우
28828
HTML 금액에 점찍고 한글 표시하기
10828
PHP 파일이름의 확장자로 파일 종류를 확인하는 함수
10827
MySQL mysql link 추가로 만들기
10823
기타 sajax.php 소스 코드 분석 (자세한 한글 주석) 3
10822
기타 [펌] SAMBA 설정
10821
JavaScript 1-1000 까지 누락된 숫자 구하기
10820
MySQL mssql 에서 mysql 으로 테이블 및 데이타 이전
28822
HTML 간단하게 만들어본 프레임워크 5
10814
PHP 이미지 없는 라운드테이블 만들기 ^^; 5 현재글
10812
Flash vr기능-도와주셈 1
10811
기타 [펌] 리눅스 시간 설정하기
10810
JavaScript mod_cband 간단 정리
10808
Flash 간단한 플래시 보완패치입니다. 1
10804
JavaScript cs..cs2 버젼...윈도우즈 탐색기프리뷰 패치(psd,ai)... 3
10797
기타 작업한 레이어들을 하나의 레이어에 합치기 6
28821
HTML IeTagConvertor
10796
기타 ncftp 120%활용 (3) 한줄의 미학 ncftpget
10795
JavaScript ncftp 서브 디렉토리 포함 모두 전송
10794
JavaScript 테이블 각 row 마우스오버시 색깔바꾸기
10792
기타 이미지 에러파일 처리 1
10789
MySQL apache - mod_ssl 설치하기 2
10785
MySQL 인터넷 쇼핑몰에서의 DBMS 벤치마크 테스트 3
10781
Flash 플래시에서 간단하게 fla화일 용량줄이기 두가지 팁 3
10780
정규표현식 자바스크립트 이메일 체크 함수
28820
HTML PHP에서 홈페이지 주소 검사
10776
PHP 문자셋(인코딩 바꾸는 팁 3
10769
JavaScript 당장써먹어야 할 팁) 앞으로 gif는 물러가고 png시대가 될거 같네요 6
10766
JavaScript full-down메뉴[펌] 2
10765
JavaScript 플래쉬 무비 전체 화면으로 뜨게 하는 fscommand
10758
JavaScript 코딩시 테이블을 줄입시다. 6
28818
기타 HTML와 CSS의 쓰임(짧은글) 1
10754
JavaScript 모든 폰트 설정 한번에 바꾸기(식별자 *의 사용법) 3
10753
기타 테이블의 1px 선은 이렇게 하면 좋아요
10750
기타 주민등록번호를 생년월일로 바꾸는 소스입니다 2
28817
HTML 자바스크립트에서 변수 없애기
10749
기타 httpd.conf 슬래시 ( / ) 경로 붙이지 않아도 실해되도록 설정
10748
기타 RHEL4 DVD로 Rebuild
10747
기타 KoreLinux 2004 Workstation에 Oracle 10g Database를 설치하는 방법
10746
JavaScript [소개]윈도우 미디어 플레이어 - 컨트롤 버튼
10740
JavaScript iframe사용시 높이 자동 조정 5
10738
Flash 플래시 무비에 레이어 올리기 1
10735
JavaScript 도움말 띄우기 - 관리자 페이지에 있는 것을 추림 2
10734
기타 [펌펄] Perl이나 PHP로 한글 파싱,,,
28812
HTML 포토샵 PSD파일과 일러스트 AI파일 윈도우탐색기로 미리보기 .. 4
10730
기타 CS2 사진보정 (Shadow/Highlight) 3
10726
Flash 웹에서 찾은 플래시8과 드림위버8의 한글도움말 3
10725
기타 자바스크립트 기초문서
28811
HTML 보안, 접근 제한 설정 access.conf
10724
JavaScript 숫자를 한글로 변환하기
10723
JavaScript 디렉터리 파일 찾기 순서 DirectoryIndex
10722
PHP [펌] 타도메인간 쿠키 공유하기 | Tip/Tech
10721
기타 사용자의 홈 페이지 루트 위치 UserDir
10717
PHP apache mod_rewrite 설치시 팁 | 3
10716
기타 Apache 보안 팁
10715
JavaScript 문서루트 위치 DocumentRoot
10713
Linux lilo.conf 1
10712
기타 웹 서버의 실행자 User/Group
10711
기타 lilo.conf 에서 해상도 조절, 부팅방법 조절
10710
JavaScript 웹 서버가 기다리는 포트(Port)
10709
JavaScript logrotate.conf의 설정및 옵션에 대한 설명
10708
기타 서버 타입 설정 ServerType
이전 다음
전체 목록