21.07.21

学習内容

NAVERショッピングページ

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

今日はネイバーショッピングページについてみました.上と下の大きな領域の2つの部分だけが行われています.反応型は作動せず、pcバージョンしか作らなかった.
ちょうど昨日の自分の実習で詰まっていたNAVER天気ページの上端のヒントが得られますが、ロゴ部分は省略して自分で検討すべきです.

spanラベルのように、インライン要素の性質を持つラベルはbottomを使用できません.性格を変えなければならない.

span {
	display: inline-block;
	margin-bottom: 7px;
}

の親領域にデザインソートコードを追加すると、サブ領域にも適用されます.コードを減らして、一度に置くことができます.

네이버 쇼핑 페이지에선 사진의 태그 부분을 ul li로 만들었다.
해당 코드를 보면 li태그(.tag)에 inline-block 성격을 준 것을 알 수 있다.

#shop-main .list-item .category-wrap .category-right-bottom .tag-wrap .tag {
	display: inline-block;
	width: auto;
	max-width: 75px;
	height: 24px;
	background-color: #e8eef4;
	
	margin: 6px 1px 0 1px;
	padding: 0 5px;

	line-height: 24px;
	font-size: 11px;
	color: #666;
	vertical-align: top;
}

width: auto;は컨텐츠 길이 = widthという意味です.文章が長ければ長いほど、幅も大きくなります.このため、max-widthが設立される.

line-height:ピッチ上下line-weight:フォントの太さ

inline-block度floatのように、中身の幅の和が親の幅より大きいと自動的に改行されます.これにより、レイヤがy軸に自動的に整列する効果が表示されます.

#shop-main .list-item.banner:list-itemクラスでbannerというクラスを選択します.

ネイバー天気ひとり実習

タイトルからメイン領域の上部へ

固定ヘッダー、メイン、脚注領域

昨日、トップの仕事でミスを修正し、天気ニュースを加えてliラベルを再配置しました.liラベルに仮想セレクタbeforeを使用して「|」を付けます.問題は、aラベル領域が常にli領域を超えていることです.まだ修理されていません.仮想選択者がコメントで別のグラフィックを作成すると.
今日は授業中に街をぶらぶらして実習して、いくつかの製図作業のヒントを得ました.あいまいだと思ったら、divで無条件に包んでから、中でdivで包んで図面を作成して、あまり差がないような気がします.写真にはcssはまだ適用されていませんが、ほぼエリアの図面が並んでいます.今週中に全部できるかどうか心配です.細かいねじれがよくあるので、1つ修正するとねじれがあるような気がします.ボロを補っても、結果はこれよりいいです.

困難な内容

NAVERショッピングページ

最初にショッピングページの上部のタイトル部分を作成すると、タイトルを3つの部分に分け、最後のエリアにメニューボタンを作成しnavラベルとしてdivを中に入れます.

<header id="shop-header">
	<div id="shop-header-top"></div>
	<div id="shop-header-middle"></div>
	<nav>
		<div class="shop-container">
			<ul>
				<li><a href="#">홈</a></li>
				<li><a href="#">백화점</a></li>
				<li><a href="#">아울렛</a></li>
				<li><a href="#">스타일</a></li>
			</ul>
		</div>
	</nav>
</header>

NAVERのショッピングページの広い領域は中央揃えであり,対応するdivもmargin: 0 auto;を用いてx軸揃えを行った.しかし、授業中、私が見たのは正しい中央揃えで、私が作ったページの両側の空白は狭すぎます.適用されないと思うので、開発者のツールから見ても、確かに適用されます.もともと、私のパソコンの画面サイズがdivのwidthサイズより小さいため、おかしいことが起こりました.ブラウザの表示スケールを100%から90～80%に縮小し、正しい位置合わせを行います.

今日もDo Do Do Doを作るときに閉鎖ラベルの中に入れるエリアを外に置いていたので、もう一度変更しました.私は書くのが得意ですが、いつも間違っています.

ネイバー天気ひとり実習

まず昨日の実習で出た問題を見ました.

左の一番上のフラグ部分にh 1フラグにaフラグを付け、そこにimgフラグを付けて処理する.

<h1>
	<a href="#">
		<img src="https://via.placeholder.com/63x12" alt="네이버 로고">
	</a>
</h1>

しかし不思議なことに、h 1ラベルにはaエリアがあるはずですが、いつも外で遊んでいます.昨日はどう見ても直らなかったが,今日は覆って直した.
昨日aラベルを表示しました:block;処理すればクリックできる範囲が親の幅とともに増え、習ってもおかしくないと記憶しています.今日はエリアサイズをこのように調整しましたが、幸いh 1ラベルからaラベルが外れました.問題は、今aラベルとimgラベルが単独で遊び始めたことです.

NAVERでlogo paddingをあげて私もaTAGにダウンジャケットimgをあげて遊びに行きました画像が親の大きさより小さいからといって、下がるわけではありません.ダウンジャケットなしで行いますか?

位にも書いたように、仮想選択者は問題の前に・・・

学習したとおりに仮想選択プログラムを表示します:inline-block;処理すると,文章はいつも山のように山積みになっている.

実際のNAVER天気ページではliにaラベルがあり、before仮想セレクタを使用してもaとは異なる領域として表示されます.サイズを変更しすぎますが、常にaラベルがポップアップされている様子しか見えません.だからまずdisplay:inline-block;閉じて、他の領域の描画作業を行いました.彼を中に入れたいのですが、方法が分かりません.

解決策

NAVERショッピングページ

ブラウザの画面スケールを調整しているので、位置合わせが確認できます.

クロム開発者ツールで確認と修復を行った.

ネイバー天気ひとり実習

二つの問題はいずれもさらなる研究が必要らしい.明日の授業は解決策があるかもしれませんが、だめなら、指導者に質問したいことがあります.

感想

時々パソコンの画面サイズが小さいので、授業と画面が違いますが、画面サイズのため、そのままスキップしたのは知っています.しかし、今日は大きな違いがあり、画面サイズのため、エラーを見つける時間が長いことに気づかなかった.これはディスプレイを交換しなければならない問題なので、これからも私のスクリーンサイズを考慮して確認して作成します.