1~2일차 html, css로 자기소개서 만들기

조정환·2021년 10월 30일

조정환의 이력서

조정환

HTML/CSS 개발자

ABOUT ME

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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>
  <a href="http://twitter.com"><img class="sns-img" src="images/twitter.png">
  <a href="http://linked-in.com"><img class="sns-img" src="images/linked-in.png">
  <a href="http://insta.com"><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;
}