멋쟁이 사자처럼 첫 과제
강의 창이 정말 좋은게 브라우저에서 어지간한 코드 실행을 다 할 수 있다!
비엣팅 너무 편하고 신기✨✌


HTML

image

<!DOCTYPE html>
<head>
    <title>Mar 30</title>
</head>
<body>
    <h1>Move to the dorm Apr 01</h1>
    <ul>
        <li>Send the packages</li>
        <li>Clean this room</li>
    </li>
</body>

강의 들으며 처음 알게된 것은 <!DOCTYPE html>은 큰 의미가 없다고 한다
그리고 <html>과 더불어 최신 브라우저에서는 두 태그가 없어도 구동되는데 문제가 없다고 한다


p, footer, h1 등등 태그 배웠다

CSS

폰트 크기 조정 등등
overflow: hidden float 해놓은 태그가 다른 요소들과 겹치지 않게 하려고


이력서

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>My resume</title>
  <link rel="stylesheet" href="codelion.css">
</head>
<body>
  <div class="mainbox">
    <div class="title-box">
      <h1>김혜원</h1>
      <p class="name-text">Backend 개발자</p>
    </div>
    <section>
      <h2>ABOUT ME</h2>
      <p class="about-me-text">
      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.
      </p>
    </section>
    <section>
        <h2>EXPERIENCE</h2>
        <div class="float-wrap">
          <p class="title-text">Awesome Programming Company</p>
          <p class="year-text">2020 - Now</p>
        </div>
        <p class="desc-text">Front-End Web Developer</p>
        <p class="desc-subtext">HTML/CSS, JS, React, ...</p>
        <div class="float-wrap">
          <p class="title-text">Ministry of Health</p>
          <p class="year-text">2015 - 2018</p>
        </div>
        <p class="desc-text">UI/UX Designer</p>
        <p class="desc-subtext">Web design</p>
        <div class="float-wrap">
            <p class="title-text">Freelance Work</p>
            <p class="year-text">2011 - 2015</p>
        </div>
        <p class="desc-text">Graphic Designer</p>
        <p class="desc-subtext">Graphic Design, Editorial Design</p>
      </section>

      <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>
  </div>
  <footer>
      <p>Copyright CODE LION All rights reserved. </p>
  </footer>
</body>
</html>

@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;
}