1.勉強の内容

NAVERブログホームページの構成では,ホームページ端と左側領域に対して設計図面作成を行った.
(1)ページ練習



(2)学習内容
button tagの特性
button tagのデフォルトはグレーです.
マウスのサスペンション時に指の形に変更(復習)
css code

#blog-header .blog-header-top .blog-header-right .btn-menu {
		width: 60px;
		height: 60px;
		background-color: #00c73c;
		border-left: solid 1px #239e36;
		border-right: solid 1px #239e36;

		cursor: pointer;
}

cursor: pointer; 使用します.
NAVERが開発者ツールを開くとき、flexではなくfloatを使用するのはなぜですか?
Googleでcani useを検索すると、各プロパティが使用可能かどうかを判断するサイトがあります.(前に勉強したことがあります)

flexを検索すると、インターネットexplorerの6-9バージョンの古いバージョンは使用できません.
だから古いバージョンのユーザーを便利に使うためにfloatを使うのは面倒ですが.
i tagの属性
css code

.blog-main #hot-topic .hot-topic-left .topic-heading i {
	display: block;
	width: 8px;
	height: 13px;
	background-color: grey;
	margin: 0 8px;
}

iタグはinline要素の性質を有し、空間を作成できないため、display:block;空間を創造することによって.
letter-spacing
reference : https://aboooks.tistory.com/184


下図に示すように、文字間隔は文字間隔の左右の間隔を調整できるツールです.
display: table;
https://selosele.github.io/2020/01/09/table-property/
複数の物品を並べ替える際によく用いられる方法は、物品を包む包装器にtableと幅を表示し、物品にtable-cellを表示し、tableのtd要素のようにパーセント幅値を持たせながら横並べ替えることである.さらに道具に垂直位置合わせを宣言する:middle、簡単に垂直位置合わせができます.ただし、必ずしもソートの方法に限定されるものではありません.

2.実習

ダウンソース:
naver blog-1(トップページ+左ページ)実験HTML
https://github.com/Yeonsu-Hong/Daegu-AI-school/issues/37
naver blog-1(上部page+左側main)実習css
https://github.com/Yeonsu-Hong/Daegu-AI-school/issues/38

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

難しいのは、たまに混同された内容や忘れた部分があり、グーグルで検索しながら思い出します.△インライン要素とblock要素はどれらがありますか.できるだけ早く暗記する必要があります.
2回のレッスンを受けて、1人でNAVERページを見て、どのようなラベルを書いてフレームを決めるかを考えて、開発者ツールを開いて参考にすると、今まで大きなフレームを決めるのは難しいです.
開発ログを作成した後、自分で時間を割いて勉強し、既存の講義を聞きながら、作成したコードをチェックします.

4.感想

授業の集中度を高めるためには、早めに始め、授業後の休憩時間を確保することが効率的だ.
実は翌日授業を受けて、翌日完全復習の形式はとても良くて、しかし目標は進度を取り除くので、できるだけ進度を逃さないでください.
幸いなことに、HTMLやCSSの内容に関してはある程度の内容が見られ始めており、Java sciptに関する内容は週末に勉強することになりますが、本当に時間があれば前のkidsからの実習編から復習し直すべきだと思います.
https://www.boostcourse.org/cs112のネイバーでコンピューター科学という無料講座を聞きたいのですが、まず、今まじめにやっていて、まだ時間があれば、やるべきです.