210721開発ログ

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

NAVERショッピング実習


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

1.上部領域



2.中間領域


最初の「list-item」

  • 「NAVERマスター実習」に適用されたmain { padding-top: 20px;}、自動main上部に空白
  • <span>:inline要素の性質があるmargin-bottom属性が使用できない
  • width: auto;:width値をテキスト内容で置き換えるmax-witdh: 75px;:ただし、文字が長いほどwidth値が大きくなるので、最大width値を設定できます
    • #shop-main .list-item .category-wrap .category-right-bottom .tag-wrap .tag {
	width: auto;  
	max-width: 75px;  
}
  • inline-block要素はfloat属性と同一である.
    中身(tagの和が親の幅より大きい)が入ると、自動的に改行現象が発生します.
    • 2番目の「list-item」
  • 類名を貼って書く
    • #shop-main .list-item.banner img{
	width: 100%;
	height: 100%;
}
    ->複数のlist-itemクラスからbannerというクラスを選択
    📌 学習内容の難点
  • #shop-main .list-item .category-wrap { overflow: hidden; }領域はフォントの違いにより以下のようになります.では、それを修正する方法はフォントを変える方法しかありませんか?
    • 📌 解決策
    これまでの実践を振り返ると、フォントサイズによる問題と考えられていたので#shop-main .list-item .category-wrap .category-right-bottom .tag-wrap .tag属性を用いてフォントを変更し、元のサイトと同様に適用した.
    📌 学習の心得.
    今日もインターンシップ期間はそんなに長くなく、新しい内容が出ていないので、気軽にフォローできました.ただ授業以外に画像ファイルを置くだけで、レイアウトが悪くて大変です.また,Git hubについては,将来より長くなるコードを簡単にアップロードできるようになり,前進しているように感じられるようになった.😚
    エラトステネスのふるい
    ソート数