学習内容

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の使い方をいくつか理解しました.