[구디아카데미][IT국비지원][TIL] 이력서 폼 만들기

Seokhyun Jeong·2023년 4월 14일
IT국비지원html과제구디아카데미
0

과제

목록 보기
3/19
post-thumbnail

[구디아카데미][IT국비지원]

코드

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>resume.html</title>
	<style>
		table, td {
			border: 1px solid #000000;
		}
		table {
			width: 100%; 
			border-collapse: collapse;
		}
		
		.centertext {text-align: center;}
		.boldtext {font-weight: bold;} 
		.pinkcell {background-color: #FFB2F5;} 
		.width90 {width: 90%;}  
	</style>
</head>
<body>
	<h1 class="centertext">입사지원서</h1>
	<!-- 테이블1 -->
	<form method="post" action="./resumeAction.jsp">
		<table>
			<!-- 1행 -->
			<tr>
				<td rowspan="6" class="centertext">
					<input type="file" name="pic">
				</td>
				<td rowspan="2" class="centertext boldtext pinkcell">성명</td>
				<td class="centertext boldtext pinkcell">한글</td>
				<td class="centertext"><input type="text" name="name"></td>
				<td class="centertext boldtext pinkcell">지원부문</td>
				<td class="centertext"><input type="text"></td>
			</tr>
			
			<!-- 2행 -->
			<tr>
				<!-- <td></td> -->
				<!-- <td></td> -->
				<td class="centertext boldtext pinkcell">영문</td>
				<td class="centertext"><input type="text"></td>
				<td class="centertext boldtext pinkcell">지원구분</td>
				<td class="centertext"><input type="text"></td>
			</tr>
			
			<!-- 3행 -->
			<tr>
				<!-- <td></td> -->
				<td class="centertext boldtext pinkcell">생년월일</td>
				<td colspan="2" class="centertext">
					<input type="date">
					<select>
						<option>성별</option>
						<option>남</option>
						<option>여</option>
					</select>
				</td>
				<!-- <td></td> -->
				<td class="centertext boldtext pinkcell">신입/경력</td>
				<td class="centertext">
					<input type="radio" name="career">신입
					<input type="radio" name="career">경력
				</td>
			</tr>
			
			<!-- 4행 -->
			<tr>
				<!-- <td></td> -->
				<td class="centertext boldtext pinkcell">휴대폰</td>
				<td colspan="4" class="centertext">
					010 - 
					<input type="text"> - <input type="text"> 
				</td>
				<!-- 
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				 -->
			</tr>
			
			<!-- 5행 -->
			<tr>
				<!-- <td></td> -->
				<td class="centertext boldtext pinkcell">현주소</td>
				<td colspan="4" class="centertext">
					<input type="text" class="width90">
				</td>
				<!-- 
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				 -->
			</tr>
			
			<!-- 6행 -->
			<tr>
				<!-- <td></td> -->
				<td class="centertext boldtext pinkcell">긴급연락처</td>
				<td colspan="2" class="centertext">
					<input type="text">
				</td>
				<!-- <td></td> -->
				<td class="centertext boldtext pinkcell">관계</td>
				<td  class="centertext">
					<input type="text">
				</td>
			</tr>
		</table>
		
		<h2>&#9830; 학력사항</h2>
		<!-- 테이블2 -->
		<table>
			<!-- 1행 -->
			<tr>
				<td class="centertext boldtext pinkcell">졸 업 일</td>
				<td class="centertext boldtext pinkcell">학 교 명</td>
				<td class="centertext boldtext pinkcell">전 공</td>
				<td class="centertext boldtext pinkcell">졸업여부</td>
				<td class="centertext boldtext pinkcell">비고</td>
			</tr>
			
			<!-- 2행 -->
			<tr>
				<td class="centertext"><input type="date"></td>
				<td class="centertext"><input type="text"></td>
				<td class="centertext"><input type="text"></td>
				<td class="centertext">
					<select>
						<option>&nbsp;</option>
						<option>재학</option>
						<option>졸업</option>
						<option>중퇴</option>
					</select>
				</td>
				<td class="centertext"><input type="text"></td>
			</tr>
			
			<!-- 3행 -->
			<tr>
				<td class="centertext"><input type="date"></td>
				<td class="centertext"><input type="text"></td>
				<td class="centertext"><input type="text"></td>
				<td class="centertext">
					<select>
						<option>&nbsp;</option>
						<option>재학</option>
						<option>졸업</option>
						<option>중퇴</option>
					</select>
				</td>
				<td class="centertext"><input type="text"></td>
			</tr>
			
			<!-- 4행 -->
			<tr>
				<td class="centertext"><input type="date"></td>
				<td class="centertext"><input type="text"></td>
				<td class="centertext"><input type="text"></td>
				<td class="centertext">
					<select>
						<option>&nbsp;</option>
						<option>재학</option>
						<option>졸업</option>
						<option>중퇴</option>
					</select>
				</td>
				<td class="centertext"><input type="text"></td>
			</tr>
		</table>
		
		<h2>&#9830; 경력사항</h2>
		<!-- 테이블3 -->
		<table>
			<!-- 1행 -->
			<tr>
				<td class="centertext boldtext pinkcell">근 무 기 간</td>
				<td class="centertext boldtext pinkcell">회 사 명</td>
				<td class="centertext boldtext pinkcell">최종직위</td>
				<td class="centertext boldtext pinkcell">담 당 업 무</td>
				<td class="centertext boldtext pinkcell">퇴사사유</td>
			</tr>
			
			<!-- 2행 -->
			<tr>
				<td class="centertext"><input type="date"> ~ <input type="date"></td>
				<td class="centertext"><input type="text"></td>
				<td class="centertext"><input type="text" size="5"></td>
				<td class="centertext"><input type="text"></td>
				<td class="centertext"><input type="text"></td>
			</tr>
			
			<!-- 3행 -->
			<tr>
				<td class="centertext"><input type="date"> ~ <input type="date"></td>
				<td class="centertext"><input type="text"></td>
				<td class="centertext"><input type="text" size="5"></td>
				<td class="centertext"><input type="text"></td>
				<td class="centertext"><input type="text"></td>
			</tr>
			
			<!-- 4행 -->
			<tr>
				<td class="centertext"><input type="date"> ~ <input type="date"></td>
				<td class="centertext"><input type="text"></td>
				<td class="centertext"><input type="text" size="5"></td>
				<td class="centertext"><input type="text"></td>
				<td class="centertext"><input type="text"></td>
			</tr>
			
			<!-- 5행 -->
			<tr>
				<td class="centertext"><input type="date"> ~ <input type="date"></td>
				<td class="centertext"><input type="text"></td>
				<td class="centertext"><input type="text" size="5"></td>
				<td class="centertext"><input type="text"></td>
				<td class="centertext"><input type="text"></td>
			</tr>
			
			<!-- 6행 -->
			<tr>
				<td class="centertext"><input type="date"> ~ <input type="date"></td>
				<td class="centertext"><input type="text"></td>
				<td class="centertext"><input type="text" size="5"></td>
				<td class="centertext"><input type="text"></td>
				<td class="centertext"><input type="text"></td>
			</tr>
		</table>
		
		<h2>&#9830; 신체사항 (유니폼사이즈)</h2>
		<!-- 테이블4 -->
		<table>
			<!-- 1행 -->
			<tr>
				<td class="centertext boldtext pinkcell">신 장</td>
				<td class="centertext"><input type="number">cm</td>
				<td class="centertext boldtext pinkcell">체 중</td>
				<td class="centertext"><input type="number">kg</td>
				<td class="centertext boldtext pinkcell">신 발</td>
				<td class="centertext"><input type="number">mm</td>
			</tr>
			
			<!-- 2행 -->
			<tr>
				<td class="centertext boldtext pinkcell">시 력</td>
				<td class="centertext"><input type="number">/<input type="number"></td>
				<td class="centertext boldtext pinkcell">상 의</td>
				<td class="centertext"><input type="text"></td>
				<td class="centertext boldtext pinkcell">하 의</td>
				<td class="centertext"><input type="text"></td>
			</tr>
			
		</table>
		<h2>&#9830; 병역사항</h2>
		<!-- 테이블5 -->
		<table>
			<!-- 1행 -->
			<tr>
				<td class="centertext boldtext pinkcell">군필 여부</td>
				<td colspan="5" class="centertext">
					군필<input type="radio" name="a">,
					미필<input type="radio" name="a">,
					면제<input type="radio" name="a">,
					기타<input type="radio" name="a">,
					해당없음<input type="radio" name="a">
				</td>
				<!-- 
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				 -->
			</tr>
			<!-- 2행 -->
			<tr>
				<td class="centertext boldtext pinkcell">복무 기간</td>
				<td colspan="4" class="centertext"><input type="date"> ~ <input type="date"></td>
				<!-- 
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				 -->
				<td><input type="number">년<input type="number">개월</td>
			</tr>
			<!-- 3행 -->
			<tr>
				<td class="centertext boldtext pinkcell">군 별</td>
				<td class="centertext"><input type="text"></td>
				<td class="centertext boldtext pinkcell">계 급</td>
				<td class="centertext">
					<select>
						<option>이등병</option>
						<option>일등병</option>
						<option>상병</option>
						<option>병장</option>
					</select>
				</td>
				<td class="centertext boldtext pinkcell">병 역</td>
				<td class="centertext"><input type="text"></td>
			</tr>
		</table>
		
		
		<table style="border: 0px solid #FFFFFF;">
			<tr>
				<td style="border: 0px solid #FFFFFF;">
					<h2>&#9830; 자격증 및 면허사항</h2>
					<table>
						<tr>
							<td class="centertext boldtext pinkcell">자격 및 면허명</td>
							<td class="centertext boldtext pinkcell">취득일</td>
						</tr>
						<tr>
							<td class="centertext">
								<input type="text">
							</td>
							<td class="centertext">
								<input type="text">
							</td>
						</tr>
						<tr>
							<td class="centertext">
								<input type="text">
							</td>
							<td class="centertext">
								<input type="text">
							</td>
						</tr>
						<tr>
							<td class="centertext">
								<input type="text">
							</td>
							<td class="centertext">
								<input type="text">
							</td>
						</tr>
					</table>
				</td>
				<td style="border: 0px solid #FFFFFF;">
					<h2>&#9830; 외국어 사항</h2>
					<table>
						<tr>
							<td class="centertext boldtext pinkcell">외국어 명</td>
							<td class="centertext boldtext pinkcell">회화 (상, 중, 하)</td>
						</tr>
						<tr>
							<td class="centertext">
								<input type="text">
							</td>
							<td class="centertext">
								<input type="text">
							</td>
						</tr>
						<tr>
							<td class="centertext">
								<input type="text">
							</td>
							<td class="centertext">
								<input type="text">
							</td>
						</tr>
						<tr>
							<td class="centertext">
								<input type="text">
							</td>
							<td class="centertext">
								<input type="text">
							</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
		<button type="submit">입력</button>
	</form>
</body>
</html>

결과화면

profile
Seokhyun Jeong
이전 포스트

[구디아카데미][IT국비지원][TIL] 회원 가입 페이지

다음 포스트

[구디아카데미][IT국비지원][TIL] 주사위 던지기

0개의 댓글