210722開発ログ

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

NAVERショッピング実習2


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

2.中間領域


3番目の「list-item」
  • <h3>:blcok元素の性質

  • 兄弟は3 D、兄弟は2 D
    ->.shop-title-border { position: relative; }は.half-overlay { posirion: absolute; }とオーバーラップします.

    • <div class="list-half list-half-top shop-border">
	<div class="list-half-header list-half-bg">
		<div class="half-overlay"></div>
		<h3 class="shop-title-border">백화점 상품 그대로</h3>
	</div>
</div>
    #shop-main .list-item .list-half .list-half-header .half-overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);

#shop-main .list-item .list-half .list-half-header.list-half-bg {
	background-color: green;
}

#shop-main .list-item .list-half .list-half-header.list-half-bg .shop-title-border {
	position: relative;
	display: inline-block;
	padding: 2px 4px;

	border: solid 1px #ffffff;
	color: #ffffff;
	font-size: 14px;

	top: 50%;
	transform: translateY(-50%);
}

  • あと後から出てきた兄弟(.shop-title-borderは2次元ですが、.half-overlayの後ろから入るのではなく、上に置くのです
    ->相対的に3 Dフィーチャーもあります.そのため、先に出てきた兄弟が3次元で、2番目の兄弟が3次元であれば、後で出てきた兄弟のz軸がもっと高くなるので、上へ進みます.

  • 親がスペースの特定のサイズを持っている場合にのみ、子の%サイズが正常に動作します.
    • <ul class="content-lists content-list-3">
	<li>
		<img src="https://via.placeholder.com/102x100">
    		<h3>생활공작서 과탄산소다</h3>
        	<span>1.5kg x 4입</span>
	</li>
    #shop-main .list-item .list-half .content-lists {
	overflow: hidden;
	height: 177px;
}

#shop-main .list-item .list-half .content-lists.content-list-3 li {
	float: left;
	width: 33.33%;
	height: 100%;
	border-right: solid 1px #f0f0f0;

	text-align: center;
}
  • <em>:この領域がハイライト表示され、デフォルト値は{ font-style: italic; }です.

  • 最初に現れた兄弟が3 Dで、次に現れた兄弟が2 Dであれば、レイヤが重なります.(2 Dを3 Dの後ろに挿入)->.discountを3 Dに変更すると、前に表示されます.

  • font-weight: ;プロパティの値は100～900で、単位は100です.+bolderという名前のプロパティ値を使用してフォントの太さを指定することもできます.
    • 4番目の「list-item」

    残りの「list-item」
  • のようなレイアウトのオブジェクトは、以前に作成したコードを回収します.
    • 'brand-wrap'

    3.下部領域



    <無料画像サイト>
    1. pixabay
    :商業用途に使用可能
    https://pixabay.com/ko/
    2 . Unsplash
    :商業用途に使用可能
    https://unsplash.com/
    3.各種会社ロゴを使用可能
    📌 学習内容の難点
  • 「list-item」分野には複数のクラス名があり、ミスが多い.
    • 📌 解決策
    今回のように多くの要素を持つサイト制作は初めてなので、慣れることが解決策だと思います.
    📌 学習の心得.
    「残りのlist-item」領域を作成すると、簡単なレイアウト変更のみが行われましたが、コードが500行を超えると、検索時にのみエラーが数回発生します.この日、サイトを作るのにどれだけの努力が必要かを意識しました.一般的には、サイトを作成するコードは基本的に2000~3000行を超えていると聞きますが、それを管理するためには大きな努力をしなければならないと思います.😣
    プログラマーLV.2ゲームマップ最短距離
    [RxJava]同時flatMap()VS parallel()