210720[17]大邱AI学校一般課程Webプログラミング実習3 NAVER main page 2 end

6617 ワード
大邱AI学校 CSS Webプログラミング 基礎コース ホーム練習 html テキストリンク

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.感想


練習する
  • はまだハブの使い方が分からないようで、ビデオや検索で把握してから整理し直します.
    • formフォームの美化
    js現在のタイムコードを表示