コース名称:大邱AI学校一般コース
講座:ネットプログラミング金仁権12 NAVERショッピング2 210518(2/2)
件名:html/css

NAVERショッピングページコピー第2

昨日から作成していたネイバーショッピングページのコピー作業が終わりました.様々な製品や情報が確認できるメインエリアのレイアウトに多少の違いがあるので、文句を言う感じです.オブジェクトの数、レイアウト方向、細部の設計が複雑なため、注意すべき部分が多い.

<div class="list-item">
					
	<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>

		<ul class="content-lists content-lists-3">
			<li>
				<img src="https://via.placeholder.com/102X100">
				<h3>생활공작서 과탄산소다</h3>
				<span>1.5kg x 4입</span>
			</li>

			<li>
				<img src="https://via.placeholder.com/102X100">
					<h3>생활공작서 과탄산소다</h3>
					<span>1.5kg x 4입</span>
			</li>

			<li>
				<img src="https://via.placeholder.com/102X100">
				<h3>생활공작서 과탄산소다</h3>
				<span>1.5kg x 4입</span>
				</li>

		</ul>
					</div>
					

	<div class="list-half list-half-bottom shop-border">
		<div class="list-half-header">	
			<span class="headline">hot deal</span>
			<h3>백화점 상품 그대로</h3>
		</div>

		<ul class="content-lists content-lists-2">
			<li>
				<div class="content-image-wrap shop-border"> 
					<img src="https://via.placeholder.com/130x90" >
					<span class="discount">50%</span>
				</div>
				<h3>부드럽게 감기는 말랑말랑 파우치</h3>
				<span class="price">
					<em>21,900</em>원		
				</span>
			</li>
			<li>
				<div class="content-image-wrap shop-border"> 
					<img src="https://via.placeholder.com/130x90" >
					<span class="discount">50%</span>
				</div>
				<h3>부드럽게 감기는 말랑말랑 파우치</h3>
				<span class="price">
					<em>21,900</em>원		
				</span>
			</li>
		</ul>
	</div>
</div>

下部の「5つ折り」を表示するオブジェクトはposition:relative;とposition:absolute;のプロパティを使用し、ウィンドウを使用して配置します.これは問題ありませんが、テキストの配置などが困難だと感じます.Naver Pageコピー実習では、対象がこのレイアウトなので、flex属性をよく使い、数日でも使用頻度が高いので、ある程度使いやすいです.

データ解析では,符号化による解析の利点はコードの利用可能性にあると聞いた.李慶宇も同じだ.実際、NAVERショッピングページは内容は異なるが、レイアウトは似たような構造を持っている.既存の完成したオブジェクトレイアウトを簡単に組み合わせて、メイン領域の下部を構成します.簡単なコピー-貼り付け操作ですが、タグの開始と終了を区別するのは難しいです.この簡単な仕事は授業をやめたようで、30分も首を吊った.これらの部分はコードの可読性の重要な部分かもしれません.


省略したタイトル領域の構成と底部の公告事項を符号化した.復習と同時にスタートしましたが、正しい検索ウィンドウを作ってボタンをセットした時に後悔しました.
ネットワーク開発は必然的にイメージが重要だと考えている.テーマに合ったイメージから小さなアイコンまで、知的財産権などの問題がない前提で、多くの資源を選んだのは意味がある.また、今日の講義のように、イメージがこの練習の集中度を変えるかどうか.

実際のサイト

授業実習

授業後の復習

以前の授業内容の復習には細かい趣味と高度な集中度が伴っていた.

Review

講座終了後、ネイバー・ショッピングモールをエンコードした際に感じたことは、「現在の学習の基礎の中で、ある程度基礎が完成していれば、他のページを参考にする過程が重要になり、他人が書いたコードを理解する能力が重要になるはずだ」ということです.いろいろなコーディング方法があると言えば、ヒアリングコードを見て、スタッフの意図や考えを少し理解して、成長に大きなスタートを切ることができます.