Rounded Rect with images

이미지를 이용한 둥근 모서리 사각형 만들기

웹 페이지에서 글 박스로 자주 사용되는 둥근모서리 사각형은 CSS3를 이용하면 쉽게 표현할 수 있지만 모든 웹브라우저가 CSS3를 지원하는 것은 아니므로 문제가 될 수 있다. 그러므로 이미지를 이용한 둥근 모서리 사각형도 사용할 필요가 있다.
사용되는 CSS 속성 중에서 중요한 것은 float, clear 인데, div 태그에 float : left 를 적용하면 적용 태그는 왼편에 배치되고 동시에 적용태그의 오른쪽에 다른 div 태그를 둘 수가 있다.
div 태그에 float : right를 적용하면 해당 라인의 가장 오른쪽에 위치하게 된다.
clear속성은 div 태그 등의 좌우측에 다른 내용이 없도록 설정한다.
예를 들어, div하나는 왼쪽에, 다른 하나는 오른쪽에 배치할 경우, 그 다음에 이어지는 div 태그는 위에 있는 2개의 태그 사이로 삽입되려는 경향을 보인다. 이때 삽입되려는 경향을 보이는 div 태그에 clear : both 속성을 설정하면 양 태그 사이에 삽입되는 현상을 피할 수 있다. 또, 맨 왼쪽에 배치하려는 div 태그가 있다면 float : left; clear : left 라고 설정하면 위의 태그 다음에 이어서 오른쪽에 이어지려는 특성을 피할 수가 있다.

글박스를 구성하는 테두리 선의 이미지 (선의 두께는 1px , 둥근 모서리 4개, 수평선1개 수직선 1개)

      

CSS 코드

#content_div { 
float: right;
	height: 700px;
	width: 708px;
	position: absolute;
	top: 200px;
	left: 141px;
	margin-left: 60px; 
} 
#content_inner1 { 
 height: 300px;
	width: 400px;
	margin-top: 10px;
	margin-left: 5px;
	position: relative;
	float: left; 
} 
#corner_top_left { 
 background-image: url(images/corner_top_left.png);
	background-repeat: no-repeat;
	background-position: left top;
	height: 10px;
	width: 10px;
	float: left; 
} 
#border_top { 
 background-image: url(images/border_horizontal.png);
	background-repeat: no-repeat;
	background-position: left top;
	height: 10px;
	width: 380px;
	float: left;
	position: relative; 
} 
#corner_top_right { 
 background-image: url(images/corner_top_rigt.png);
	background-repeat: no-repeat;
	background-position: right top;
	float: right;
	height: 10px;
	width: 10px; 
} 
#border_left { 
 background-image: url(images/border_vertical.png);
	background-repeat: no-repeat;
	background-position: left top;
	float: left;
	height: 280px;
	width: 10px;
	position: relative;
	clear: left; 
} 
#content_center { 
 opacity:0.20;
	filter:alpha(opacity=20);
	background-color: #FFF;
	float: left;
	height: 280px;
	width: 380px;
	position: relative; 
} 
#border_right { 
 background-image: url(images/border_vertical.png);
	background-repeat: no-repeat;
	background-position: right top;
	height: 280px;
	width: 10px;
	float: right;
	position: relative; 
} 
#corner_bottom_left { 
 background-image: url(images/corner_bottom_left.png);
	background-repeat: no-repeat;
	background-position: left bottom;
	height: 10px;
	width: 10px;
	float: left;
	position: relative;
	clear: left; 
} 
#border_bottom { 
 background-image: url(images/border_horizontal.png);
	background-repeat: no-repeat;
	background-position: left bottom;
	float: left;
	height: 10px;
	width: 380px;
	position: relative; 
} 
#corner_bottom_right { 
 background-image: url(images/corner_bottom_right.png);
	background-repeat: no-repeat;
	background-position: right bottom;
	height: 10px;
	width: 10px;
	float: right;
	position: relative; 
}

HTML 코드

<div id="content_div"> 
   <div id="content_inner1"> 
       <div id="corner_top_left"></div> 
       <div id="border_top"></div> 
       <div id="corner_top_right"></div> 
       <div id="border_left"></div> 
       <div id="content_center"></div> 
       <div id="border_right"></div> 
       <div id="corner_bottom_left"></div> 
       <div id="border_bottom"></div> 
       <div id="corner_bottom_right"></div> 
    </div> 
</div>