몇년 전에 Yahoo 여성 CEO Marissa Mayer의 Resume (자기소개서)가 인터넷에 올라와 핫이슈(?)가 된 적이 있었다. 나도 언젠가 저런 식으로 한번 Resume를 만들어보자는 생각을 해서 이번에 한번 도전을 해봤다.
What I wanted...
참고로 Marissa Mayer는 https://enhancv.com/ 사이트를 통해서 Resume를 작성했다 (우측하단 소스 참조)
What I can do so far...
많은 실패를했지만 block/in-line block 개념을 이해하니깐 성공할 수 있었다.
많이 허접하지만 아래 Html & CSS code를 사용해서 뼈대는 비슷하게 만들어봤다.
Html code
<html>
<head>
<link rel="stylesheet" href="./resume.css" />
</head>
<body>
<div class="content">
<div class="header">
<div class="header-information">
<div class="name">윤시훈</div>
<div class="english-name">Nate Yoon</div>
<div class="details">
<div class="detail address">
<img class="address-emoji" src="https://cdn.pixabay.com/photo/2020/04/29/16/51/navigation-5109688_1280.png">
<span>서울 강남구</span>
</div>
<div class="detail email">
<img class="email-emoji" src="https://cdn.pixabay.com/photo/2016/04/16/10/32/icon-1332774_1280.png">
<span>syoon2**@gmail.com</span>
</div>
<div class="detail telephone-number">
<img class="telephone-number-emoji" src="https://cdn.pixabay.com/photo/2017/01/13/01/22/mobile-1976104_1280.png">
<span>010-55*1-7**8</span>
</div>
</div>
</div>
<img class="portrait" src="https://ucfefe1c4636bd5f5440c6d48543.previews.dropboxusercontent.com/p/thumb/AA0mGVuQ5y59y7MjzIis_wvkBTcjTfOFYnGfWzWnxg8rphhfhm-fOv7aOAW1g6y-g2bWKx7NRBWn5Mn4AzMySt96oqcYNOA7ZAFeKwn-B0PUnSNpMCh_3mfUGVDJ-txEXGYEmjIQFL7re2xRqEC57Iy0-vmzFCONOyGxYfLeGoXIplIabC08T3Wlgfp5t2FXpdSdnENzeh-aZUPR9i51AAiP0yd60QEh5Os7b6GBlsI3dRjzkNREeb3H7IXUIvFyd6q8jNzdyLkkLFpP6IkATkS1-M7K5lM8W5nnBtlYf8OL39jCHUSvJHkyKiGvDa_c9vhdCOXXMGqPxe_SKhzrTXgnjlEVNy802em1oqPB30y-utOXISpWAutsOSo0T5pA23KPt-iiHBc-4ca2Ck6SaD07/p.jpeg?fv_content=true&size_mode=5" alt="Shihoon Yoon">
</div>
<div class="columns">
<div class="column column-one">
<div class="row experience">
<h3 class="row-title">경력</h3>
<div class="job">
<h4 class="job-date"><i>2017-현재</i></h4>
<div>주식회사 이*트</div>
<div>해외사업개발 팀장</div>
<ul class="job-description">
<li>수입/수출 업무</li>
</ul>
</div>
<div class="job">
<h4 class="job-date"><i>2016-2017</i></h4>
<div>(주)강**바이오텍</div>
<div>사업개발 팀원</div>
<ul class="job-description">
<li>Licensing-Out 업무</li>
</ul>
</div>
</div>
<div class="row education">
<h3 class="row-title">학력</h3>
<div class="school graduate">
<h4 class="graduate-date"><i>2011 - 2014</i></h4>
<div>Georgetown University</div>
<div>Health Administration, M.H.A.</div>
<div>경영(의료) 석사</div>
</div>
<div class="school college">
<h4 class="college-date"><i>2006-2010</i></h4>
<div>Virginia Commonwealth University</div>
<div>Biology, B.S.</div>
<div>생물 학사</div>
</div>
</div>
</div>
<div class="column column-two">
<div class="row my-interest">
<h3 class="row-title">관심분야</h3>
<h2 class="say interest">Front-end</h2>
<h3 class="say interest">JavaScript</h3>
</div>
<div class="row goal">
<h3 class="row-title">BOOTCAMP 목표</h3>
<h2 class="say goal">아이디어를 코딩으로!!</h2>
<h4 class="say goal">'Turning Ideas into Code'</h4>
</div>
<div class="row my-daily-life">
<h3 class="row-title">하루 일과</h3>
<img class="daily-life-donut" src="https://uc1c2b0245b86e79277a1899bbdc.previews.dropboxusercontent.com/p/thumb/AA3a_SxO5KuMQ2iOT593pEqxXiQIwLl7Piz6rT9MuoinkNnDnY1R8_4SmEJSG1j0-8YtOFGeAgv9ejqECcEU-iZac0V8IBemjbadPdVJeLFtjUpK_HyJA17AiUYECvLVCzerkujgevFGe3xHqFYoPfryO7CGX_du7Xyc63tvnryl4ftf6kwHm5vmE6DVpsfW8E89Aw_JKMIJ461Cm_Mn21G1AaxYXtkaE0ksly63FYZxdVbucoxL3sv_zOTUpIa6B-O8P5vbzdUB2VRAKqfRXWAyXK-vWx5VC8bp6wH8GaxZwBrbtUb13Gpn2vq3f-WxYgrHpMXirsy25dBy3_Qgn3ezXtqXKRdLEe6A7bpbU06-Jzu13p0vHeYCNhzCgGgSfDT8jw4uY1GeRTV1cvFbFyBG/p.png?fv_content=true&size_mode=5" alt="Daily Life"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS code
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.content {
width: 100%;
max-width: 1540px;
margin: 10px auto;
padding: 20px;
background-image: url("https://cdn.crowdpic.net/detail-thumb/thumb_d_EC65D8D860ED7BF8C914F4A155B7E1AC.jpg");
background-repeat: no-repeat;
background-size: cover;
color: rgb(87, 85, 85);
}
.header {
padding: 20px;
font-size: 0;
font-weight: 700;
}
.header-information {
display: inline-block;
width: calc(100% - 250px);
font-size: 20px;
}
.name {
font-size: 100px;
margin: 0 0 10px 0;
}
.english-name {
font-size: 44px;
color: #034694;
margin: 0 0 10px 0;
}
.detail {
display: inline-block;
margin-right: 50px;
font-size: 32px;
}
.portrait {
display: inline-block;
width: 250px;
border-radius: 50%;
}
.email-emoji {
width: 30px;
}
.address-emoji {
width: 20px;
}
.telephone-number-emoji {
width: 40px;
}
.columns {
font-size: 0;
}
.column {
display: inline-block;
padding: 20px;
vertical-align: top;
font-size: 24px;
}
.column-one {
width: 60%;
}
.column-two {
width: 40%;
}
.job{
text-indent: 50px;
}
.school{
text-indent: 50px;
}
.say{
text-align: center;
}
.row {
font-size: 36px;
font-weight: 700;
}
.row-title {
margin: 0;
font-size: 52;
color: #034694;
padding-bottom: 10px;
border-bottom: 5px solid #034694;
}
.daily-life-donut {
width: 600px;
height: 600x;
display: block;
margin-left: auto;
margin-right: auto;
}
Entrepreneurs Should Learn to Code
시훈님 학력에 한번, 직급에 두번 지리고 갑니다... + 그 와중에 수면시간 따위 할애할 수 없는 하루일과 kia...