<๋ง๋ค๊ณ ์ ํ๋ ๋์์ธ>
<์์ฑ๋ณธโ๏ธ>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>LeeSangwoo Resume</title>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
<style type="text/css">
head {
font-size: 14px;
font-family: "๋ง์ ๊ณ ๋", ๋๋๊ณ ๋, ๋์, sans-serif;
}
.header {
background-color: rgb(216, 217, 223);
width: 500x;
height: 400px;
width: 1000px;
margin: auto;
}
.header .left {
width: 10%;
display: inline-block;
height: 400px;
box-sizing: border-box;
}
.header .right {
width: 70%;
display: inline-block;
height: 10px;
box-sizing: border-box;
vertical-align: bottom;
text-align: right;
}
.body {
font-size: 20px;
font-family: "๋ง์ ๊ณ ๋", ๋๋๊ณ ๋, ๋์, sans-serif;
margin: auto;
}
.body-container {
padding: 20px;
}
.table {
width: 100%;
border-collapse: collapse;
border : 0;
margin-top: 30px;
}
.table tr {
border-bottom: 1px solid #ccc;
font-size: 20px;
font-weight: 400;
}
.table thead tr:first-child {
border-bottom: 3px solid #333;
}
.table th, .table td {
padding: 6px 0;
border: none;
border-left: none;
border-right: none;
}
</style>
</head>
<body>
<div class="header" style="margin: 0 auto;">
<div>
<img src="sangwoo.png" width="600" height="370"
style="padding-top: 30px; float: left;">
</div>
<div
style="width: 300px; height: 200px; text-align: right; padding-top: 200px; padding-right: 60px; float: right">
<p style="text-align: right">
<span style="font-size: 40px; font-weight: 600; color: gray">'๋ฐ๋ฅธ
์ฌ๋์ด'</span><br> <span style="font-size: 50px; font-weight: 700;">์ด
์ ์ฐ</span><br> <span style="font-size: 45px; font-weight: 400;">Lee
SangWoo</span>
</p>
</div>
</div>
<div class="body-container" style="width: 1000px; margin: 0 auto;">
<div class="body-container" style="width: 460px; float: left;">
<table class="table" border="1" style="width: 460px; height: 170px">
<thead>
<tr>
<td width="100" style="font-size: 25px; font-weight: 700">๊ธฐ๋ณธ์ฌํญ<span
style="font-size: 20px; font-weight: 600px; color: gray"> PERSONAL
DETAIL</span></td>
</tr>
</thead>
<tbody>
<tr>
<td width="100"><i class="fa-solid fa-user"></i> 1993.01.14(๋ง
27์ธ)</td>
</tr>
<tr>
<td width="100"><i class="fa-solid fa-phone"></i>
010.1233.5678</td>
</tr>
<tr>
<td width="100"><i class="fa-solid fa-envelope"></i>
miri@miricanvas.com</td>
</tr>
</tbody>
</table>
<table class="table" border="1" style="width: 460px; height: 170px">
<thead>
<tr>
<td width="100" colspan="3"
style="font-size: 25px; font-weight: 700">ํ๋ ฅ์ฌํญ<span
style="font-size: 20px; font-weight: 600px; color: gray"> EDUCATION</span></td>
</tr>
</thead>
<tbody>
<tr>
<td>2000๋
~2003๋
</td>
<td style="text-align: center">๋ฏธ๋ฆฌ๊ณ ๋ฑํ๊ต</td>
<td style="text-align: right">์ธ๋ฌธ๊ณ์ด</td>
</tr>
<tr>
<td>2000๋
~2003๋
</td>
<td style="text-align: center">๋ฏธ๋ฆฌ๋ํ๊ต</td>
<td style="text-align: right">๋์์ธํ๊ณผ</td>
</tr>
<tr>
<td>2000๋
~2003๋
</td>
<td style="text-align: center">๋ฏธ๋ฆฌ๋ํ์</td>
<td style="text-align: right">๊ฒฝ์ํ๊ณผ</td>
</tr>
</tbody>
</table>
</div>
<div class="body-container" style="float: left; width: 460px;">
<table class="table" border="1" style="width: 460px; height: 170px">
<thead>
<tr>
<td width="100" colspan="3"
style="font-size: 25px; font-weight: 700">์๊ฒฉ์ฆ<span
style="font-size: 20px; font-weight: 600px; color: gray"> LICENSE</span></td>
</tr>
</thead>
<tbody>
<tr>
<td width="100">์ด์ ๋ฉดํ์ฆ</td>
<td width="100">2020</td>
<td width="100">์๊ฒฉ์ฆ๋ฐ๊ธ์ฒ</td>
</tr>
<tr>
<td width="100">ITQ</td>
<td width="100">2039</td>
<td width="100">์๊ฒฉ์ฆ๋ฐ๊ธ์ฒ</td>
</tr>
<tr>
<td width="100">ํ๊ตญ์ฌ ์๊ฒฉ์ฆ</td>
<td width="100">2039</td>
<td width="100">์๊ฒฉ์ฆ๋ฐ๊ธ์ฒ</td>
</tr>
</tbody>
</table>
<table class="table" border="1" style="width: 460px; height: 170px">
<thead>
<tr>
<td width="100" colspan="3"
style="font-size: 25px; font-weight: 700">๊ธฐ์ <span
style="font-size: 20px; font-weight: 600px; color: gray"> SKILLS</span></td>
</tr>
</thead>
<tbody>
<tr>
<td width="100">MS word 2010</td>
<td width="100">โโโโโ</td>
</tr>
<tr>
<td width="100">MS execl2</td>
<td width="100">โโโโโ</td>
</tr>
<tr>
<td width="100">Adobe photoshop CC</td>
<td width="100">โโโโโ</td>
</tr>
<tr>
<td width="100">Adobe illustrator CC</td>
<td width="100">โโโโโ</td>
</tr>
</tbody>
</table>
</div>
<div class="body-container">
<table class="table" border="1" style="width: 980px; margin: auto;">
<thead>
<tr>
<td width="100" colspan="3"
style="font-size: 25px; font-weight: 700">๋์ธํ๋ <span
style="font-size: 20px; font-weight: 600px; color: gray"> EXPERIENCE
CAREER</span></td>
</tr>
</thead>
<tbody>
<tr>
<td>๋ฏธ๋ฆฌ ์์คํฌ ์ ์ํ</td>
<td style="text-align: center">2020.10.19</td>
<td style="text-align: right">์ ์ ์ฃผ๊ด ๋ฐ ์ ์ ์ฐธ์ฌ</td>
</tr>
<tr>
<td>๋ฏธ๋ฆฌ๋์์ธ ์ธํด</td>
<td style="text-align: center">2020.01.19-2020.08.30</td>
<td style="text-align: right">์ ์ ์ฃผ๊ด ๋ฐ ์ ์ ์ฐธ์ฌ</td>
</tr>
<tr>
<td>2020.10.19</td>
<td style="text-align: center">2018.09.20~2020.10.30</td>
<td style="text-align: right">์ ์ ์ฃผ๊ด ๋ฐ ์ ์ ์ฐธ์ฌ</td>
</tr>
</tbody>
</table>
</div>
<div class="body-container">
<table class="table" border="1" style="width: 980px; margin: auto;">
<thead>
<tr>
<td width="100" colspan="3"
style="font-size: 25px; font-weight: 700;">๊ฒฝ๋ ฅ์ฌํญ <span
style="font-size: 20px; font-weight: 600px; color: gray"> WORK
EXPERIENCE</span></td>
</tr>
</thead>
<tbody>
<tr>
<td>๋ฏธ๋ฆฌ ์บ๋ฒ์ค (์ง๊ธ: ์ฌ์)</td>
<td style="text-align: center">2018.09.20~2020.10.30</td>
<td style="text-align: right">์น ํ๋ก๋ชจ์
๋์์ธ</td>
</tr>
<tr>
<td>์ค๋ง์ผ์บฃ(์ง๊ธ:์ฌ์)</td>
<td style="text-align: center">2018.09.20~2020.10.30</td>
<td style="text-align: right">๊ทธ๋ํฝ ๋์์ธ ์
๋ฌด</td>
</tr>
<tr>
<td>๋น์ฆํ์ฐ์ค (์ง๊ธ: ์ฌ์)</td>
<td style="text-align: center">2018.09.20~2020.10.30</td>
<td style="text-align: right">์ธ์๋ฌผ ๋์์ธ ์
๋ฌด</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
'๐ปProgramming > ๐จ ์ค์ต' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[HTML&CSS] Grid - CGV ์ํ ์ด๋ฒคํธ ์ ๋ณด ๋ง๋ค๊ธฐ๐ (0) | 2022.09.15 |
---|---|
[HTML&CSS] CGV ์ํ ์์ ๋ชฉ๋ก ๋ง๋ค๊ธฐ๐ (0) | 2022.09.15 |
[HTML] 04. ํ ์ด๋ธ ํ๊ทธ ์ค์ต (0) | 2022.09.13 |