コース名称:大邱AI学校一般コース
講座:ネットワークプログラミング金仁権33 NAVERオーディオ3 210605(3/3)
件名:html/css

NAVERオーディオクリップページコピー

NAVERオーディオクリップページの左側領域を作成しました.以前は何度かコンテンツを左右に分割する作業があったが、オーディオクリップページも以前に述べたようにheader程度に分割されている.対称性やバランスを保つためかもしれません.

左側の領域のbuttonオブジェクトに表示される部分は、1行のテキストにも複数の効果が適用されます.

<button class="btn-more">
	<span class="color-blue">더 많이</span>발견하기 1 / <span class="pages">5</span>
</button>

#audio_discovery .audio-body .btn-more {
	display: block;

	border: solid 1px rgba(0, 0, 0, .1);
	background-color: #ffffff;
	box-shadow: 0 2px 10px 0 rgb(80 85 91 / 7%);
	border-radius: 24px;

	padding: 12px 21px 12px 21px;
	margin: 0 auto;

	font-size: 14px;
	font-weight: 500;
	color: #222;


}

#audio_discovery .audio-body .btn-more .color-blue {
	color: #157efb;
}

#audio_discovery .audio-body .btn-more .pages {
	color: #959595;
}

Webプログラミングを始めたばかりの頃、cssプロパティでもテキストのプロパティを設計するのは難しいと感じました.他のラベルや属性は直感的に理解できる点が多いが,テキスト設計はなぜか符号化が行われているとともに,設計の過程で結果はそれほど予測しやすいものではないが,今では慣れているようだ.以前ほど難しくないような気がします.講義内容を真似するより時間がかかるかもしれませんが、時間がかかると、目的のデザインを完成させることができます.

オーディオクリップのホームページを作成した後、オーディオクリップのカテゴリページをコピーしました.講座の講師が言ったように、他のページはあまり特殊性がなく、分類ページはオブジェクトに対してもあまり特殊性はありませんが、オブジェクトの配置を体験するために分類ページを選んだのかもしれません.

.audio-category .audio-category-lists {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;


	margin-top: 22px;
}

.audio-category .audio-category-lists .category-list {
	width: 162px;
	height: 164px;

	margin-bottom: 20px;
	margin-right: 20px;
}

必要に応じてリストをリストし、ソートします.リストオブジェクトの数値を考慮せずに左を基準として配列するために、flexのjustify-centent:flex-start;属性が適用される.最も右側に配置されたオブジェクトは、margin-rightのプロパティを使用して、nth-child(6n)の値を除去します.リスト・オブジェクトの順序、6番目のオブジェクトがリストされます.

.audio-category .audio-category-lists .category-list:nth-child(6n) {
	margin-right: 0;
}

nth-childの使い方でパリティ指定法を学びました.

.audio-category .audio-category-lists .category-list:nth-child(odd) a {
	background-color: blue;
}

.audio-category .audio-category-lists .category-list:nth-child(even) a {
	background-color: yellow;
}

nth-child(odd)およびnth-child(even)を使用して、奇数および偶数のリストオブジェクトにそれぞれ異なる背景色を適用した.

Review

講義について嬉しいのは、繰り返しと復習の過程で、以前は理解しにくい内容だったことが理解できることだ.講義の基礎部分を聞こうと決心したが、結局は返事のない叫びとなり、前進の過程で過去の内容を再記憶する過程を経験している.一生懸命勉強した結果なので、仕事を繰り返すことで機能や構造を理解するというよりは