본문 바로가기

CSS/CSS Rounded Box

CSS Rounded Box example

사용자 삽입 이미지

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<style type="text/css">
 .innertd{
  background-color:rgb(169, 223,252); // 제목이 들어가는 부분보다는 옅은 색상 설정
  font-size:10pt;
  text-decoration:none;
 }
</style>
</head>
<body>
<center>
<!-- 모서리 이미지와 동일한 색상으로 테이블 배경색을 설정한다 -->
<table border="0" cellspacing="0" cellpadding="0" style="background-color:rgb(126,207,252);">
 <tr><td style="background:url(corner/blue_top_left.jpg) no-repeat top left;">&nbsp;&nbsp;</td>
 <td align="center" style="width:300px;"> &nbsp;&nbsp;제 목&nbsp;&nbsp;</td>
 <td style="background:url(corner/blue_top_right.jpg) no-repeat top right;">&nbsp;&nbsp;</td>
 </tr>
 <tr><td>&nbsp;&nbsp;</td><td class="innertd">내 용</td><td>&nbsp;&nbsp;</td></tr>
 <tr><td>&nbsp;&nbsp;</td><td class="innertd">내 용</td><td>&nbsp;&nbsp;</td></tr>
 <tr><td>&nbsp;&nbsp;</td><td class="innertd">내 용</td><td>&nbsp;&nbsp;</td></tr>
 <tr><td style="background:url(corner/blue_bottom_left.jpg) no-repeat bottom left;">&nbsp;&nbsp;</td>
 <td align="center" style="width:300px;"> &nbsp;&nbsp;</td>
 <td style="background:url(corner/blue_bottom_right.jpg) no-repeat bottom right;">&nbsp;&nbsp;</td>
 </tr>
</table>
</center>
</body>
</html>