<221229 2교시>
<input> : type="text" 가 기본으로 깔려있음
<input type="checkbox"> --> 체크박스 형태로 바뀜
<221229 5교시>
이미지 가로길이 조절 : 이미지 속성에서 width=100%
<221229 7교시>
line-height : 행간(줄간격)
word-spacing : 어간(단어사이 간격)
float : 여러 이미지 일정한 간격으로 나열
margin:auto : table 자체를 중앙정렬할때 ( width 값 설정되어있어야함!!)
영역태그 <p> <span> <div> --> 테이블 대신할수있음
!!부모 크기보다 자식크기가 더 크면 틀 망가질 수 있으므로 주의!!
<table border=0px width=300 height=200 class="lotto">
<tr>
<td width=100>1</td>
<td width=50 style="border-left: 1px solid #DDE7E9"></td>
<td><img src="img/8.gif" class="lotto_img"></td>
<td><img src="img/15.gif" class="lotto_img"></td>
<td><img src="img/25.gif" class="lotto_img"></td>
<td><img src="img/27.gif" class="lotto_img"></td>
<td><img src="img/29.gif" class="lotto_img"></td>
<td><img src="img/35.gif" class="lotto_img"></td>
<td width=50></td>
</tr>
<tr>
<td colspan="9" style="border-top: 1px solid #DDE7E9"></td>
</tr>
<tr>
<td>2</td>
<td style="border-left: 1px solid #DDE7E9"></td>
<td><img src="img/1.gif" class="lotto_img"></td>
<td><img src="img/9.gif" class="lotto_img"></td>
<td><img src="img/12.gif" class="lotto_img"></td>
<td><img src="img/22.gif" class="lotto_img"></td>
<td><img src="img/32.gif" class="lotto_img"></td>
<td><img src="img/33.gif" class="lotto_img"></td>
<td></td>
</tr>
<tr>
<td colspan="9" style="border-top: 1px solid #DDE7E9"></td>
</tr>
<tr>
<td>3</td>
<td style="border-left: 1px solid #DDE7E9"></td>
<td><img src="img/3.gif" class="lotto_img"></td>
<td><img src="img/4.gif" class="lotto_img"></td>
<td><img src="img/8.gif" class="lotto_img"></td>
<td><img src="img/15.gif" class="lotto_img"></td>
<td><img src="img/17.gif" class="lotto_img"></td>
<td><img src="img/29.gif" class="lotto_img"></td>
<td ></td>
</tr>
<tr>
<td colspan="9" style="border-top: 1px solid #DDE7E9"></td>
</tr>
<tr>
<td>4</td>
<td style="border-left: 1px solid #DDE7E9"></td>
<td><img src="img/9.gif" class="lotto_img"></td>
<td><img src="img/18.gif" class="lotto_img"></td>
<td><img src="img/21.gif" class="lotto_img"></td>
<td><img src="img/26.gif" class="lotto_img"></td>
<td><img src="img/27.gif" class="lotto_img"></td>
<td><img src="img/34.gif" class="lotto_img"></td>
<td></td>
</tr>
<tr>
<td colspan="9" style="border-top: 1px solid #DDE7E9"></td>
</tr>
<tr>
<td>5</td>
<td style="border-left: 1px solid #DDE7E9"></td>
<td><img src="img/8.gif" class="lotto_img"></td>
<td><img src="img/17.gif" class="lotto_img"></td>
<td><img src="img/19.gif" class="lotto_img"></td>
<td><img src="img/25.gif" class="lotto_img"></td>
<td><img src="img/27.gif" class="lotto_img"></td>
<td><img src="img/32.gif" class="lotto_img"></td>
<td></td>
</tr>
</table>
<table border=1px width=300 height=30 class="lotto">
<tr>
<td width=50>1</td>
<td width=270 style="padding-top: 5px; padding-left:20px;">
<div class="lotto_td"><img src="img/8.gif" class="lotto_img"></div>
<div class="lotto_td"><img src="img/15.gif" class="lotto_img"></div>
<div class="lotto_td"><img src="img/25.gif" class="lotto_img"></div>
<div class="lotto_td"><img src="img/27.gif" class="lotto_img"></div>
<div class="lotto_td"><img src="img/29.gif" class="lotto_img"></div>
<div class="lotto_td"><img src="img/35.gif" class="lotto_img"></div>
</td>
</tr>
<tr>
<td width=50>2</td>
<td width=270 style="padding-top: 5px; padding-left:20px;">
<div class="lotto_td"><img src="img/1.gif" class="lotto_img"></div>
<div class="lotto_td"><img src="img/9.gif" class="lotto_img"></div>
<div class="lotto_td"><img src="img/12.gif" class="lotto_img"></div>
<div class="lotto_td"><img src="img/22.gif" class="lotto_img"></div>
<div class="lotto_td"><img src="img/32.gif" class="lotto_img"></div>
<div class="lotto_td"><img src="img/33.gif" class="lotto_img"></div>
</td>
</tr>
<tr>
<td width=50>3</td>
<td width=270 style="padding-top: 5px; padding-left:20px;">
<div class="lotto_td"><img src="img/3.gif" class="lotto_img"></div>
<div class="lotto_td"><img src="img/4.gif" class="lotto_img"></div>
<div class="lotto_td"><img src="img/8.gif" class="lotto_img"></div>
<div class="lotto_td"><img src="img/15.gif" class="lotto_img"></div>
<div class="lotto_td"><img src="img/17.gif" class="lotto_img"></div>
<div class="lotto_td"><img src="img/29.gif" class="lotto_img"></div>
</td>
</tr>
<tr>
<td width=50>4</td>
<td width=270 style="padding-top: 5px; padding-left:20px;">
<div class="lotto_td"><img src="img/9.gif" class="lotto_img"></div>
<div class="lotto_td"><img src="img/18.gif" class="lotto_img"></div>
<div class="lotto_td"><img src="img/21.gif" class="lotto_img"></div>
<div class="lotto_td"><img src="img/26.gif" class="lotto_img"></div>
<div class="lotto_td"><img src="img/27.gif" class="lotto_img"></div>
<div class="lotto_td"><img src="img/34.gif" class="lotto_img"></div>
</td>
</tr>
<tr>
<td width=50>5</td>
<td width=270 style="padding-top: 5px; padding-left:20px;">
<div class="lotto_td"><img src="img/8.gif" class="lotto_img"></div>
<div class="lotto_td"><img src="img/17.gif" class="lotto_img"></div>
<div class="lotto_td"><img src="img/19.gif" class="lotto_img"></div>
<div class="lotto_td"><img src="img/25.gif" class="lotto_img"></div>
<div class="lotto_td"><img src="img/27.gif" class="lotto_img"></div>
<div class="lotto_td"><img src="img/32.gif" class="lotto_img"></div>
</td>
</tr>
</table>
1228_05.html --> 29일 1교시~8교시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cafe24따라하기</title>
<style>
body {
padding: 0px;
margin: 0px;
}
table {
border-spacing: 0px;
}
.input_01 {
width: 180px;
height: 35px;
}
.login_btn {
height: 40px;
}
.up {
padding-top: 10px;
padding-bottom: 10px;
}
.t1 {
text-align: center;
border: 1px solid #DDE7E9;
padding: 5px;
}
.t2 {
border: 1px solid #DDE7E9;
padding: 5px;
}
.num {
text-align: center;
font-size: 12px;
}
.lotto {
font-size: 15px;
font-weight: bold;
text-align: center;
border: 1px solid #DDE7E9;
}
.lotto_img {
width: 30px;
}
.lotto_td {
width:35px;
float: left;
}
.more_img {
width: 100%;
height: 320px;
}
.under {
line-height: 30px;
font-size: 12px;
}
.under_title {
font-size: 15px;
font-weight: bold;
padding-bottom: 12px;
padding-top: 8px;
padding-left: 10px;
}
.under_contents {
padding-left: 10px;
}
.under_num {
text-align: right;
padding-right: 10px;
}
</style>
</head>
<body>
<center>
<!--상단-->
<table border=0px width=1200 class="up">
<tr>
<td width=100>
<span style="font-size: 13px; font-weight: bold; color: red;">커뮤니티</span>
<span style="width=5px; height=5px; border-right:1px solid;"></span>
<span style="font-size: 12px;color: #91919F; font-weight: bold; "> 쇼핑몰</span>
</td>
<td width=1000> </td>
<td width=100>
<span style="font-size: 12px;color: #91919F; font-weight: bold;">새글</span>
<span style="width=5px; height=5px; border-right:1px solid;"></span>
<span style="font-size: 12px;color: #91919F; font-weight: bold; "> 접속자 2</span>
</td>
</tr>
</table>
<hr>
<!--검색창-->
<table border=0px width=1200>
<tr>
<td colspan="7" height=30></td>
</tr>
<tr>
<td width=170><img src="img/cafe_logo.jpg"></td>
<td width=200></td>
<td width=470 style="text-align: center; border: 1px solid red; border-radius: 50px;background-color: red; text-align: right; padding-right: 15px; vertical-align: middle"><img src="img/cafe_01.PNG"></td>
<td width=250></td>
<td width=110 style="font-size: 11px; color: #91919F; font-weight: bold;">
<span style="font-size: 11px; color: #91919F; font-weight: bold;">회원가입</span>
<span style="width=5px; height=5px; border-right:1px solid;"></span>
<span style="font-size: 11px; color: #91919F; font-weight: bold;"> 로그인</span>
</td>
</tr>
<tr>
<td colspan="7" height=30></td>
</tr>
</table>
<!--메뉴바-->
<table border=0px width=1200 style="border-top:2px solid red; border-bottom: 2px solid red;">
<tr>
<td colspan="7" height=50 style="font-size: 15px; font-weight: bold; padding: 0px 10px;">
SCRIPT JAVA MYSQL JSP JSP2 JQUERY SPRING SPRINGBOOT PHP ANDROID10
</td>
<td style="text-align: center; background-color: red;"><img src="img/cafe_02.PNG"></td>
</tr>
</table>
<!--4개방 아파트-->
<table border=0 width=1200>
<tr>
<td colspan="3" height=30></td>
</tr>
<tr>
<td>
<table border=0 >
<tr>
<!--달력-->
<td width=310>
<table border=0 width=310 height=350>
<tr>
<td height=10 style="color: #3A8AFD; padding-bottom: 5px">달력</td>
</tr>
<tr>
<td height=10 style="border-top: 1px solid #E5ECEE "></td>
</tr>
<tr>
<td>
<table border=0 width=310 height=280 class=num>
<tr>
<td colspan="13" style="padding-bottom: 5px; padding-top: 5px"> <span style="background-color: #97CD57; color: white;"><</span> <span style="font-weight: bold;">2022.12</span> <span style="background-color: #97CD57; color: white;">></span></td>
</tr>
<tr>
<td style="background-color: #FFC000"> </td>
<td width=1></td>
<td style="background-color: #E4CC6A"> </td>
<td width=1></td>
<td style="background-color: #E4CC6A"> </td>
<td width=1></td>
<td style="background-color: #E4CC6A"> </td>
<td width=1></td>
<td style="background-color: #E4CC6A"> </td>
<td width=1></td>
<td style="background-color: #E4CC6A"> </td>
<td width=1></td>
<td style="background-color: #A1D043"> </td>
</tr>
<tr>
<td height=1></td>
<td width=1></td>
<td height=1></td>
<td width=1></td>
<td height=1></td>
<td width=1></td>
<td height=1></td>
<td width=1></td>
<td height=1></td>
<td width=1></td>
<td height=1></td>
<td width=1></td>
<td height=1></td>
</tr>
<tr>
<td style="background-color: #FFC000; ">일</td>
<td width=1></td>
<td style="background-color: #E4CC6A; ">월</td>
<td width=1></td>
<td style="background-color: #E4CC6A; ">화</td>
<td width=1></td>
<td style="background-color: #E4CC6A; ">수</td>
<td width=1></td>
<td style="background-color: #E4CC6A; ">목</td>
<td width=1></td>
<td style="background-color: #E4CC6A; ">금</td>
<td width=1></td>
<td style="background-color: #A1D043; ">토</td>
</tr>
<tr>
<td height=1></td>
<td width=1></td>
<td height=1></td>
<td width=1></td>
<td height=1></td>
<td width=1></td>
<td height=1></td>
<td width=1></td>
<td height=1></td>
<td width=1></td>
<td height=1></td>
<td width=1></td>
<td height=1></td>
</tr>
<tr>
<td></td>
<td width=1></td>
<td></td>
<td width=1></td>
<td></td>
<td width=1></td>
<td></td>
<td width=1></td>
<td style="border: 1px solid #DDE7E9 ">1</td>
<td width=1></td>
<td style="border: 1px solid #DDE7E9 ">2</td>
<td width=1></td>
<td style="background-color:#EDF6FC; border: 1px solid #DDE7E9">3</td>
</tr>
<tr>
<td height=1></td>
<td width=1></td>
<td height=1></td>
<td width=1></td>
<td height=1></td>
<td width=1></td>
<td height=1></td>
<td width=1></td>
<td height=1></td>
<td width=1></td>
<td height=1></td>
<td width=1></td>
<td height=1></td>
</tr>
<tr>
<td style="background-color:#FCEEED;border: 1px solid #DDE7E9">4</td>
<td width=1></td>
<td style="border: 1px solid #DDE7E9 ">5</td>
<td width=1></td>
<td style="border: 1px solid #DDE7E9 ">6</td>
<td width=1></td>
<td style="border: 1px solid #DDE7E9 ">7</td>
<td width=1></td>
<td style="border: 1px solid #DDE7E9 ">8</td>
<td width=1></td>
<td style="border: 1px solid #DDE7E9 ">9</td>
<td width=1></td>
<td style="background-color:#EDF6FC; border: 1px solid #DDE7E9">10</td>
</tr>
<tr>
<td height=1></td>
<td width=1></td>
<td height=1></td>
<td width=1></td>
<td height=1></td>
<td width=1></td>
<td height=1></td>
<td width=1></td>
<td height=1></td>
<td width=1></td>
<td height=1></td>
<td width=1></td>
<td height=1></td>
</tr>
<tr>
<td style="background-color:#FCEEED; border: 1px solid #DDE7E9">11</td>
<td width=1></td>
<td style="border: 1px solid #DDE7E9 ">12</td>
<td width=1></td>
<td style="border: 1px solid #DDE7E9 ">13</td>
<td width=1></td>
<td style="border: 1px solid #DDE7E9 ">14</td>
<td width=1></td>
<td style="border: 1px solid #DDE7E9 ">15</td>
<td width=1></td>
<td style="border: 1px solid #DDE7E9 ">16</td>
<td width=1></td>
<td style="background-color:#EDF6FC; border: 1px solid #DDE7E9">17</td>
</tr>
<tr>
<td height=1></td>
<td width=1></td>
<td height=1></td>
<td width=1></td>
<td height=1></td>
<td width=1></td>
<td height=1></td>
<td width=1></td>
<td height=1></td>
<td width=1></td>
<td height=1></td>
<td width=1></td>
<td height=1></td>
</tr>
<tr>
<td style="background-color:#FCEEED; border: 1px solid #DDE7E9">18</td>
<td width=1></td>
<td style="border: 1px solid #DDE7E9 ">19</td>
<td width=1></td>
<td style="border: 1px solid #DDE7E9 ">20</td>
<td width=1></td>
<td style="border: 1px solid #DDE7E9 ">21</td>
<td width=1></td>
<td style="border: 1px solid #DDE7E9 ">22</td>
<td width=1></td>
<td style="border: 1px solid #DDE7E9 ">23</td>
<td width=1></td>
<td style="background-color:#EDF6FC; border: 1px solid #DDE7E9">24</td>
</tr>
<tr>
<td height=1></td>
<td width=1></td>
<td height=1></td>
<td width=1></td>
<td height=1></td>
<td width=1></td>
<td height=1></td>
<td width=1></td>
<td height=1></td>
<td width=1></td>
<td height=1></td>
<td width=1></td>
<td height=1></td>
</tr>
<tr>
<td style="background-color:#FCEEED; border: 1px solid #DDE7E9">25</td>
<td width=1></td>
<td style="border: 1px solid #DDE7E9 ">26</td>
<td width=1></td>
<td style="border: 1px solid #DDE7E9 ">27</td>
<td width=1></td>
<td style="border: 1px solid #DDE7E9 ">28</td>
<td width=1></td>
<td style="border: 1px solid #DDE7E9 ">29</td>
<td width=1></td>
<td style="border: 1px solid #DDE7E9 ">30</td>
<td width=1></td>
<td style="background-color:#EDF6FC"; border: 1px solid #DDE7E9>31</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height=40></td>
</tr>
<tr>
<td height=10 style="border-top: 1px solid #E5ECEE "></td>
</tr>
</table>
</td>
<!--로또-->
<td width=310 style="padding-left: 10px">
<table border=0 width=310 height=350>
<tr>
<td height=10 style="color: #3A8AFD; padding-bottom: 5px">로또 번호</td>
</tr>
<tr>
<td height=10 style="border-top: 1px solid #E5ECEE "></td>
</tr>
<tr>
<td>
<table border=1px width=310 height=280 class="lotto">
<tr>
<td width=50>1</td>
<td width=270 style="padding-top: 5px; padding-left:20px;">
<div class="lotto_td"><img src="img/8.gif" class="lotto_img"></div>
<div class="lotto_td"><img src="img/15.gif" class="lotto_img"></div>
<div class="lotto_td"><img src="img/25.gif" class="lotto_img"></div>
<div class="lotto_td"><img src="img/27.gif" class="lotto_img"></div>
<div class="lotto_td"><img src="img/29.gif" class="lotto_img"></div>
<div class="lotto_td"><img src="img/35.gif" class="lotto_img"></div>
</td>
</tr>
<tr>
<td width=50>2</td>
<td width=270 style="padding-top: 5px; padding-left:20px;">
<div class="lotto_td"><img src="img/1.gif" class="lotto_img"></div>
<div class="lotto_td"><img src="img/9.gif" class="lotto_img"></div>
<div class="lotto_td"><img src="img/12.gif" class="lotto_img"></div>
<div class="lotto_td"><img src="img/22.gif" class="lotto_img"></div>
<div class="lotto_td"><img src="img/32.gif" class="lotto_img"></div>
<div class="lotto_td"><img src="img/33.gif" class="lotto_img"></div>
</td>
</tr>
<tr>
<td width=50>3</td>
<td width=270 style="padding-top: 5px; padding-left:20px;">
<div class="lotto_td"><img src="img/3.gif" class="lotto_img"></div>
<div class="lotto_td"><img src="img/4.gif" class="lotto_img"></div>
<div class="lotto_td"><img src="img/8.gif" class="lotto_img"></div>
<div class="lotto_td"><img src="img/15.gif" class="lotto_img"></div>
<div class="lotto_td"><img src="img/17.gif" class="lotto_img"></div>
<div class="lotto_td"><img src="img/29.gif" class="lotto_img"></div>
</td>
</tr>
<tr>
<td width=50>4</td>
<td width=270 style="padding-top: 5px; padding-left:20px;">
<div class="lotto_td"><img src="img/9.gif" class="lotto_img"></div>
<div class="lotto_td"><img src="img/18.gif" class="lotto_img"></div>
<div class="lotto_td"><img src="img/21.gif" class="lotto_img"></div>
<div class="lotto_td"><img src="img/26.gif" class="lotto_img"></div>
<div class="lotto_td"><img src="img/27.gif" class="lotto_img"></div>
<div class="lotto_td"><img src="img/34.gif" class="lotto_img"></div>
</td>
</tr>
<tr>
<td width=50>5</td>
<td width=270 style="padding-top: 5px; padding-left:20px;">
<div class="lotto_td"><img src="img/8.gif" class="lotto_img"></div>
<div class="lotto_td"><img src="img/17.gif" class="lotto_img"></div>
<div class="lotto_td"><img src="img/19.gif" class="lotto_img"></div>
<div class="lotto_td"><img src="img/25.gif" class="lotto_img"></div>
<div class="lotto_td"><img src="img/27.gif" class="lotto_img"></div>
<div class="lotto_td"><img src="img/32.gif" class="lotto_img"></div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height=40><span style="border: 1px solid #DDE7E9; color:#42ADFE; font-size: 13px; padding: 5px ">New Numbers</span></td>
</tr>
<tr>
<td height=10 style="border-top: 1px solid #E5ECEE "></td>
</tr>
</table>
</td>
<!--더보기-->
<td width=310 height=350 style="padding-left: 10px">
<table border=0 width=310 height=350>
<tr>
<td height=10 style=" color: red; padding-bottom: 5px">MORE+ </td>
<td height=10 style="font-size: 13px; text-align: right"> <span style="color: red">5</span> / <span style="color: blue">5</span> <span style="background-color: #666666; color: white">< </span> <span style="background-color: #666666; color: white;"> ></span> </td>
</tr>
<tr>
<td colspan="2" height=10 style="border-top: 1px solid #E5ECEE "></td>
</tr>
<tr>
<td colspan="2" height=320 > <img src="img/cafe_06.jpg" class="more_img"></td>
</tr>
<tr>
<td colspan="2" height=10 style="border-top: 1px solid #E5ECEE "></td>
</tr>
</table>
</td>
<!--여백-->
<td width=70>
<table>
<tr>
<td></td>
</tr>
</table>
</td>
<!--로그인창-->
<td>
<table border=0 width=200 height=280 class="t1">
<tr>
<td width=100 style="text-align: center">로그인</td>
<td width=100 style="text-align: center; background-color:#F7F7F7 " >회원가입</td>
</tr>
<tr>
<td colspan="2" height=10></td>
</tr>
<tr>
<td colspan="2" ><input class="input_01" placeholder="아이디"></td>
</tr>
<tr>
<td colspan="2" ><input class="input_01" placeholder="비밀번호"></td>
</tr>
<tr>
<td colspan="2" class="login_btn" style="background-color: #3A8AFD; color: white; text-align: center; ">로그인</td>
</tr>
<tr>
<td colspan="2" height=10></td>
</tr>
<tr>
<td style="font-size: 12px; text-align: left; padding-bottom: 10px;"><input type="checkbox">자동로그인</td>
<td style="color: #3A8AFD; text-align: right; font-size: 12px; padding-bottom: 10px;"><span style="border: 1px solid #D5D9DD; padding: 3px" >정보찾기</span></td>
</tr>
<tr>
<td colspan="2" height=10></td>
</tr>
</table>
<table>
<tr>
<td height=25 colspan="2"></td>
</tr>
</table>
<table border=0 width=200 height=25 class="t2">
<tr>
<td width=100 style="font-size: 12px; "><img src="img/ip.PNG" style="vertical-align:middle"> 아이피 </td>
<td width=100 style="font-size: 12px; text-align: right;">61.33.41.171</td>
</tr>
</table>
<table border=0 width=200 height=25 class="t2">
<tr>
<td width=100 style="font-size: 12px;"><img src="img/time.PNG" style="vertical-align: middle;"> 현재시간</td>
<td width=100 style="font-size: 12px; text-align: right;">11:22:24</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table>
<tr>
<td height=70></td>
</tr>
</table>
<hr>
<!--under-->
<table border=0px width=1200 class="under">
<tr>
<td width=300 class="under_title"></td>
<td width=300 class="under_title">사이트 정보</td>
<td width=300 class="under_title"></td>
<td width=300 class="under_title">접속자집계</td>
</tr>
<tr>
<td class="under_contents">
<span style="color: red;">⊙</span> 회사소개 <br> <span style="color: red;">⊙</span> 개인정보처리방침 <br> <span style="color: red;">⊙</span> 서비스이용약관 <br> <span style="color: red;">⊙ 모바일버전</span>
</td>
<td class="under_contents">
<span style="color: red;">⊙</span> 공지사항 <br> <span style="color: red;">⊙</span> 자유게시판 <br> <span style="color: red;">⊙</span> 질문답변 <br> <span style="color: red;">⊙</span> 1:1문의
</td>
<td class="under_contents">
별명: 터푸가위 <br> 주소 : 부산시 동래구 명장로 20번길 90 <br> 대표 : 박규태 <br> 메일 : dancepkt@******.com
</td>
<td class="under_contents">
<table border=0 width=100%>
<tr>
<td> <span style="color: blue;">⊙</span> 오늘</td>
<td class="under_num">8</td>
</tr>
<tr>
<td> <span style="color: blue;">⊙</span> 어제</td>
<td class="under_num">11</td>
</tr>
<tr>
<td> <span style="color: blue;">⊙</span> 최대</td>
<td class="under_num">43</td>
</tr>
<tr>
<td> <span style="color: blue;">⊙</span> 전체</td>
<td class="under_num">5,784</td>
</tr>
</table>
</td>
</tr>
</table>
<table>
<tr>
<td height=30></td>
</tr>
</table>
<hr>
<!--카피라이터-->
<div style="padding-top: 10px; font-size: 10px;">Copyright © dancePKT . All rights reserved.</div>
</center>
</body>
</html>
1229_01.html --> 8교시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cafe24 회원가입</title>
<style>
body {
padding: 0px;
margin: 0px;
}
table {
border-spacing: 0px;
}
.input_01 {
width: 180px;
height: 35px;
}
.login_btn {
height: 40px;
}
.up {
padding-top: 10px;
padding-bottom: 10px;
}
.t1 {
text-align: center;
border: 1px solid #DDE7E9;
padding: 5px;
}
.t2 {
border: 1px solid #DDE7E9;
padding: 5px;
}
.under {
line-height: 30px;
font-size: 12px;
}
.under_title {
font-size: 15px;
font-weight: bold;
padding-bottom: 12px;
padding-top: 8px;
padding-left: 10px;
}
.under_contents {
padding-left: 10px;
}
.under_num {
text-align: right;
padding-right: 10px;
}
.box {
text-align: center;
font-size: 13px;
font-weight: bold;
background-color: #F2838F;
color: white;
border-radius: 6px;
}
.table_text {
margin: auto;
}
.cancle_btn {
text-align: center;
}
</style>
</head>
<body>
<center>
<!--상단-->
<table border=0px width=1200 class="up">
<tr>
<td width=100>
<span style="font-size: 13px; font-weight: bold; color: red;">커뮤니티</span>
<span style="width=5px; height=5px; border-right:1px solid;"></span>
<span style="font-size: 12px;color: #91919F; font-weight: bold; "> 쇼핑몰</span>
</td>
<td width=1000> </td>
<td width=100>
<span style="font-size: 12px;color: #91919F; font-weight: bold;">새글</span>
<span style="width=5px; height=5px; border-right:1px solid;"></span>
<span style="font-size: 12px;color: #91919F; font-weight: bold; "> 접속자 2</span>
</td>
</tr>
</table>
<hr>
<!--검색창-->
<table border=0px width=1200>
<tr>
<td colspan="7" height=30></td>
</tr>
<tr>
<td width=170><img src="img/cafe_logo.jpg"></td>
<td width=200></td>
<td width=470 style="text-align: center; border: 1px solid red; border-radius: 50px;background-color: red; text-align: right; padding-right: 15px; vertical-align: middle"><img src="img/cafe_01.PNG"></td>
<td width=250></td>
<td width=110 style="font-size: 11px; color: #91919F; font-weight: bold;">
<span style="font-size: 11px; color: #91919F; font-weight: bold;">회원가입</span>
<span style="width=5px; height=5px; border-right:1px solid;"></span>
<span style="font-size: 11px; color: #91919F; font-weight: bold;"> 로그인</span>
</td>
</tr>
<tr>
<td colspan="7" height=30></td>
</tr>
</table>
<!--메뉴바-->
<table border=0px width=1200 style="border-top:2px solid red; border-bottom: 2px solid red;">
<tr>
<td colspan="7" height=50 style="font-size: 15px; font-weight: bold; padding: 0px 10px;">
SCRIPT JAVA MYSQL JSP JSP2 JQUERY SPRING SPRINGBOOT PHP ANDROID10
</td>
<td style="text-align: center; background-color: red;"><img src="img/cafe_02.PNG"></td>
</tr>
</table>
<!--2개방-->
<table border=1 width=1200>
<tr>
<td height=30></td>
</tr>
<tr>
<td>
<table border=0 >
<tr>
<!--회원가입-->
<td>
<table border=1 width=930>
<tr>
<td colspan="3" height=20></td>
</tr>
<tr>
<td colspan="3">회원가입약관</td>
</tr>
<tr>
<td colspan="3" height=10></td>
</tr>
<tr>
<td colspan="3" height=50 class="box" >그림 회원가입약관 및 개인정보처리방침안내의 내용에 동의하셔야 회원가입 하실 수 있습니다.</td>
</tr>
<tr>
<td colspan="3" height=10></td>
</tr>
<tr>
<td colspan="2" style="padding-bottom: 20px; padding-top: 20px; ">회원가입약관</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td colspan="3" width=850 style="padding-top: 20px">
<textarea>개인적으로 알게된 정보를 저장하는 곳으로 활용되는 곳입니다.</textarea>
</td>
</tr>
<tr>
<td colspan="3" height=20></td>
</tr>
<tr>
<td colspan="2" style="padding-bottom: 20px; padding-top: 20px">
개인정보처리방침안내</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td colspan="3">
<table border=1 width=850 class="table_text">
<tr>
<td>목적</td>
<td>항목</td>
<td>보유기간</td>
</tr>
<tr>
<td>이용자 식별 및 본인여부 확인</td>
<td>아이디, 이름, 비밀번호</td>
<td>회원 탈퇴 시까지</td>
</tr>
<tr>
<td>고객서비스 이용에 관한 통지, <br> CS대응을 위한 이용자 식별</td>
<td>연락처(이메일, 휴대전화번호)</td>
<td>회원 탈퇴 시까지</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="3" height=10></td>
</tr>
<tr>
<td colspan="2" style="padding-bottom: 20px; padding-top: 20px; text-align: center;">
회원가입 약관에 모두 동의합니다</td>
<td><input type="checkbox" ></td>
</tr>
<tr>
<td colspan="3" height=10></td>
</tr>
<tr class="cancle_btn">
<td width=460>취소</td>
<td width=10></td>
<td width=460>회원가입</td>
</tr>
</table>
<!--여백-->
<td width=70>
<table>
<tr>
<td></td>
</tr>
</table>
</td>
<!--로그인창-->
<td>
<table border=0 width=200 height=280 class="t1">
<tr>
<td width=100 style="text-align: center">로그인</td>
<td width=100 style="text-align: center; background-color:#F7F7F7 " >회원가입</td>
</tr>
<tr>
<td colspan="2" height=10></td>
</tr>
<tr>
<td colspan="2" ><input class="input_01" placeholder="아이디"></td>
</tr>
<tr>
<td colspan="2" ><input class="input_01" placeholder="비밀번호"></td>
</tr>
<tr>
<td colspan="2" class="login_btn" style="background-color: #3A8AFD; color: white; text-align: center; ">로그인</td>
</tr>
<tr>
<td colspan="2" height=10></td>
</tr>
<tr>
<td style="font-size: 12px; text-align: left; padding-bottom: 10px;"><input type="checkbox">자동로그인</td>
<td style="color: #3A8AFD; text-align: right; font-size: 12px; padding-bottom: 10px;"><span style="border: 1px solid #D5D9DD; padding: 3px" >정보찾기</span></td>
</tr>
<tr>
<td colspan="2" height=10></td>
</tr>
</table>
<table>
<tr>
<td height=25 colspan="2"></td>
</tr>
</table>
<table border=0 width=200 height=25 class="t2">
<tr>
<td width=100 style="font-size: 12px; "><img src="img/ip.PNG" style="vertical-align:middle"> 아이피 </td>
<td width=100 style="font-size: 12px; text-align: right;">61.33.41.171</td>
</tr>
</table>
<table border=0 width=200 height=25 class="t2">
<tr>
<td width=100 style="font-size: 12px;"><img src="img/time.PNG" style="vertical-align: middle;"> 현재시간</td>
<td width=100 style="font-size: 12px; text-align: right;">11:22:24</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table>
<tr>
<td height=70></td>
</tr>
</table>
<hr>
<!--under-->
<table border=0px width=1200 class="under">
<tr>
<td width=300 class="under_title"></td>
<td width=300 class="under_title">사이트 정보</td>
<td width=300 class="under_title"></td>
<td width=300 class="under_title">접속자집계</td>
</tr>
<tr>
<td class="under_contents">
<span style="color: red;">⊙</span> 회사소개 <br> <span style="color: red;">⊙</span> 개인정보처리방침 <br> <span style="color: red;">⊙</span> 서비스이용약관 <br> <span style="color: red;">⊙ 모바일버전</span>
</td>
<td class="under_contents">
<span style="color: red;">⊙</span> 공지사항 <br> <span style="color: red;">⊙</span> 자유게시판 <br> <span style="color: red;">⊙</span> 질문답변 <br> <span style="color: red;">⊙</span> 1:1문의
</td>
<td class="under_contents">
별명: 터푸가위 <br> 주소 : 부산시 동래구 명장로 20번길 90 <br> 대표 : 박규태 <br> 메일 : dancepkt@******.com
</td>
<td class="under_contents">
<table border=0 width=100%>
<tr>
<td> <span style="color: blue;">⊙</span> 오늘</td>
<td class="under_num">8</td>
</tr>
<tr>
<td> <span style="color: blue;">⊙</span> 어제</td>
<td class="under_num">11</td>
</tr>
<tr>
<td> <span style="color: blue;">⊙</span> 최대</td>
<td class="under_num">43</td>
</tr>
<tr>
<td> <span style="color: blue;">⊙</span> 전체</td>
<td class="under_num">5,784</td>
</tr>
</table>
</td>
</tr>
</table>
<table>
<tr>
<td height=30></td>
</tr>
</table>
<hr>
<!--카피라이터-->
<div style="padding-top: 10px; font-size: 10px;">Copyright © dancePKT . All rights reserved.</div>
</center>
</body>
</html>'JAVA > html' 카테고리의 다른 글
| 230102_교재, form, 구구단 (0) | 2023.01.02 |
|---|---|
| 221230_JS, 조건문, 반복문, 짝홀 (1) | 2022.12.30 |
| 221228_CSS (2) | 2022.12.28 |
| 221227_네이버,영역태그 (0) | 2022.12.27 |
| 221226_ html (0) | 2022.12.26 |
