3월15일 내용 정리
오늘은 테이블로 표만들기 및 css로 꾸미는거 까지 해봤음
어렵지는 않은데, 간격 맞추고 꾸미는게 손이 많이 가는거 같다~
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>form 양식</title>
<style>
*{margin: 0px;
padding: 0px;}
body{
width: 960px;
margin: 0 auto;
}
li{
list-style: none;
}
a{
text-decoration: none;
color: black;
}
img{
border: none;
}
table{
/*table-border를 0으로 아예초기화를 먼저 시킴*/
border-collapse: collapse;
border-top: 2px solid black;
border-bottom: 2px solid black;
border-left: none;
border-right: none;
}
tr{border-bottom: 1px solid green;}
/*tr의 :nth-child(자식)의 2n(짝수)에 색을 주고싶어*/
tr:nth-child(2n){
background-color: aquamarine;
}
/*tr의 :nth-child(자식)의 2n+1(짝수)에 색을 주고싶어*/
tr:nth-child(2n+1){
background-color: palevioletred
}
.left{
width: 150px;
height: 30px;
letter-spacing: 10px;
padding: 0 10px;
border-right: 1PX solid green;
/*총길이는 200px(width + letter-spacing + padding)*/
}
.right{
width: 740px;
padding: 5px;
}
.type01{
width: 200px;
height: 23px;
}
.type02{
width: 120px;
height: 23px;
}
.type03{
width: 450px;
height: 23px;
}
.sub{
height: 50px;
text-align: center;
background-color: antiquewhite;
}
.sub>input{
width:150px;
height: 30px;
font-weight: bold;
letter-spacing: 5px;
border-radius: 10px;
}
.button{
width:150px;
height: 30px;
font-weight: bold;
letter-spacing: 5px;
}
.inText{
font-size:11px;
}
</style>
</head>
<body>
<h1>회원가입 양식</h1>
<form action="#" method="post" name="member">
<table border="0">
<tr>
<td class="left">이름</td>
<td class="right"><input class="type01" type="text" name="name" required></td>
</tr>
<tr>
<td class="left">아이디</td>
<td class="right"><input class="type01" type="text" name="userID" required>
<input class="button" type="button" name="button" value="중복확인">
<!--submit과 같은 역할을 하여, 자바스크립을 엮어서 동적인 기능을 쓸수 있음-->
<!--<button>중복확인</button>-->
<span class="inText">*4-16자 영문소문자, 숫자만 가능하다.</span>
</td>
</tr>
<tr>
<td class="left">비밀번호</td>
<td class="right"><input class="type01" type="password" name="pwd" required>
<span class="inText">*4-16자</span>
</td>
</tr>
<tr>
<td class="left">비밀번호확인</td>
<td class="right"><input class="type01" type="password" name="pwdCheck" required>
</td>
</tr>
<tr>
<td class="left">생년월일</td>
<td class="right">
<select name="년">
<option value="">선택</option>
<option value="95">1995</option> <!--숫자가 많기때문에 jsp를 이용하여 for문으로 만들어 줄수있음-->
<option value="96">1996</option>
<option value="97">1997</option>
</select>년
<select name="월">
<option value="">선택</option>
<option value="1">01</option> <!--숫자가 많기때문에 jsp를 이용하여 for문으로 만들어 줄수있음-->
<option value="2">02</option>
<option value="3">03</option>
</select>월
<select name="일">
<option value="">선택</option>
<option value="10">10</option> <!--숫자가 많기때문에 jsp를 이용하여 for문으로 만들어 줄수있음-->
<option value="11">11</option>
<option value="12">12</option>
</select>일
</td>
</tr>
<tr>
<td class="left">성별</td>
<td class="right">
<input type="radio" name="gender" value="남">남
<input type="radio" name="gender" value="여">여
</td>
</tr>
<tr>
<td class="left">전화번호</td>
<td class="right">
<input class="type02" type="text" name="phon1" >-
<input class="type02" type="text" name="phon2" >-
<input class="type02" type="text" name="phon3" >
</td>
</tr>
<tr>
<td class="left">이메일</td>
<td class="right">
<input class="type01" type="email" name="email" >
</td>
</tr>
<tr>
<td class="left">우편번호</td>
<td class="right">
<input class="type02" type="text" name="post" >
<input class="button" type="button" name="postbutton" value="우편번호찾기">
</td>
</tr>
<tr>
<td class="left">주소</td>
<td class="right">
<input class="type03" type="text" name="adress" >
</td>
</tr>
<tr>
<td class="left">자기소개</td>
<td class="right">
<textarea name="textarea" cols="10" rows="5"></textarea>
</td>
</tr>
<tr>
<td class="sub" colspan="2">
<input type="submit" name="submit" value="회원가입" >
<input type="reset" name="reset" value="다시작성" >
</td>
</tr>
</table>
</form>
</body>
</html>
좋은개발자가 되기위한 삽질기록 노트