StartUpSchool TIL Day1 (HTML/CSS 이력서 만들기, 예제)

이다감·2022년 2월 21일

HTML/CSS로 이력서 만들기를 해봤어요. 총 15강인데 한 강의가 길지는 않아서 집중해서 들을 수 있어요. 아주 기초부터 다시 들으니 정리가 되고 좋네요.

Html

이력서

Dagam Lee

HTML/CSS developer

ABOUT ME

Blah blah blah

EXPERIENCE

Awesome Programming Company

2020 - Now

Front-End Web Developer

HTML/CSS, JS, React, ...

Ministry of Health

2015 - 2018

UI/UX Designer

Web design

Freelance Work

2011 - 2015

Graphic Designer

Graphic Design, Editorial Design

  <section>
    <h2>ACTIVITIES</h2>
    <div class="float-wrap">
      <p class="title-text">Front-End Web Developer Forum Volunteer</p>
      <p class="year-text">2019 - 2020</p>
    </div>
    <p class="desc-text">Application Page Development</p>
    <p class="desc-subtext">Lorem ipsum dolor sit amet.</p>
    <div class="float-wrap">
      <p class="title-text">LIKELION SEOUL</p>
      <p class="year-text">2017 - 2018</p>
    </div>
    <p class="desc-text">Teacher in Mutsa University</p>
    <p class="desc-subtext">Lorem ipsum dolor sit amet.</p>
    <div class="float-wrap">
      <p class="title-text">Open Source Committer</p>
      <p class="year-text">2011 - 2013</p>
    </div>
    <p class="desc-text">Angular JS</p>
    <p class="desc-subtext">Lorem ipsum dolor sit amet.</p>
</section>

<section>
    <h2>EDUCATION</h2>
    <div class="float-wrap">
        <p class="title-text">Mutsa University</p>
        <p class="year-text">2008 - 2012</p>
    </div>
    <p class="desc-text">Computer Science and Engineering</p>
    <div class="float-wrap">
        <p class="title-text">Mutsa High school</p>
        <p class="year-text">2006 - 2008</p>
    </div>
    <p class="desc-text">Visual Communication Design</p>
    <div class="float-wrap">
        <p class="title-text">Online Programming Academy</p>
        <p class="year-text">2006 - 2007</p>
    </div>
    <p class="desc-text">Python Course</p>
</section>

<section>
  <h2>AWARDS</h2>
  <div class="float-wrap">
    <p class="title-text">LIKELION SEOUL</p>
    <p class="year-text">2018</p>
  </div>
  <p class="desc-text">Best Developer Award</p>
</section>

<div class="sns-wrap">
  <a href="http://facebook.com"><img class="sns-img" src="images/facebook.png"></a>
  <img class="sns-img" src="images/twitter.png">
  <img class="sns-img" src="images/linked-in.png">
  <img class="sns-img" src="images/insta.png">
</div>

**css

@import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800&display=swap');

{
font-family: 'Montserrat';
}

body,h1,h2 {
margin:0px;
padding:0px;
}

body {
min-width: fit-content;
}

h1 {
font-size:36px;
font-weight: bold;
font-style: italic;
}

h2 {
font-size:20px;
color:#282828;
font-weight: lighter;
margin-bottom: 16px;
border-bottom: 1px solid #ebebeb;
padding-bottom: 5px;
}

.name-text {
font-size:16px;
color:#7c7c7c;
font-weight: bold;
}

.about-me-text {
font-size:10px;
line-height: 16px;
}

.mainbox {
width: 610px;
padding: 30px;
margin: 30px;
margin-right: auto;
margin-left: auto;
border: 1px solid #ebebeb;
box-shadow: 0 1px 20px 0 rgba(0, 0, 0, 0.1);
}

.title-box {
text-align: right;
}

section {
margin-bottom:24px;
}

.float-wrap {
overflow: hidden;
}

.title-text {
font-size:11px;
font-weight: bold;
color: #282828;
float: left;
}

.year-text{
font-size:11px;
font-weight: bold;
color: #282828;
float: right;
}

.desc-text {
font-size: 9px;
}

.desc-subtext {
font-size: 9px;
color:#282828;
padding-left:16px;
}

.sns-img {
width:12px;
height:12px;
}

.sns-wrap {
text-align:right;
}

footer {
text-align: center;
background-color: #1e1e1e;
padding: 20px;
font-size: 12px;
color: #919191;
}