HTML履歴書の記入

20311 ワード
CSS html テキストリンク
HTML、CSSに基づいて作成された履歴書
HTMLタグを使用したドキュメントスケルトンの作成
CSS応用設計の使用
BOX MODELの作成
Google Webフォントを使用
シャドウ、リンクの挿入
PyCharmでChromeを直接確認し比較した.
htmlの基本ラベルを利用して、htmlからどのように描画するかから始めます.

文字のエンコーディング方法を指定します.
クラス設計とタグ(p,h 1,footer)を使用して基本構造を決定します.
아래와 같이 CSS코드를 작성했다.
.name-text {                                  
    font-size: 17px;                         
    color: #7c7c7c;
    font-weight: bold;
}

.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);
}

footer {
    text-align: center;
    background-color: #1e1e1e;
    padding: 20px;
    font-size: 12px;
    color: #919191;
}
ラベルとクラスの基本設計を行いました.
残りの領域を作成して完成させるためにMontserratフォント(無料)を読み込み、BOXを指定しました.
シャドウの追加、写真の挿入、リンクの挿入も行いました.
結果.
目標は内容物を満たすことではないので、内容はロリンの口呼吸です.

きれいに見えますね.
色も勝手に変えてみましたが、グリーン系が一番きれいに見えました.
.float-wrap {
    overflow: hidden;
    margin-bottom: 4px;
}

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

.year-text{
    font-size:11px;
    font-weight: bold;
    color: #3DFF92;
    float: right;
}
Floatで同じ行を左右に揃えることができます.
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>이력서</title>
  <link rel="stylesheet" href="codelion.css">
</head>
<body>
  <div class="mainbox">
    <div class="title-box">
        <h1>옥개발</h1>
        <p class="name-text">HTML/CSS 개발자</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">2022 - Now</p>
        </div>
        <p class="desc-text">Front-End Web Developer</p>
        <p class="desc-subtext">HTML/CSS, JS, React, Vue ...</p>
        <div class="float-wrap">
          <p class="title-text">OK company</p>
          <p class="year-text">2016 - 2020</p>
        </div>
        <p class="desc-text">과학자</p>
        <p class="desc-subtext">물리학자</p>
        <div class="float-wrap">
            <p class="title-text">Freelance Work</p>
            <p class="year-text">2011 - 2015</p>
        </div>
        <p class="desc-text">공학자</p>
        <p class="desc-subtext">연습용입니다</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>
HTMLは次のように記述されています.
思ったより構造を作るのは簡単ですが.
思ったよりCSSの制作に心血を注ぐのは難しいです.
熟練した過程が必要らしい.
機会があればBoot Streetで一度作ってみたい
李斗熙代表の講義もかっこよかった
redisプライマリスレーブ+keepalivedによる高可用性の実現
redis学習ノート1