<head>
<style>
td{
text-align: center;
}
// <td> : 텍스트 정렬을 센터로
#b{
text-align: left;
}
// <b> : 텍스트 정렬을 왼쪽으로
</style>
</head>
<body>
<h1>회원가입</h1>
<hr>
// 수평 가로선
<table border="1">
// border : 경계선을 1로
<tr>
<td>아이디 </td>
<td id="b"><input type="text"></td>
</tr>
<tr>
<td>비밀번호</td>
<td id ="b"><input type="password"></td>
</tr>
<tr>
<td>비밀번호 확인</td>
<td id="b"><input type="password"></td>
</tr>
<tr>
<td>이름</td>
<td id="b"><input type="text"></td>
</tr>
<tr>
<td>이메일</td>
<td id="b"><input type="email"></td>
</tr>
<tr>
<td>생년월일</td>
<td id="b">
<select>
// <select> : table에서 데이터를 추출(목록)
<script>
var year = new Date().getFullYear();
// new Date() : 현재 날짜및 시간
// getFullYear() : 년도만 출력
for(let i=1990; i<= year; i++){
// 1990부터 현재 년도까지 돌린다.
document.write("<option>" + i + "</option>");
// <option> : 그 데이터(항목)
}
</script>
</select>
<select>
<script>
for(let j=1; j<= 12; j++){
document.write("<option>" + j + "</option>");
}
</script>
</select>
<select>
<script>
for(let q=1; q<= 31; q++){
document.write("<option>" + q + "</option>");
}
</script>
</select>
</td>
</tr>
<tr>
<td>성별</td>
<td id="b"><input type="radio">남자 <input type="radio">여자</td>
</tr>
<tr>
<td>취미</td>
<td id="b"><input type="checkbox">드라이브 <input type="checkbox">스포츠 <input type="checkbox">게임 <input type="checkbox">낚시 </td>
</tr>
<tr>
<td>나이</td>
<td id="b"><input type="text"></td>
</tr>
<tr>
<td>보안등급</td>
<td id="b"><input type="range"></td>
// range : 범위?를 조절할 수 있는 타입
</tr>
</table>
</body>