2021年06月10日、開発ログ

学習の内容

ネイバーショッピングエリアの2番目のcapicat

メインアップル画像領域から底部脚注領域まで.
リストアイテムです.

absolute topとbottomを使用して、上下の領域を区切ります.
上端のデパート商品がそのままの部分がオーバーライド部分でアルファ値は0.5に設定されています.
アップルエリアにはfloat:leftの3つのエリアがあり、33.33%を占めています.
下部のhotdeal部分は上部に似ていますが、overlayプロパティはありません.
flexを使用して中央揃えの2つのコンテンツ項目.
画像タグの下にはspanタグとして50%割引があります.
position: absolute; 次にtopとrightを使用して右上隅に配置します.
border-radius:50%を使用して円を作成します.
価格エリアにはemラベルが使用されます.

<span class="price">
	<em>21,900</em> 원
</span>

デフォルトのemラベルは斜体なのでfont-style:normal;必要です.
4番麺単品です.上部領域では、以前に作成したコードが使用されます.

下部領域は
ulとliを利用
画像領域、span、h 3タグを使用します.
画像領域には、imgタグを単独で使用することなくdivにborderを適用するためのborderが含まれる.
melonチケット領域spanラベルの使用
興行収入は旋風娘で、ドン・クレイ部分はh 3ラベルを使用している.
flexを使用して、非CSS、ul、li領域に画像とテキストを水平に配置します.
3番目のリスト項目のコードを使用します.

メインの下部領域、ツイッター領域

下部領域
ul、liラベルを使用して画像を配置します.
ulラベルにflexを使用しました.

display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;

フッター領域.
divではul、liではなくspan、pタグを使用します.
中央揃え、フォント、および余白を使用します.
|部分的にはバーチャルセレクタを使用します.

span:before {
	content: "";
	display: inline-block;
	width: 1px;
	height: 11px;
	margin: 0 8px;
	background-color: #d7d7d7;
	verti
}

https://pixabay.com
映像はpicsabay無料映像です.

学習中の難点や未解決の問題

いいえ.

ソリューションの作成

学習の心得.

h 1ラベルはいつも上か真っ先に出ていて、h 3も差が少ないと思っていましたが、span先に出てくる部分とh 3が出てくる部分があるので、h 1も違っていて無条件に使うこともないと思います.