사용된 이미지 파일:
tab_corners.zip<%@ 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>둥근 모서리, 아이템 타이틀 만들기</title>
<style type="text/css">
th {
border-bottom: 1px dotted gray;
}
/* 배경이미지는 한 영역에 2개이상을 설정하지 못하므로 영역의 양쪽 끝에 배경이미지를 설정하려면 해당 영역을 다시 2개의 영역으로 세분하여 각각의 영역에 배경이미지를 설정하는 방법을 사용한다. 여기서는 한개의 TD안에 2개의 배경 이미지를 설정하기 위해서 TD 영역을 2개의 SPAN 태그로 나누어서 각각의 SPAN 태그에 배경이미지를 설정하는 방법을 사용했다*/
th span#left_tab{
background:url(menu/left_tab.gif) top left no-repeat;
}
th span#title{
background:url(menu/right_tab.gif) top right no-repeat;
padding-right: 10px;
background-color:orange;
}
td#td_contents{
background-color: rgb(255, 213, 140);
text-align: center;
border: 1px groove rgb(220,220,220);
border-bottom-width:5px;
border-right-width:5px;
font-size: 10pt;
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="0">
<tr><th align="left"><span id="left_tab"> </span><span id="title">아이템 제목</span></th><th> </th></tr>
<tr>
<td id="td_contents" colspan="2">
<table>
<tr><th>번호</th><th>제 목 </th></tr>
<tr><td>1</td><td align="left">글상자의 테두리를 좀더 이쁘게</td></tr>
<tr><td>2</td><td align="left">내용이 들어갈 위치의 꼭지점도 둥글게 </td></tr>
<tr><td>3</td><td align="left">처리하면 더 좋을 듯하다. </td></tr>
</table>
</td>
</tr>
</table>
</body>
</html>