<html>
<head>
<style type="text/css">
.ex1tdcenter
{
text-align:center;
}
.ex1td
{
background-color:green;text-align:right;width:100px;
}
.ex1inp200
{
width:200px;
border-color:red;
}
.ex1inp150
{
width:150px;
border-color:red;
}
.ex2tab
{
border-style:solid;
border-width:2;
border-color:green;
text-align:center;
width:360px;
}
.ex2tdblue
{
background-color:#6d6dff;
color:white;
}
.ex2tdsky
{
background-color:#93feff;
}
.nonetd
{
cellspacing;0;
}
.ex3tab
{
border-style:double;
border-width:5;
border-color:green;
background-color:white;
}
.ex3tab td
{
background-color:#6d6dff;
border-color:withe;
}
.div1
{
position:relative;top:0px;left:0px;
width:800px;
height:80px;
background-color:#6d6dff;
}
.div2
{
position:relative;top:0px;left:0px;
width:200px;
height:500px;
background-color:#ffb5f7;
float:left;
}
.div3
{
position:relative;top:0px;left:-3px;
width:603px;
}
.div4
{
position:relative;top:0px;left:0px;
width:500px;
height:400px;
background-color:beige;
float:left;
}
.div5
{
position:relative;top:0px;left:-3px;
width:100px;
height:400px;
background-color:#abd0bc;
}
.div6
{
position:relative;top:0px;left:0px;
width:600px;
height:100px;
background-color:#8984b9;
}
</style>
</head>
<body>
<h2>실습1)</h2>
<table>
<tr>
<td colspan="2" class="ex1tdcenter">관리자ID와 비밀번호를 입력해 주세요</td>
</tr>
<tr>
<td class="ex1td">id</td><td><input type="text" id="id" class="ex1inp200"></td>
</tr>
<tr>
<td class="ex1td">비밀번호</td><td><input type="password" id="pwd" class="ex1inp150"><input type="button" id="login" value="login"></td>
</tr>
</table>
<br>
<hr>
<h2>실습2)</h2>
<div style="float:left;width:400px;">
<table class="ex2tab" CELLSPACING="0">
<tr class="ex3td">
<td colspan="2">신문</td>
</tr>
<tr class="ex2tdblue">
<td>일간지</td><td>경제지</td>
</tr>
<tr>
<td>동아일보</td><td>매일경제</td>
</tr>
<tr>
<td>한겨레</td><td>서울경제</td>
</tr>
<tr>
<td>전자신문</td><td> </td>
</tr>
</table>
</div>
<div style="width:400px;">
<table class="ex2tab">
<tr>
<td colspan="2">방송</td>
</tr>
<tr class="ex2tdsky">
<td>방송국</td><td>CATV</td>
</tr>
<tr>
<td>kbs</td><td>ytn</td>
</tr>
<tr>
<td>mbc</td><td> </td>
</tr>
<tr>
<td>sbs</td><td> </td>
</tr>
</table>
</div>
<br>
<hr>
<h2>실습3)</h2>
<table class="ex3tab" border="1">
<tr>
<td width="150px">아이디</td>
<td width="400px"><input class="ex1inp200" type="text">중복확인</td>
</tr>
<tr>
<td>비밀번호</td>
<td><input class="ex1inp200" type="password"></td>
</tr>
<tr>
<td>이름</td>
<td><input class="ex1inp200" type="text"></td>
</tr>
<tr>
<td>이메일</td>
<td><input class="ex1inp200" type="text"></td>
</tr>
<tr>
<td>연락처</td>
<td><input class="ex1inp200" type="text"></td>
</tr>
<tr>
<td>자기소개</td>
<td>
<textarea rows="8" cols="50">
</textarea>
</td>
</tr>
</table>
<br>
<hr>
<h2>실습4)</h2>
<div class="div1">상단로고</div>
<div class="div2">좌측메뉴</div>
<div class="div3">
<div class="div4">컨텐츠</div>
<div class="div5">오른쪽</div>
<div class="div6">하단</div>
</div>
</body>
</html>
