티스토리 뷰

프로그래밍/CSS 3.0

CSS2에서 DIV 라운드(라운딩) 처리하기

쇠주는참이슬 2012. 4. 2. 09:14

CSS3 에서는 Border-radius 속성만으로 간단하게 라운딩 처리가 가능하지만.
CSS2는 완전 노가다를 해야한다.

언젠간 써먹을 곳이 있을것 같으므로...
퍼온거긴 한데 출처를 모르겠음..
문제가 발생한다면 바로 글 내리겠습니다. 연락주세요.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko"> 
<head> 
<style type="text/css"> 
body { 
    font: 14px Arial, Helvetica, sans-serif; 
    color: #000; 
    background-color: yellow; 
} 
/* 
 사용법: 

┏━━━━━━━━━━━━  높이와 넓이  ━━━━━━━━━━━━━┓ 
┃넓이  : 테이블을 감싸줄 DIV에서 조절                                            ┃ 
┃높이  : .CONTENTS에서 높이와 마진을 조절                                  ┃ 
┗━━━━━━━━━━━━  높이와 넓이  ━━━━━━━━━━━━━┛ 

┏━━━━━━━━━━━━ 바깥쪽 테이블 ━━━━━━━━━━━━━┓ 
┃테두리 색 :                                                                                ┃ 
┃ .rt1에서 .rt6까지는 border-right border-left의 색을 조절                  ┃ 
┃ .rt7 은 background-color로 라인의 색을 맞춰줌                                ┃ 
┃                                                                                                ┃ 
┃배경색    :                                                                                  ┃ 
┃.rt1에서 .rt6까지 background-color로 맞춤                                      ┃ 
┗━━━━━━━━━━━━ 바깥쪽 테이블 ━━━━━━━━━━━━━┛ 

┏━━━━━━━━━━━━━ 안쪽 테이블 ━━━━━━━━━━━━━┓ 
┃테두리 색 :                                                                                ┃ 
┃.rt1in1 에서 .rt2in4 까지는 border-right border-left의 색을 조절          ┃ 
┃.rt2in5 는 background-color로 라인의 색을 맞춰줌                            ┃ 
┃                                                                                                ┃ 
┃배경색    :                                                                                  ┃ 
┃.rt1in1 에서 .rt2in4 까지 background-color로 맞춤                            ┃ 
┗━━━━━━━━━━━━━ 안쪽 테이블 ━━━━━━━━━━━━━┛ 

*/ 

/* 바깥쪽  테이블: 시작 */ 
.rt1{ 
    background-color: #fdfdfd; 
    border-right: 1px solid #ccc; 
    border-left: 1px solid #ccc; 
    margin  : 0px  0px 0px 0px; 
    padding : 0px; 
    overflow: hidden; 
    height  : 4px; 
} 
.rt2{ 
    background-color: #fdfdfd; 
    border-right: 1px solid #ccc; 
    border-left: 1px solid #ccc; 
    margin  : 0px  1px 0px 1px; 
    padding : 0px; 
    overflow: hidden; 
    height  : 2px; 
} 
.rt3{ 
    background-color: #fdfdfd; 
    border-right: 1px solid #ccc; 
    border-left: 1px solid #ccc; 
    margin  : 0px  2px 0px 2px; 
    padding : 0px; 
    overflow: hidden; 
    height  : 1px; 
} 
.rt4{ 
    background-color: #fdfdfd; 
    border-right: 1px solid #ccc; 
    border-left: 1px solid #ccc; 
    margin  : 0px  3px 0px 3px; 
    padding : 0px; 
    overflow: hidden; 
    height  : 1px; 
} 
.rt5{ 
    background-color: #fdfdfd; 
    border-right: 1px solid #ccc; 
    border-left: 1px solid #ccc; 
    margin  : 0px  4px 0px 4px; 
    padding : 0px; 
    overflow: hidden; 
    height  : 1px; 
} 
.rt6{ 
    background-color: #fdfdfd; 
    border-right: 2px solid #ccc; 
    border-left: 2px solid #ccc; 
    margin  : 0px  5px 0px 5px; 
    padding : 0px; 
    overflow: hidden; 
    height  : 1px; 
} 
.rt7{/* 상하단 라인 */ 
    background-color: #ccc; 
    margin  : 0px  7px 0px 7px; 
    padding : 0px; 
    overflow: hidden; 
    height  : 1px; 
} 
.rtoutLRline{/* 좌우 라인 */ 
    background-color: #fdfdfd; 
    border-right: 1px solid #ccc; 
    border-left: 1px solid #ccc; 
    margin  : 0px  0px 0px 0px; 
    padding : 0px; 
    overflow: hidden; 
} 

/* 바깥쪽  테이블: 끝 */ 


/* 안쪽 테이블: 시작 */ 
.rt2in5{/* 상하단 라인 */ 
    background-color: #000; 
    margin  : 0px  8px 0px 8px; 
    padding : 0px; 
    overflow: hidden; 
    height  : 1px; 
} 
.rt2in4{ 
    background-color: #F2F2F2; 
    border-right: 2px solid #000; 
    border-left: 2px solid #000; 
    margin  : 0px  6px 0px 6px; 
    padding : 0px; 
    overflow: hidden; 
    height  : 1px; 
} 
.rt1in3{ 
    background-color: #F2F2F2; 
    border-right: 1px solid #000; 
    border-left: 1px solid #000; 
    margin  : 0px  6px 0px 6px; 
    padding : 0px; 
    overflow: hidden; 
    height  : 1px; 
} 
.rt1in2{ 
    background-color: #F2F2F2; 
    border-right: 1px solid #000; 
    border-left: 1px solid #000; 
    margin  : 0px  5px 0px 5px; 
    padding : 0px; 
    overflow: hidden; 
    height  : 2px; 
} 
.rt1in1{ 
    background-color: #F2F2F2; 
    border-right: 1px solid #000; 
    border-left: 1px solid #000; 
    margin  : 0px  4px 0px 4px; 
    padding : 0px; 
    overflow: hidden; 
    height  : 1px; 
} 

.rtinLRline{/* 좌우 라인 */ 
    background-color: #F2F2F2; 
    border-right: 1px solid #000; 
    border-left: 1px solid #000; 
    margin  : 0px  4px 0px 4px; 
    padding : 0px; 
    overflow: hidden; 
} 

/* 안쪽 테이블: 끝 */ 


/* 내용 테이블 */ 
.CONTENTS{ 
    margin  : 0px  0px 0px 0px; 
    padding : 5px  10px 5px 10px; 
    height  : 100px; 

} 
</style> 

</head> 
<body> 

css 처리한 라운드 
<div style="margin : 0px 10px 0px 0px; width: 250px;"> 
    <div class="rt7"></div> 
    <div class="rt6"></div><div class="rt5"></div>  
    <div class="rt4"></div><div class="rt3"></div>  
    <div class="rt2"> 
          <div class="rt2in5"></div><div class="rt2in4"></div> 
    </div> 
    <div class="rt1"> 
          <div class="rt1in3"></div><div class="rt1in2"></div> 
          <div class="rt1in1"></div> 
    </div> 
    <div class="rtoutLRline"> 
    <div class="rtinLRline"> 

          <div class="CONTENTS"> 
                  여기에 내용을 넣으면 된다.
          </div> 

    </div> 
    </div> 
    <div class="rt1"> 
          <div class="rt1in1"></div><div class="rt1in2"></div> 
          <div class="rt1in3"></div> 
    </div> 
    <div class="rt2"> 
          <div class="rt2in4"></div><div class="rt2in5"></div> 
    </div> 
    <div class="rt3"></div><div class="rt4"></div> 
    <div class="rt5"></div><div class="rt6"></div> 
    <div class="rt7"></div> 
</div> 
</body> 
</html>

'프로그래밍 > CSS 3.0' 카테고리의 다른 글

CSS 1,2 셀렉터  (0) 2012.08.01
CSS가 정말 잘 소개되어있는 사이트 CSS - TRICKS  (0) 2012.04.25
CSS3 를 이용한 사진 갤러리 만들기  (0) 2012.03.20
포지션(POSITION) 알아보기  (0) 2012.03.20
http://css3generator.com/  (0) 2012.03.20
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함