출력 결과1
소스코드1
<!DOCTYPE html>
<html>
<head>
<title>이력서</title>
<style>
h1{
text-align: center;
font-size: 60px;
border-top: 3px solid rgb(0, 102, 255);
border-bottom: 3px solid rgb(0, 102, 255);
}
table{
width: 100%;
border: 1px solid black;
border-collapse: collapse;
text-align: center;
}
td,th{
width: 20%;
border: 1px solid black;
}
tr{
height: 30;
}
</style>
</head>
<!--colspan: 셀 너비 지정 rowspan: 셀 높이 지정-->
<body>
<h1> 이 력 서 </h1>
<p>1.기초자료</p>
<table align="center" border="1" cellspacing="0">
<tr align="center" bgcolor="#fff">
<td rowspan="6" >사 진</td>
<!--성명 한문-->
<td bgcolor="#e3fcff">성 명</td>
<td colspan="1"></td>
<td bgcolor="#e3fcff">한 문</td>
<td colspan="5"></td>
</tr>
<!--주민등록번호-->
<tr align="center" bgcolor="#ffffff">
<td rowspan="1" bgcolor="#e3fcff">주민등록번호</td>
<td colspan="5"></td>
</tr>
<!--이메일-->
<tr align="center" bgcolor="#ffffff">
<td bgcolor="#e3fcff">E-mail</td>
<td colspan="5"></td>
</tr>
<!--전화번호, 휴대폰-->
<tr align="center" bgcolor="#ffffff">
<td bgcolor="#e3fcff">전화번호</td>
<td colspan="1"></td>
<td bgcolor="#e3fcff">휴대폰</td>
<td colspan="4">               </td>
</tr>
<!--우편번호, 비상연락처-->
<tr align="center" bgcolor="#ffffff">
<td bgcolor="#e3fcff">우편번호</td>
<td colspan="1"></td>
<td bgcolor="#e3fcff">비상연락처</td>
<td colspan="5">               </td>
</tr>
<!--주소-->
<tr align="center" bgcolor="#ffffff">
<td bgcolor="#e3fcff">주소</td>
<td colspan="5"></td>
</tr>
</table>
<p>2.학력사항</p>
<table>
<thead>
<th bgcolor="#e3fcff">기간</th>
<th bgcolor="#e3fcff">상세내용</th>
<th bgcolor="#e3fcff">비고</th>
</thead>
<tbody>
<tr>
<td> </td>
<td></td>
<td></td>
</tr>
<tr>
<td> </td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td> </td>
</tr>
<tr>
<td></td>
<td></td>
<td> </td>
</tr>
</tbody>
</table>
<p>3. 경력사항</p>
<table>
<thead>
<th bgcolor="#e3fcff">기간</th>
<th bgcolor="#e3fcff">관련</th>
</thead>
<tbody>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
<p>4. 개인능력 및 장단점</p>
<table>
<tbody>
<tr height="30" align="center">
<td rowspan="2" bgcolor="#e3fcff">자격 및 포상</td>
<td colspan="3"></td>
<td colspan="1"></td>
</tr>
<tr height="30"bgcolor="#fff" align="center">
<td colspan="3"></td>
<td colspan="3"></td>
</tr>
<tr height="30"bgcolor="#fff" align="center">
<td rowspan="2" bgcolor="#e3fcff">컴퓨터능력</td>
<td colspan="2"></td>
<td bgcolor="#e3fcff">상/중/하</td>
</tr>
<tr height="30" bgcolor="#fff" align="center">
<td colspan="2"></td>
<td bgcolor="#e3fcff">상/중/하</td>
<td></td>
</tr>
<tr height="30"bgcolor="#fff" align="center">
<td rowspan="2" bgcolor="#e3fcff">취미</td>
<td colspan="2"></td>
<td bgcolor="#e3fcff">특기</td>
<td></td>
</tr>
</tbody>
</table>
<p align="center" > 위의 사실이 틀림이 없음을 서약합니다.</span><br><br>
<p2> 작성일 월 일</p2><br><br>
<p2> 작성자 (인) </p2>
</body>
</div>
</html>
출력결과2
소스코드2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.btn {
background-color: rgb(187, 0, 0);
color: white;
border-radius: 5px;
border: rgb(150, 0, 0);
padding: 11px;
}
table {
border-collapse: collapse;
}
th {
background-color: rgb(252, 176, 13);
font-weight: bold;
}
tr, th, td {
border: 0.5px gray solid;
vertical-align: top;
width: 10%;
min-height: 20px;
padding: 10px;
}
.innertable {
text-align: left;
border-top: 0.5px gray solid;
margin: 10px;
margin-bottom: 20px;
}
.innertable th {
background-color: white;
}
.innertable th {
border: 0;
border-top: 0.5px gray solid;
}
.innertable tr {
border: 0;
border-top: 0.5px gray solid;
}
.innertable td {
border: 0;
border-top: 0.5px gray solid;
}
</style>
</head>
<body>
<form action="">
<label for="uname">이름</label>
<input type="text" id="uname"><br>
<label for="department">부서</label>
<input type="text" id="department"><br>
<label for="position">직책</label>
<input type="text" id="position"><br>
<label for="">사진</label>
<input type="file"><br>
<br>
<input type="submit" value="새 사원 추가" class="btn">
</form>
<div style="width: 860px;">
<hr>
<button>선택 삭제</button>
<label for="options">| 검색:</label>
<select name="inform" id="options">
<option value="name">이름</option>
<option value="department">부서</option>
<option value="position">직책</option>
</select>
<input type="text">
<table style="text-align: left; width: 100%;">
<tr>
<th><input type="checkbox"></th>
<th>번호</th>
<th>사진</th>
<th>사원명</th>
<th>부서</th>
<th>직급</th>
<th>수정</th>
<th>삭제</th>
</tr>
<tr>
<td rowspan="3"><input type="checkbox"></td>
<td rowspan="3">1043</td>
<td><img src="data: 데이터가 너무 길어서 생략
한줄 후기
테이블을 이용하여 이력서를 만들어 보는 시간을 가졌다. 생각만큼 쉽지 않았던것 같다,,😅😅
'웹 개발자 준비 과정🐳' 카테고리의 다른 글
| day06: 드래그 앤 드롭(drag and drop)😮💨 (0) | 2022.07.26 |
|---|---|
| day05: 개인 홈페이지 만들기_서울소개(html,css,js,bootstrap,firebase)🤩 (0) | 2022.07.26 |
| day04: 부트스트랩_jeju (html,css,js,bootstrap)😀 (0) | 2022.07.26 |
| day03 : 나이키,시계,이미지로테이트 웹페이지 만들기 (html,css,js)😵 (1) | 2022.07.26 |
| day02: 문서 구조화,그리디 (html,css,js)🙂 (0) | 2022.07.26 |
