かっこいいライオンのようにFEスクール第2期-4月1日

16166 ワード
おしゃれなライオンのように TIL テキストリンク
四月が明ける.
馬...ライオンたちがんばれ!!🐾

今日のキーワード📌

  • CSS
  • 簡単履歴書ページ

    • 1. CSS


    今日聞いたCSS講座に出てきた情報を簡単に記録します!
  • divにwidthの値が指定されていない場合、親要素を基準として領域が満たされます.

  • 左上から内容を伝え始めた理由は、文化圏の影響を受けたからです.
    (わが国は左から右へ文章を読む)

  • initial属性は明確な初期値を表します!

  • タイプセレクタは初期化時にのみ使用されます!オシャレは危険!body { margin : 0 ... }からbodyはタイプコレクタに対応する

  • ブロックレベル要素は、ブロック要素よりも正確に表示されます.

  • [ブロックレベル](Block Level)領域は、基本的に水平軸だけが中央に揃えられます.垂直軸の位置合わせができません.

  • 昆虫の構造が頭、胸、腹に分かれているように、ネットワーク構造も頭、主(内容)、親領域に分かれています.
  • cssにも何人かの専門家が継承関係を持っている.

  • 継承をサポートするプロパティは、初期化時にinheritプロパティを使用することが望ましい.
    継承がサポートされていない場合は、initialプロパティと書きます.
  • width: 100%とwidth: autoの差!


  • 積み木レベルのアクセサリーに隣接する上下marginが重なる事実!!!


  • 選択者優先順位は?同じ要素が複数の宣言のターゲットになる場合、どの宣言のcss属性を優先的に適用するかを決定する方法!
    	1. 점수가 높은 선언이 우선된다!
	2. 점수가 같으면, 가장 마지막에 해석된 선언이 우선된다!
    点数の大きさは以下の通りです.
  • !重要>IDセレクタ>カテゴリセレクタ>ラベルセレクタ>完全セレクタ

    • 2.簡単な履歴書ページ



    個人情報


    顔が栗の実なので、顔の形も栗の感じがするようなので、border-radius: 69% 31% 35% 65% / 53% 57% 43% 47%;のお値段をあげました.フラワーborder radiusサイト参照.

    インフォメーション


    情報および技術は、ulタグに構造化され、仮想セレクタ:hoverを用いて色変化を行う.


    ブット


    プラットは画像フラッシュ技術を用いて体現した.

    簡単な履歴書ページ(修正)



    学んだhtmlとcssを利用して尊敬しました!
    <!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8" />
    <title>PROFILE</title>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>

    <main class="main">

      <header class="header">
        <img class="profile" src="./images/profile_bam.jpg" alt="프로필사진" />
        <h1>이름</h1>
        <p>성장하는 개발자</p>
      </header>
      
      <section class="section">

        <div class="contents">
          <article class="article info">
            <h2>정보</h2>
            <ul class="list">
              <li>이름</li>
              <li>이메일</li>
              <li>국가, 지역</li>
            </ul>
          </article>
          <article class="article skills">
            <h2>기술</h2>
            <ul class="list">
              <li>HTML Living Standard, CSS</li>
              <li>JavaScript(ES6)</li>
              <li>React</li>
            </ul>
          </article>
        </div>

      </section>
      
      <footer class="footer">
        <a class="icon github" href="#"></a>
        <a class="icon facebook" href="#"></a>
        <a class="icon email" href="#"></a>
      </footer>
      
    </main>

  </body>

</html>
    divラベルをできるだけ乱発しないでください.sectionとarticleに対してまだ明確な概念がなくて、更に学ぶ必要があります!

    リファレンス

  • 今日の特別講義の李宗燦講師束営YouTubeアドレス.
    △すべてのライオンは李鐘燦先生の授業の実力をほめてくれました.本当にCSSが好きだと感じて、授業の雰囲気が幸せです.
    • HTML-form練習(スターバックス会員加入)
    モダンJavaScript Day 4&5