タヌキ匹

10985 ワード
大邱AI学校 テキストリンク

学習内容


header



  • ルール内でコードを統一的に記述します.

  • ヘッダータグはどうせ1つしか使わないので、なぜidをあげたのか知りたいです.
    ->htmlファイルで発生したページ数がページ数と同じであれば、混乱する可能性があります.

  • inputとbutton(inline要素)を連続的に記入したため、空白が発生しました.
    ->calc(100%-52 px)を使用して、ボタンサイズを100%減算したinputのサイズを指定します.calc()を使用する場合はスペースに注意してください!
    ->空白のサイズのため、ボタンを下に移動します.
    ->親をflexboxにし、videfication-content:space-tweenを採用し、公開する必要はありません.

  • Inputバーをクリックして青い枠を作成します.(textareaも.)
    ->input:focus inputがfocus状態の場合outline:noneを適用します.

  • box-shadow
    https://html-css-js.com/css/generator/box-shadow/

  • free_icon
    https://icons8.com/

    • 左中左


    1. floatを使用する場合は、liごとにfloat:leftおよびwidth比率、height、border-bottom、border-rightを指定します.nth-childを使用して6の倍数を指定します.すなわち、各行の最後の要素にborder-right:noneを指定します.次に、最後の行のborder-bottomにnoneを適用します.
    main #news_wrap .news_lists .news_list {
  position: relative;
  float: left;
  width: 16.66%;
  height: 65px;
  background-color: #ffffff;

  border-bottom: solid 1px #e4e8eb;
  border-right: solid 1px #e4e8eb;

  text-align: center;
}

main #news_wrap .news_lists .news_list:nth-child(6n) {
  border-right: none;
}

main #news_wrap .news_lists .news_list:nth-child(19),
main #news_wrap .news_lists .news_list:nth-child(20),
main #news_wrap .news_lists .news_list:nth-child(21),
main #news_wrap .news_lists .news_list:nth-child(22),
main #news_wrap .news_lists .news_list:nth-child(23),
main #news_wrap .news_lists .news_list:nth-child(24) {
  border-bottom: none;
}
  • メッシュが使用される場合、border-top、border-left、border-right、border-bottomがコンテナに適用されます.
    • main #news_wrap .news_lists {
  display: grid;
  height: 260px;
  grid-template-columns: repeat(6, 1fr);
  border-top: solid 1px #e4e8eb;
  border-left: solid 1px #e4e8eb;
}

main #news_wrap .news_lists .news_list {
  background-color: #fff;
  text-align: center;
  border-right: solid 1px #e4e8eb;
  border-bottom: solid 1px #e4e8eb;
}

  • 親要素にoverflow:hiddenを適用して、親要素のサイズを子要素と同じに変更できます.

  • nh−child(6 n)は,6の倍数のchildしか適用できない.

  • y軸中央揃え
  • top: 50%;
    transform: translateY(-50%);
    箱内位置は箱内標準topが50%の位置であり、transform属性値に適した位置はその内容標準-50%の位置である.
  • line-height:boxのpxで、y軸を中央に揃えます.
    もともとは文の行間隔を調整するために使われていた.したがって、指定した値ではなくemまたは%を使用すると、番号に比例する間隔で調整されます.

  • strong tagは文章を太くすることができます.

  • cssセレクタで>を使用する場合は、ノードを最初の要素の真下のサブ要素として選択します.

    • form tag


    formは、ユーザーがWebサイトやアプリケーションと対話する重要な技術の一つです.フォームでは、ユーザーがWebサイトにデータを送信できます.一般的には、データはWebサーバに転送されますが、Webページではデータを使用することもできます.

  • form要素にはaction属性とmethod属性が必要です.
    Action:データを送信するURLを指定します.
    方法:どのHTTP方式を使用するかを指定します.

  • label, input, textarea
  • labelのforプロパティは、input、textareaのidを接続するために使用されます.
  • inputの最も重要な属性はtypeです.たとえば、email、passwordなどでは、Client-sideform検証が適用されます.email形式に一致するかどうかを確認します.
  • inputtype=textにデフォルト値を入力する場合はvalueプロパティを使用します.<input type="text" value="by default this element is filled with this text" />textareaは、タグ間にデフォルトの文字列を入れることができます.<textarea>by default this element is filled with this text</textarea>

  • button
    buttonのタイプはsubmit、reset、buttonです.
    submitを使用して、フォーム要素の操作で定義されたWebページにフォームデータを送信します.
    resetはリセット、buttonはボタンですが、JSを使うと役に立つかもしれません.

  • name
    データを送信する場合は、フォームコンポーネントごとにnameプロパティを指定する必要があります.
    • <form action="/my-handling-form-page" method="post">
    <div>
        <label for="name">Name:</label>
        <input type="text" id="name" name="user_name" />
    </div>
    <div>
        <label for="mail">E-mail:</label>
        <input type="email" id="mail" name="user_email" />
    </div>
    <div>
        <label for="msg">Message:</label>
        <textarea id="msg" name="user_message"></textarea>
    </div>

    <div class="button">
        <button type="submit">Send your message</button>
    </div>
</form>
    https://developer.mozilla.org/ko/docs/Learn/Forms/How_to_structure_a_web_form

    学習後期


    暑いですが乾燥していて実習に適していて、NAVERページは複雑です.translateはあまり理解できず、今日解決し、form tagの使い方をいくつか理解しました.
    サイズエンドモードのintとbyteの相互変換
    color picker component