開始します。

最初は「スタート」というタイトルが好きでした.どうやって始めるか考えずに直接始めます!これで文章に対する氷封になった.これを書かないと『どうやって始めますか?短ければ10分、長ければ30分と悩む.このようにでたらめを言うと、指が自然に動いたり、書いた内容が自然に浮かび上がったりします.最初はこのページと親しくなる過程だったのかも?では、今日を振り返ってみましょう.

Sprintの検証

今日はDOMに関する課題が週末に終わりましたが、実際にはDOMをエンコードしていません.考えてみたが,一行も書かなかった.週末に見飽きたせいか.一緒にやったフェル様も課題を週末に仕上げてから何度も繰り返し書き、明確にコンセプトを身につけたとおっしゃっていました.とても情熱的です!!

CSSインスピレーション

課題の核心機能が実現した以上、今日はCSSに集中したい.毎日HTML/CSS親密化プロジェクトで終わりました.CSSは何度もやったことはありませんが、他の人がよくやっているページを見て、そこからインスピレーションを得て反応したので、進歩が早いと感じました.パソコンの前ではありませんが、良いインスピレーションを与えるコードやコンテンツを見ると、どのように実現するかが考えられますが、CSSには特に難しい技術はありませんので、考えてみれば実現の計画やインスピレーションが考えられます.

CSS背景画像

背景画像を実現するのは難しい.やる前は本当に簡単そうに見えましたが、やっていて、私が好きなようにできることはほとんどありません.やり終えてみると簡単ですが、制作過程で多くの間違いが発生しました.リアルタイムサーバー拡張機能がない場合は、リフレッシュボタンが少し磨耗する可能性があります.
特に、background-size:coverのオプションが与えられないため、画像よりも大きなビューポートに画像が現れる現象が発生する.

body {
  background-image: url('./pexels-alex-andrews-1983038.jpg');
  /* background-image: url('./pexels-rakicevic-nenad-769525.jpg'); */
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  /* background-position: center; */
}

中央揃えCSSボックス

これも簡単ですが、応用する時に苦労しました.bodyに直接置くよりも、下にdivを直接作成して総サイズを占め、実際の内容が中央になるようにします.悔しいことを言うのは簡単すぎて気まずいですね.幅は100%ですが、高さは100%なので画面の最上端に貼ってあります.ビューポートを基準に高さを指定すると、予想される効果が得られます.

#background {
  /* 가운데 정렬 */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
}

Webフォントの適用

他の人が作ったページを見るとフォントが違って目立ちますが、ページフォントというのは今回も使いましたGoogleフォントのウェブサイトでは、私が望んでいるフォントシリーズを確定し、それを取り戻すためのリンクを作成します.HTMLとCSSファイルに適用すれば終わりです.本当に簡単で満足感も高いです.これからも使い続ける機能です.
https://fonts.google.com/

CSSターゲット

アニメーション(Animation)
他の人が作ったページの中にアニメが入っているページがあり、とても洗練されている感じがします.

すいはバックグラウンド
これもアニメの一つですこれはCSSで実現した背景画面で、簡単で良いです.background-linear-gradient

SVGファイル
ネットワーク上では画像ファイルのフォーマットと呼ばれ、画面サイズを調整して保持できるようです.

material-icons
電子メール入力ボックスでは、電子メールアイコンは一時値で、パスワードはロックアイコンです.とても洗練された感じですが、今でも業界でよく使われているスタイルだそうです.これもすぐに応用できます元々はアイコン形状のフォントを利用してテキストのように入力されていました.

コード状態の課題コミット容量の制限

もう終わりました.CSSを適用して提出しなければなりませんが、エラーが発生しました.これに関しては、アゴラスタッツでうまく整理して、簡単に整理してみました.npm run submit1.7メガメガサイズの画像ファイルはジョブをコミットできず、最初のコミットに失敗しました.
2.失敗中に発生した7百万サイズのアーカイブファイルがクリアされず、コミットに失敗しました.
3.圧縮ファイルと画像ファイルを削除して提出します.
結論:画像ファイルが大きすぎて提出できません.
容量制限があるようですが、よくわかりませんが、3兆以下なら提出できるはずです.プレビューアプリケーションで画像サイズを40%に変換し、コミット後に正常にコミットします.

イベントオブジェクト

ベースイベントについては、要素

にイベントハンドラを適用できます.

onclick event

onclickとaddEventListenerに直接割り当てる差異

eventHandler関数を作成し、eventHandlerの最初のパラメータを使用します.

アクティビティオブジェクトの内容を簡単に見て、onclickとどのボタンでアクティビティを呼び出したかが重要です.無視しましたがeventオブジェクトの使用を再整理する必要があるようです.以下で学習する高次関数には関連する内容が出てくるので、まとめておくとよいでしょう.