1.勉強の内容

昨日に引き続き、ネイバーホームページ実習を終えました.

(1)ホームエクササイズ(右側領域、フッター領域)

△右側領域

△フッター領域

(2)学習内容

ログイン領域の作成

ログインボタンをa tag、inline要素として作成し、displayでblockに変換します.

<div id="account">
				<p>네이버를 더 안전하고 편안하게 이용하세요.</p>
				<a href="#">로그인</a>
				<div class="account_sub">
					<div class="left">
				<span>아이디</span>
				<span>비밀번호 찾기</span>
				</div>		
				<span>회원가입</span>
			</div>
		</div>

#main_right #account a {
	display: block;
	width: 100%;
	background-color: #19ce60;
	border-radius: 2px;

	padding: 15px 0;
	margin-bottom: 14px;

	text-align: center;
	font-size: 13px;
	color: #fff;
	font-weight: 700;
}

を使用してdiv tagのログインバーを埋めます.blockの性質(下図紫色参照)

ショッピングタイトル部分(トレンドショッピング)

昨日学んだように、https://flexbox.help/活動場所を表す toolを使用して配置します.特に勉強したことがない.

ショッピングタイトル部分(トレンドショッピング)

https://flexbox.help/

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

flex:space-tweenを次のように設定します. flex-wrap: wrap  状態で親の大きさを超える内容が改行されます.このとき,内部コンテンツの数が一致しないと,2行目のコンテンツが極端に置かれる現象が発生する.
したがって,内部要素の数と長さが配列で実現できない場合. float:leftを使用して配列を行うと役立ちます.

フッター領域

一番前に作成した縦棒を削除

#main-footer .corp_lists li:first-child:before {
	content: initial;
}

#main-footer .corp_lists li:before {
	content: "";
	display: inline-block;
	width: 1px;
	height: 11px;
	background-color: #e4e8eb;
	margin: 0 8px;
	
}

もう半分の下へ

vertical-align: -1px;

タグの前に修飾を追加するbeforeを使用して、文間に縦線を作成します. 

ピクセル値を渡すと、上下に移動できます

会社概要の前のバーを削除するには
より詳細な内容を検索しました.
[孔劉]:beforeとafter、彼らの本当の身分は?
http://blog.hivelab.co.kr/%EA%B3%B5%EC%9C%A0before%EC%99%80after-%EA%B7%B8%EB%93%A4%EC%9D%98-%EC%A0%95%EC%B2%B4%EB%8A%94/

2.実習

ダウンソース:
naver-2実習HTML
https://github.com/Yeonsu-Hong/Daegu-AI-school/issues/27
naver-2実習css
https://github.com/Yeonsu-Hong/Daegu-AI-school/issues/28

3.困難な内容&解決方法

空間を直接計算し、div tagにtagを入れるのは難しいので、頭の中で想像したように置くのは容易ではありません.もちろん、これはもっと練習しなければ解決できない部分です.

4.感想

練習する

はまだハブの使い方が分からないようで、ビデオや検索で把握してから整理し直します.