개발자 미니민의 개발스터디

[HTML] 이력서 양식 만들기 (table / float 이용)

by mini_min

프로젝트 실습/[Project] HTML

HTML 로 이력서 만들기 (table / float 이용)

사진 이미지 출처 : 카카오 이모티콘

✨ HTML 을 배운지 이제 2일차

생각했던 것만큼은 만들지 못했고 CSS 가 익숙하지 않아서 좀 지저분하게 코드가 들어간 것 같다.😢

- 미리캔버스에 있는 무료 이력서 양식 내용 참고하여 작성

- table 을 모두 따로 작성해 float 으로 어찌어찌 맞춤

- 폰트 : MICE폰트 (무료폰트)

- 코드에서 <img> 태그는 사진 주소로 들어가서 빼고 올린다.

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">

<style type="text/css">
* {margin: 0; padding: 0;}

body {
	font-size: 11px;
	font-family: "MICE고딕"
}

.body-container {width: 790px; height: 1000px; margin: 0 auto; background: (238, 242, 239);}
.body-line {width: 300px; height: 1000px; float: left; background: #777;}
.body-container .title { width: 760px; font-size:23px;  height: 200px; padding: 50px 20px;}



/*테이블 전체 속성*/
.table { width: 100%; border-spacing: 0; margin: 0 20px; border-collapse: collapse;}

/*표 레이아웃 틀
.table tr {border: 1px solid #777;}*/
.table tr { border-bottom: 1px solid rgb(192, 192, 192); }

/*표 첫 제목*/
.table thead tr:first-child {
	margin-right: 400px;
	font-size: 16px;
	font-weight: 600;
	color: rgb(64, 128, 128);
}

/*테이블 패딩값!*/
.table td {
	padding: 7px 7px;
}

/*첫 위에 줄 진하게*/
.table thead tr:first-child {
	border-bottom: 2px solid #777;
}


</style>

</head>
<body>


<div class="body-container">
		<div class="title" style="text-align: right;">
			<h2 >✨ 소문난 성실 만렙</h2>
			<h1 >나성실 입니다.</h1>
		</div>
	
	<div style="width: 300px; float: left; margin-right: 20px; margin-bottom: 30px;">
	<table class="table" >
		<thead>
			<tr>
				<td colspan="2"><i class="fa-solid fa-user"></i> 개인 정보 ——————————— </td>		
			</tr>
		</thead>
		<tbody>
			<tr>
				<td >이름 : 나성실</td>
			</tr>
			<tr>
				<td>생년월일 : 1992년 05월 06일</td>
			</tr>
			<tr>
				<td>이메일 : miridl@gmail.com</td>
			</tr>
			<tr>
				<td>주소 : 서울 미리동 미리로 184-3 미리아파트 201동</td>
			</tr>
		</tbody>
	</table>
	</div>	
	
	<div style="width: 430px; float: right; margin-right: 40px;">
	<table class="table">
		<thead>
			<tr>
				<td colspan="2"><i class="fa-solid fa-graduation-cap"></i> 학력사항  ————————————————— </td>		
			</tr>
		</thead>
		<tbody>
			<tr>
				<td rowspan="2" style="width: 130px;" align="center">2008-2011</td>
				<td >미리디자인고등학교</td>
			</tr>
			<tr>
				<td>학과 : 산업디자인과</td>
			</tr>
			<tr>
				<td rowspan="2" align="center">2011-2014</td>
				<td>미래대학교 산업디자인과</td>
			</tr>
			<tr>
				<td>복수전공 : 영어영문학과</td>
			</tr>
		</tbody>
	</table>
	<br><br>
	</div>

	
	<div style="width: 300px; clear: both; float: left;">
	<table class="table">
		<thead>
			<tr>
				<td colspan="2"><i class="fa-solid fa-id-card"></i> 자격증 ————————————</td>		
			</tr>
		</thead>
		<tbody>
			<tr>
				<td style="width: 100px; text-align: center;" >2008.03</td>
				<td style="text-align: center">GTQ 포토샵1급</td>
			</tr>
			<tr>
				<td style="width: 100px; text-align: center;">2008.03</td>
				<td style="text-align: center">전자출판기능사</td>
			</tr>
			<tr>
				<td style="width: 100px; text-align: center;">2008.03</td>
				<td style="text-align: center">ITQ아래한글A</td>
			</tr>
			<tr>
				<td style="width: 100px; text-align: center;">2008.03</td>
				<td style="text-align: center">GTQ 일러스트1급</td>
			</tr>
			<tr>
				<td style="width: 100px; text-align: center;">2008.09</td>
				<td style="text-align: center">디자인 지도 전문가1급</td>
			</tr>
		</tbody>
	</table>
	</div>	
	
	
	<div style="width: 430px; float: right; margin-right: 40px;">
	<table class="table">
		<thead>
			<tr>
				<td colspan="2"><i class="fa-solid fa-briefcase"></i> 경력정보  —————————————————</td>		
			</tr>
		</thead>
		<tbody>
			<tr>
				<td rowspan="2" style="width: 130px;" align="center">2008-2011</td>
				<td>디자인학부 해외 디자인 연수</td>
			</tr>
			<tr>
				<td>영국 자매 대학교 디자인 연수 수료</td>
			</tr>
			<tr>
				<td rowspan="2" align="center">2011-2014</td>
				<td>"바게트" 베이커리 상품 브랜딩</td>
			</tr>
			<tr>
				<td>인턴 디자이너로 상품 브랜딩 진행</td>
			</tr>
			<tr>
				<td rowspan="2" align="center">2011-2014</td>
				<td>(주)MD디자인팩토리 계약직 근무</td>
			</tr>
			<tr>
				<td>3개월 단기 계약직으로 근무</td>
			</tr>
			<tr>
				<td rowspan="2" align="center">2011-2014</td>
				<td>(주)바우니 가구디자인 컨텐츠 마케팅</td>
			</tr>
			<tr>
				<td>프리랜서로 가구디자인 회사 마케팅 캠페인 참여</td>
			</tr>
			
		</tbody>
	</table>
	<br><br>
	</div>	

	<div style="width: 300px; clear: both; float: left;">
	<table class="table">
		<thead>
			<tr>
				<td colspan="2"><i class="fa-solid fa-wrench"></i> 기술 숙련도 —————————— </td>		
			</tr>
		</thead>
		<tbody>
			<tr>
				<td style="width: 100px; text-align: center;">PhotoShop </td>
				<td style="text-align: center">■■■■■□</td>
			</tr>
			<tr>
				<td style="width: 100px; text-align: center;">Illustrator </td>
				<td style="text-align: center">■■■■■□</td>
			</tr>
			<tr>
				<td style="width: 100px; text-align: center;">HTML </td>
				<td style="text-align: center">■■■■■■</td>
			</tr>
			<tr>
				<td style="width: 100px; text-align: center;">PowerPoint </td>
				<td style="text-align: center">■■■■■■</td>
			</tr>
			<tr>
				<td style="width: 100px; text-align: center;">Speaking </td>
				<td style="text-align: center">■■■□□□</td>
			</tr>
		</tbody>
	</table>
	</div>	
	
	
	<div style="width: 430px; float: right; margin-right: 40px;">
	<table class="table">
		<thead>
			<tr>
				<td colspan="2"><i class="fa-solid fa-trophy"></i> 수상경력  —————————————————</td>		
			</tr>
		</thead>
		<tbody>
			<tr>
				<td rowspan="2" style="width: 130px;" align="center">2008.08</td>
				<td>디자인 공모전(금상) </td>
			</tr>
			<tr>
				<td>서울 디자인 공모전 금상 수상</td>
			</tr>
			<tr>
				<td rowspan="2" align="center">2008.10</td>
				<td>포스터 공모전 (은상)</td>
			</tr>
			<tr>
				<td>소방 안전 포스터 공모전 은상 수상</td>
			</tr>
			<tr>
				<td rowspan="2" align="center">2011.10</td>
				<td>컨텐츠 공모전 (최우수상)</td>
			</tr>
			<tr>
				<td>한국컨텐츠진흥원 공모전 최우수상 수상</td>
			</tr>
			
		</tbody>
	</table>
	<br><br>
		</div>	

</div>




</body>
</html>

 

 

 

'프로젝트 실습 > [Project] HTML' 카테고리의 다른 글

[HTML] 글쓰기 게시판 - 연습  (0) 2022.09.09
[HTML] 게시판 버튼 만들기 (button 태그) - 연습  (0) 2022.09.09
[HTML] 게시판 페이지 버튼(page-box) 만들기 - 연습  (0) 2022.09.09
[HTML] 게시판 만들기 - 연습  (0) 2022.09.09
[HTML] 성적처리 게시판 - 연습  (0) 2022.09.09

블로그의 정보

개발자 미니민의 개발로그

mini_min

활동하기

티스토리툴바