1.勉強の内容

(1)ページ練習
昨日に続いて、NAVERゲーム(https://game.naver.com/)ページの左側中間エリアを勉強しました.


ゲームラウンジのヒット記事まで作成しており、過去の実習分に比べて難点や特別な点はありませんでした.
(2)学習内容
flexbox.ヘルプサイトを使用して展開
各実習で使用したflexbox自動導入サイトで作業しました.


css code

.game-flex-between {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	/*align-content: stretch;*/
}

.game-flex-start {
	display: flex;
	/*flex-direction: row;*/
	flex-wrap: wrap;
	/*justify-content: flex-start;*/
	align-items: center;
	/*align-content: stretch;*//

}

注意点
font-sizeとは異なり、数値を入力するときに(px)を含めることはできません.
button-円を使用(一番下の中心の円部分)
css code

.game-section .btn-circle {
	position: absolute;
	width: 55px;
	height: 55px;
	background-color: #ffffff;
	border-radius: 50%;
	box-shadow: 0 2px 30px 0 rgb(0 0 0 / 6%);

	bottom: -27.5px;

	/* 중앙 정렬 공식 */
	left: 50%;
	transform: translateX(-50%);
}

ここで説明する部分は、左から左への50%を使用し、指定された方向にx軸に移動する変換:translationX(-50%)を使用する中央揃え式です.
css boxモデルレイアウト授業の復習では,多くの中心配置式をまとめた.
https://css-tricks.com/centering-css-complete-guide/
上のサイトを通して、たくさんの公式で練習してみました.
id classセレクタ優先度を使用した実際の操作Tip
HTML code

	<!-- 게임 라운지 인기글 도면작업 -->

				<div id="game-section-1" class="game-section">

					<div class="section-title-wrap">
						<h2 class="font-19">게임 라운지 인기글</h2>

						<div class="section-btn-wrap">
							<a href="#" class="active">전체</a>
							<a href="#">Joined</a>		
						</div>
					</div>

HTMLコードではdivタグでgame-sect-1とclassでgame-sectionがicで指定されています.
classを使用して他の分野で通用するcssをgame-sectionに組み合わせ、以降のスタイルで変更が必要な部分がある場合は、高優先度idセレクタとして指定されたgame-sect-1でローカルに変更できます.
クラスセレクタセクションの削除やコメントは不要です.

2.実習

ダウンソース:
naverゲーム-2(上-左-ゲームラウンジヒット記事)実習HTML
https://github.com/Yeonsu-Hong/Daegu-AI-school/issues/53
ネイバーゲーム-2(上-左-ゲームラウンジ人気記事)実習css
https://github.com/Yeonsu-Hong/Daegu-AI-school/issues/54

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

特に難しいことはありません.

4.感想

授業のボリュームは2時間30分と思っていたのですが、受講時にdivtagのエラーが発生して問題解決できず、金曜日のボリュームは1時間のボリュームでした.
実は、9日(月)に一度に分量を勉強していて、いくら構造を分解しても、divtagを移動してもレイアウト自体が歪んでしまうので、講義を新しく聞き終えました.そのため、月曜日の学習量は実際に復習してアップロードするだけでいいのです.
週末にはcssレイアウト部分の復習も完了し、最もよく使われるdiv tagの正確なレイアウトが重要です.
今gitに関する本を借りて勉強していますが、今週が終わったらvelogに基づいてsectionを作って、勉強内容をアップロードします.また、javasciptの勉強も本を読むことで基本的な勉強を積み重ね、正規の勉強のスピードを1つのリズムに速め、8月中に完全に終わります.