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

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

개발자 php
혀니천사
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 10년 전 · 363 · 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개

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

게시판 목록

팁게시판

디자인과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.
글쓰기

알고있으면 유용한 무료 디자인소스 사이트

#디자이너
덕덕서리
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

서버시간 알아내기

#개발자 #javascript
PPlayPixel
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

css 템플릿 사이트

#디자이너
덕덕서리
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

모바일 ui 사이트 [1]

#디자이너
덕덕서리
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

swip 사용 안하고, touchstart, touchmove 사용하여 슬라이드 구현

#퍼블리셔 #기타
돼지코구뇽
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

숫자를 한글표기로 바꾸기 입니다.

#개발자 #php
Angelos
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

Android,IOS 앱용 아이콘 템플릿 참고 사이트

#개발자 #mobile
인덱스웹
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

여러문장을 한번에 자동 줄바꿈 하기 입니다.

#개발자 #php
Angelos
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

서버 동시접속자 설정 변경하기

#개발자 #웹서버
인덱스웹
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

디렉토리의 모든 파일을 읽어 목록으로 만들기 입니다.

#개발자 #php
Angelos
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

PHP 버전이 낮아 imagerotate() 함수가 없을때 대신 사용하는 함수

#개발자 #php
뿌뿌하하
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

간단하게 자동으로 테이블 너비 조정하기 입니다. [1]

#개발자 #php
Angelos
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

문자열자르기 (문자별 다른 너비 해결)

#개발자 #php
PPASKRAN
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

테이블 복사 쿼리

#개발자 #mysql
서서로웹
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

많이들 사용하시는 Slider 에 대해서... [2]

#퍼블리셔 #기타
kkiplayer
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

현재 접속중인 사용자 나타내기

#개발자 #php
Angelos
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

mysql select 후 update 하기

#개발자 #mysql
서서로웹
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

다른 페이지로 이동하는 방법 3가지 입니다.

#개발자 #php
Angelos
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

한글문자열 자르는 법 입니다.

#개발자 #php
Angelos
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

mysql_query 전체 갯수 빨리 알아보기 입니다.

#개발자 #php
Angelos
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

POST값 통째로 인코딩하기, 배열, iconv

#개발자 #php
서서로웹
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

이메일주소 검사하기 입니다.

#개발자 #php
Angelos
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

php 확장자 내 맘대로 바꾸기 입니다.

#개발자 #웹서버
Angelos
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

문자열을 한 문자씩 나누어 출력하기 입니다.

#개발자 #php
Angelos
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

Node js 게시판 프로젝트 소개합니다.

#개발자 #node.js
ssnshero
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전