210720開発ログ

2380 ワード
大邱AI学校 CSS Webプログラミング 実習 html テキストリンク
📌 学習の内容

NAVERホームページ実習2


完全なコード💾 :
"https://github.com/janeJeong/daegu_ai_school/tree/main/Web%20Programming/naver_main%20copycat%20(0719-20) "

1.NAVER右側


アカウント&バナー

「トレンドショッピング」
  • ・flex-wrap: wrap;を適用した場合、justify-content: space-between;を使用する場合、内容の数が異なる場合は、極端に左右に配置することができる.
    • 👉 上下ペア.(コードはこのメソッドを使用します)
    👉 float: left使用

    2.NAVER下端


  • vertical-align: ;の属性値は、top、medil、bottomなどを入れるだけでなく、数字を入れることもできる
  • 仮想選択者:before { content: ""; }該当しない
    • #main-footer .corp_lists li:first-child:before {
	content: initial;
}
    📌 学習内容の難点
  • padding: 55px 8px 22px;充填剤のトップ、左&右、ボトム値を与えることができますか?

  • 仮想セレクタ:beforeを使用すると、属性値として実験入力として"★"が入力され、空白時の|と重なって現れる.

    • 📌 解決策

  • Googleの検索結果、padding値を提供する方法は約4つある.
    (1)通常4つの異なる方向に値を付与する場合
    (2)同じ値を4方向とも与えた場合
    (3)top&bottomと右&左の間に値を割り当てる場合
    (4)上、左、右、底に値を付与する場合

  • contentプロパティは、選択した要素のコンテンツの前または後にコンテンツを貼り付けます.また、正しい空白は、空の文字を設定し、背景色と様々な要因を加えて、エラーとしてマークします.
    参考サイト:https://www.codingfactory.net/10527
    • 📌 学習の心得.
    これはKidsGaoサイトを制作した時とは異なるページ形式で、私がよく知っているサイトなので、完成後の満足度は違います.KidsGaoがアニメーションや画像に関連するcssプロパティを処理する機会が多い場合、NAVERはレイアウトとレイアウトを重視します.もちろん、NAVERでは動画以外は結果が出ていますが、日常的によく触れるサイトのメイン画面を自ら制作するのは満足です.💖
    模擬試験
    Shared Preferenceの使用