프로젝트 & 실습/WEB Project
[실습] table 태그를 이용한 이력서 만들기
hhyyyjun
2022. 12. 31. 23:28
위 사진과 같은 이력서 만들기
1. 먼저 div와 table태그를 이용하여 큰 틀을 잡음.
<body>
<br>
<div><!--큰 틀-->
<table>
<div><!--사진, 이력서 성명 생년월일 공간-->
</div>
<div><!--주소, 전화번호 공간-->
</div>
<div><!--년 월 일, 학력, 기관장소 공간-->
</div>
<div><!--위 기재 ~~ 공간-->
</div>
</table>
</div>
</body>
</html>1) 전체적인 틀
2) 사진, 이력서, 성명, 인, 생년월일, 년월일생 공간 생성
3) 주소, 전화번호 공간 생성
4) 년월일, 학력, 기관장소 공간 생성
5) 위 기재~~ 공간 생성
2. 사진, 이력서, 성명, 생년월일 공간
<table border="4" width="30%" align="center"><!--표의 굵기 4, 넓이 30%, 표의 위치 = 중간>
<div><!--사진, 이력서 성명 생년월일 공간-->
<tr>
<td rowspan="3" colspan="2" height="150px" width="" align="center">사 진</td>
<th colspan="3" height="65px" align="center"><h2>이 력 서</h2></th>
</tr>
<tr>
<td rowspan="2" width="" height="90px" align="center">성 명</td>
<td rowspan="2" width="" align="right">인</td>
<td width="" align="center">생 년 월 일</td>
</tr>
<tr>
<td height="50px" align="center">년 월 일생 (만 세)</td>
</tr>
</div>먼저 표를 이력서 사진과 같이 만들기 위해
1) border 값 4를 넣어 테두리 굵기 수정, 화면을 차지하는 비율 30%, 표를 페이지 중앙에 위치
2) 사진 부분 : 칸(셀) 병합이 있으므로 사진 부분에 colspan 속성을 이용하여 가로 2칸 병합, 높이 150px만큼 조절, 글자 중앙 위치
3) 이력서 부분 : colspan을 이용하여 가로 3개 칸 병합, 글자 중앙위치, 높이 65px만큼 조절, h2를 이용하여 글씨 크기 변경
4) 성명 부분 : rowspan을 이용하여 수직 2개 칸 병합, 높이 90px 조절, 글자 중앙에 위치
5) 인 부분 : rowspan을 이용하여 수직 2개 칸 병합, 글자 오른쪽에 위치
6) 생년월일 부분 : 글자 중앙 위치
7) 년월일생 부분 : 높이 50px조절, 글자 중앙 위치
3. 주소, 전화번호 공간
<div><!--주소, 전화번호 공간-->
<tr>
<td height="30px" colspan="2" align="center">주 소</td>
<td width="" colspan="3"></td>
</tr>
<tr>
<td height="30px" colspan="2" align="center">전 화 번 호</td>
<td colspan="3"></td>
</tr>
</div>1) 주소 부분 : 높이 30px조절, colspan을 이용하여 가로 2개 칸 병합, 글자 중앙 위치
2) 여백 부분 : colspan을 이용하여 가로 3개 칸 병합
3) 전화번호 부분 : 높이 30px조절, colspan을 이용하여 가로 2개 칸 병합, 글자 중앙 위치
4) 여백 부분 : colspan을 이용하여 가로 3개 칸 병합
4. 년월일, 학력, 기관장소 공간
<div><!--년 월 일, 학력, 기관장소 공간-->
<tr>
<td width="30%" height="30px" colspan="3" align="center">년 월 일</td>
<th align="center">학 력 및 경 력 사 항</th>
<td width="" align="center">기관 및 장소</td>
</tr>
<tr>
<td height="30px"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="30px"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="30px"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="30px"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="30px"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="30px"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="30px"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="30px"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="30px"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="30px"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="30px"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="30px"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="30px"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</div>1) 년월일 부분 : 넓이 30% 조절, 높이 30px 조절, colspan이용하여 가로 3개칸 병합, 글자 중앙 위치
2) 학력 및 경력사항 부분 : 글자 중앙 위치
3) 기관 및 장소 부분 : 글자 중앙 위치
4) 여백 셀 총 14줄 생성
5. 위 기재~~~ 공간
<div><!--위 기재 ~~ 공간-->
<tr>
<td height="60px" colspan="5" align="center">위의 기재한 내용은 사실과 다름이 없습니다.<br>
년 월 일 작성자 (인)
</td>
</tr>
</div>1) 위 기재~~ 부분 : 높이 60px 조절, colspan을 이용하여 가로 5칸 병합, 글자 중앙 위치
2) br태그를 사용하여 줄바꿈 후 년월일 기재
전체코드
<!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>resume</title>
</head>
<body>
<br>
<div><!--큰 틀-->
<table border="4" width="30%" align="center">
<div><!--사진, 이력서 성명 생년월일 공간-->
<tr>
<td rowspan="3" colspan="2" height="150px" width="" align="center">사 진</td>
<th colspan="3" height="65px" align="center">이 력 서</th>
</tr>
<tr>
<td rowspan="2" width="" height="90px" align="center">성 명</td>
<td rowspan="2" width="" align="right">인</td>
<td width="" align="center">생 년 월 일</td>
</tr>
<tr>
<td height="50px" align="center">년 월 일생 (만 세)</td>
</tr>
</div>
<div><!--주소, 전화번호 공간-->
<tr>
<td height="30px" colspan="2" align="center">주 소</td>
<td width="" colspan="3"></td>
</tr>
<tr>
<td height="30px" colspan="2" align="center">전 화 번 호</td>
<td colspan="3"></td>
</tr>
</div>
<div><!--년 월 일, 학력, 기관장소 공간-->
<tr>
<td width="30%" height="30px" colspan="3" align="center">년 월 일</td>
<th align="center">학 력 및 경 력 사 항</th>
<td width="" align="center">기관 및 장소</td>
</tr>
<tr>
<td height="30px"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="30px"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="30px"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="30px"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="30px"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="30px"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="30px"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="30px"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="30px"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="30px"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="30px"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="30px"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="30px"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</div>
<div><!--위 기재 ~~ 공간-->
<tr>
<td height="60px" colspan="5" align="center">위의 기재한 내용은 사실과 다름이 없습니다.<br>
년 월 일 &
결과물
비교
사진 이력서(왼쪽)를 보면 년월일, 경력사항, 기관장소 칸부터 위에 칸과는 다르게 셀이 다르게 정렬되어있는 것을 볼 수 있다.
하지만 오늘까지 배운 방법으로는 오른쪽이력서와 같이 표가 셀 갯수에 따라 넓이가 정확히 떨어지게 되었으며 완벽하게 작성하지 못해 아쉬운 부분이 있다.