태그코리아 - http://www.tagkorea.pe.kr

태그코리아

[야후에서도 못찾아?? 그럼.. 캐넌이 찾아주까??..^^;]



    
H O M E
회원가입인사
태그게시판
자유게시판
추천사이트
실시간채팅방
  태 그 연 습 장



자연을 닮은 사람들
수원개인용달

홈페이지 태그[Tip]

www.tagkorea.pe.kr


[css] 라운드 박스 만들기 조회수 : 5,757, 2009-07-10 12:46:23
tagkorea
스타일시트를 이용해서 박스를 만드는 소스입니다.
이 소스의 포인트는 모서리 부분의 라운드 처리입니다.


먼저 아래 소스를 <head> 와 </head> 사이에 넣으세요.



<style type="text/css">
.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;font-family: "맑은 고딕", 돋움; }
</style>




아래 소스는 본문에 들어갈 내용입니다.



<div align="center" id="container" style="background: #fff;width:595px;">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<div class="box">
<font style='color:red;font-size:15px;'>태그코리아 입니다.<br>이 곳에 쓰실말을 입력하시면 됩니다.</font>
</div>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
댓글댓글 : 5 인쇄 추천 목록
정하영 2009-07-26 17:02:57  
감사합니다
김다영 2010-02-26 09:57:18  
감사.
최용일 2010-03-28 15:48:39  
네 좋은 정보 머리에 담고 갑니다^^
김진하 2010-06-24 17:01:34  
ㄳ함다~
달마샤 2013-01-23 19:28:01  
ㄳ합니다.


번호 제목 작성자 작성일 추천수 조회수
65  [css] 버튼태그에 이미지 삽입하는 스타일시트 덧글9  tagkorea 2009/08/05 263 10631
64  특정 글자에 줄을 그려주는 태그 덧글3  tagkorea 2009/08/01 248 6621
63  테이블이 늘어나도 안의 내용을 상단으로 배치시키는 소스  tagkorea 2009/08/01 233 4597
62  [css]테이블안의 내용 여백 지정하기 덧글1  tagkorea 2009/08/01 276 4759
61  [css] 마우스 포인터 변환시키는 스타일태그 덧글3  tagkorea 2009/07/30 259 5793
60  <pre> 태그와 <xmp> 태그 활용하기  tagkorea 2009/07/27 178 3171
59  우표 모양 테이블 소스 덧글1  tagkorea 2009/07/26 196 5656
58  테이블의 테두리가 세로만 나오게 하는 소스 덧글2  tagkorea 2009/07/26 200 3678
57  테이블의 테두리가 가로만 나오게 하는 소스  tagkorea 2009/07/26 189 2857
56  홈페이지 로딩속도에 대해서.. 덧글2  tagkorea 2009/07/24 111 3427
55  테이블을 확대 축소하는 소스 덧글3  tagkorea 2009/07/20 241 3350
54  마퀴태그를 응용한 인트로 덧글4  tagkorea 2009/07/19 202 5282
53  [그림판]을 이용해 이미지위에 문자 삽입하기 덧글6  tagkorea 2009/07/13 197 4835
 [css] 라운드 박스 만들기 덧글5  tagkorea 2009/07/10 200 5757
51  [css] 스타일시트로 표현하는 롤오버 이미지 덧글1  tagkorea 2009/07/09 179 4777
Copyright 1999-2018 Zeroboard


- 태그코리아소개 - 광고문의 - 제휴문의 -

Copyright@ TAGKOREA 2000-2009 All Rights reserved.