21.07.22

学習内容

210722 NAVERショッピングページ実習コード

gifプログラムの制限により,結果物の右側部分が切り取られた.実際の結果は右側に出てきました

しゅりょういき

今日は写真で見た広告分野の3番目の分野から始まります.

この部分からスタート!
次の他の広告分野はこの3番目の分野を応用しています.肝心なのはこの分野をよくすることです.大きな分野で二つの小さな分野を創造しなければならない.
制作過程は難しい.以前に作成されたクラスが多いため、クラス名も少し混同されており、設定する必要がある属性がたくさんあります.

<div class="list-item"> 전체 영역
	<div class="list-half list-half-top shop-border">
		<div class="list-half-header list-half-bg">
			<div class="half-over-lay"></div>
			<h3 class="shop-title-border">백화점 상품 그대로</h3>
		</div>

		<ul class="content-lists content-lists-3">
			<li>
				<img src="img/apple.jpg">
				<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="img/blanket.jpg">
					<span class="discount">50%</span>
				</div>
				<h3>부드럽게 감기는 말랑말랑 파우치 이불</h3>
				<span class="price">
					<em>21,900</em>원
				</span>
		</ul>
	</div>
</div>

각각 li태그는 컨텐츠 개수만큼 복붙해줬다.

はそれほど差はありませんが、少し違いのある分野では、共通のクラスがあり、別の名前のクラスがあり、2つ以上の名前を付けています.優先順位を利用して、片方にないクラスを使うと便利です.違いがあれば、保険のように、異なるクラス名をつけることができます.

list-half-topとlist-half-bottomは、ゾーン全体で2つの部分に分けられます.
List-halfはまた上部と内容物部分に分かれている.

#shop-main .list-item .list-half {
	width: 100%;
	height: 240px;
	background-color: #ffffff;
}

#shop-main .list-item .list-half.list-half-top {
	position: absolute;
	left: 0;
	top: 0;
}

#shop-main .list-item .list-half.list-half-bottom {
	position: absolute;
	left: 0;
	bottom: 0;
}

これで位置と大きさが指定されます.

このうちほぼ共通領域list-half-headerのcssが一度に完了し、以下の内容領域ul部分がliをソートし、フォント、エッジ、ダウンを調整します.

#shop-main .list-item .list-half .list-half-header {
	position: relative;

	width: 100%;
	height: 62px;
	background-color: #ffffff;
	border-bottom: solid 1px #e7e7e7;

	text-align: center;

	padding-top: 10px;
}

#shop-main .list-item .list-half .list-half-header .headline {
	display: inline-block;
	border: solid 1px #000000;
	padding: 2px 4px;
	margin-bottom: 5px;

	font-size: 13px;
}

#shop-main .list-item .list-half .list-half-header h3 {
	font-size: 14px;
}


#shop-main .list-item .list-half .list-half-header .half-over-lay {
	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;
	border-bottom: solid 1px #ffffff;
	padding-top: 0;
}

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

	color: #ffffff;

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

#shop-main .list-item .list-half .content-lists {
	overflow: hidden;
	height: 177px;
}

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

	text-align: center;
}

#shop-main .list-item .list-half .content-lists.content-lists-3 li:last-child {
	border-right: none;
}

#shop-main .list-item .list-half .content-lists.content-lists-3 li img {
	width: 100%;
	height: 100px;
	margin-bottom: 5px;
}

#shop-main .list-item .list-half .content-lists.content-lists-3 li h3 {
	font-size: 13px;
	margin-bottom: 5px;
}

#shop-main .list-item .list-half .content-lists.content-lists-3 li span {
	font-size: 12px;
}

次に,list−half−bottom領域content−list−2について述べた.

#shop-main .list-item .list-half .content-lists.content-lists-2 {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;

	padding-top: 11px;
}

#shop-main .list-item .list-half .content-lists.content-lists-2 li {
	width: 130px;
	height: 150px;
	margin-right: 8px;
}

#shop-main .list-item .list-half .content-lists.content-lists-2 li:last-child {
	margin-right: 0;
}

#shop-main .list-item .list-half .content-lists.content-lists-2 li .content-image-wrap {
	position: relative;
	width: 130px;
	height: 90px;
}

#shop-main .list-item .list-half .content-lists.content-lists-2 li .content-image-wrap img {
	position: absolute;
	width: 100%;
	height: 100%;
}

#shop-main .list-item .list-half .content-lists.content-lists-2 li .content-image-wrap .discount {
	position: absolute;
	display: block;
	width: 42px;
	height: 42px;
	background-color: red;
	border-radius: 50%;

	font-size: 14px;
	color: #ffffff;
	line-height: 42px;
	text-align: center;

	top: 6px;
	right: 5px;

}

#shop-main .list-item .list-half .content-lists.content-lists-2 li h3 {
	font-size: 13px;
}

#shop-main .list-item .list-half .content-lists.content-lists-2 li .price {
	color: #62a7ee;
	font-size: 12px;
}

#shop-main .list-item .list-half .content-lists.content-lists-2 li .price em {
	font-size: 14px;
	font-weight: 700;
	font-style: normal;
}

ここでのポイントは、割引を表示するスペースを画像に上げることです.3 D兄弟間のオーバーラップを利用した.

先に出てきた兄弟は3次元で、次の兄弟は2次元だと重なる.

まず出てくる兄弟が3次元で2番目も3次元だと、後で出てくる兄弟のz軸がもっと高いので、2番目は上を向いています.この状態で最初のz-indexを上げると、最初は上向きになります.

親が空間に対して具体的な大きさを持ってこそ、子供の高さを%書くときに正しく動作することができる.

font-weight: bold;プロパティ値、100～900の外にboldまたはbolderを書くことができます.

Emタグは生まれつきの傾斜表示です.ディポルトfont-style: italic;街.傾斜したくない場合は、プロパティ値をfont-style: normal;に設定できます.

- tip!

レイアウト構造を作成するときは、再利用可能な共通領域があるかどうかを確認してから、htmlコードをコピーする形で既存のレイアウト、設計を維持するように設計することができます.

NAVERショッピングページには複数のWebサイトのレイアウト構造があるため、レイアウトの練習に役立ちます.

特定の役を演じるクラスをよく利用します.多くのコードを減らすことができます.

最後に制作された分野は、大広告コンテンツ分野の4番目の分野である.

4番目の領域の上部には、先ほど作成した部分がコピーされ、下部が作成されます.先日、NaverMainの今日の執筆分野と制作方法は同じでした.

<ul class="list-row-3 shop-border">
	<li>
		<div class="list-image-wrap shop-border">
			<img src="https://via.placeholder.com/90x60">
		</div>
		<div class="list-row-info">
			<span>멜론티켓</span>
			<h3>흥행 돌풍 마마, 돈크라이</h3>
		</div>
	</li>
</ul>

#shop-main .list-item .list-row-3 {
	background-color: #ffffff;
	border-top: none;
}

#shop-main .list-item .list-row-3 li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;

	border-bottom: solid 1px #f0f0f0;
	padding: 14px 19px 11px 19px;
}

#shop-main .list-item .list-row-3 li:last-child {
	border-bottom: none;
}

#shop-main .list-item .list-row-3 li .list-image-wrap {
	width: 90px;
	height: 60px;
	margin-right: 10px;
}

#shop-main .list-item .list-row-3 li .list-image-wrap img {
	width: 100%;
	height: 100%;
}

#shop-main .list-item .list-row-3 li .list-row-info span {
	font-size: 12px;
}

#shop-main .list-item .list-row-3 li .list-row-info h3 {
	font-size: 13px;
}

画像の横に字があるが、当てはまらないようなら、フォントの大きさを調整しましょう.

サブテキストプログラムはctrl+Fで検索することもできます.

その後のmain領域は、完了した領域を下部領域にコピーします.mainの最下端のlogo部分にはulliにimgがリストされています.

#shop-main .brand-wrap {
	background-color: #ffffff;
}

#shop-main .brand-wrap .brand-lists {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;

	padding: 18px 18px;
}

#shop-main .brand-wrap .brand-lists li {
	width: 64px;
	height: 64px;
}

#shop-main .brand-wrap .brand-lists li img {
	width: 100%;
	height: 100%;
}

フッター領域

フラグの下にフッター領域があります.上のborderと条項だけ練習しました.
下端も中央ソートで、以前作成した中央ソートクラスをdivで包み、中で行います.

#shop-footer {
	padding-bottom: 180px;
	text-align: center;
}

#shop-footer .policy-wrap {
	border-top: solid 2px #5d5d5d;
	padding-top: 27px;
	margin-bottom: 11px;
}

#shop-footer .policy-wrap span {
	font-size: 12px;
}

#shop-footer .policy-wrap span:first-child:before {
	content: initial;
}

#shop-footer .policy-wrap span:before {
	content: "";
	display: inline-block;
	width: 1px;
	height: 11px;
	margin: 0 8px;
	background-color: #d7d7d7;
	vertical-align: -1px;
}

#shop-footer p {
	font-size: 12px;
	color: #888;
	margin-bottom: 11px;
}

仮想選択プログラムの使用方法を覚えてください.

無料画像サイト

固定ブラケット
https://pixabay.com/ko/
商業的に使用できる.

フラッシュバック
https://unsplash.com/

レイアウトが完了すると、画像を変えるとより生き生きとした結果が表示されます.
ブランドロゴはブランド会社が提供する場合があります.회사명 + logoグーグルでいいです.代表的なものはネイバーとカカオ

困難な内容

等級名が多くなったので、少し混同したミスがありました.今日午前、div class=「例1例2」形式のコード例1.例2と書くべきでしたが、真ん中にスペースがあるので適用できずうろうろしました.図面を見直しましたが、連続的に少ないカテゴリなので変更しました.

最後に無料画像サイトから画像を受信してみます.htmlファイルにimgタグを使用して貼り付けようとしたが、htmlファイルベースのcssファイルと見なされず、パスが作成され、画像が表示されなくなった.幸いなことに、授業で経路を書き直し、よく応用されています.

解決策

クロム開発者ツールで原因を見つけた.

の授業を聞いてやっと悟った.以前もずっと話していた部分ですが、ミスしてしまいました.ファイルパスを書くときは、いつも私が今書いているファイルに基づいて書きます.私が書いているファイルをチェックして、パスを書きます.

感想

まず書き終わる部分は、関連分野をコピーする過程が一番面白いです.完成版は本当にネイバーのショッピングページに似ているので嬉しいです
でも、すぐに受講する時に行った時は、いいなと思って、知っている部分は一人でやると、詰まってしまうことが多いです.でも自分でやってみたら教室で使えるヒントが得られたので良かったです昨日NAVER天気ページで、aタグにimgが入っていなかったので大変でしたが、これを3次元で使えば良い仕事ができるはずなので、後でやってみようと思います.