コース名称:大邱AI学校一般コース
講座:ネットプログラミング金仁権26 NAVERゲーム2 210525(2/3)
件名:html/css

NAVERゲームページコピー

NAVERゲームページの特徴の統一性は、重複符号化の手間を減らすとともに、デザインの同質性の観点からもメリットがあると思います.各コンテンツオブジェクトには似たようなレイアウトがあり、コンテンツオブジェクトの数や種類が増えても、ユーザーが混乱せずに情報を検索するのに役立つと思います.

コンテンツオブジェクトのid属性を数値に分割し、classを使用してすべて同じ属性を与えます.コンテンツオブジェクトが持つコンテンツはすべて異なりますが、その構造には多くの類似点があります.たとえば、フィレットされた音、背景色、タイトル領域のレイアウト、フォント属性などは、テキストやオブジェクトの本文レイアウト、メニューバーの有無など、ほとんど似たような構造を持っています.
コンテンツオブジェクトに使用されるclassプロパティについて、class defaultメソッドを使用して基本プロパティを設定します.

game-sectionのcssコード

.game-section {
	position: relative;

	border-radius: 12px;
	background-color: #ffffff;
	box-shadow: 0 2px 30px 0 rgb(0, 0, 0 / 6%);

	padding: 27px 30px 40px;
	margin-bottom: 40px;
}

.game-section .section-title-wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

.game-section .section-title-wrap h2 {
	font-size: 19px;
	font-weight: 400;
}

.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%);
}

.game-section .btn-circle.btn-icon-arrow {
	background-color: gray;
}

.game-section .btn-circle.btn-icon-plus {
	background-color: blue;
}

これらの行のcssコードを使用すると、メイン領域の右側と左側にあるすべてのコンテンツオブジェクトのcssを簡単に適用できます.今の仕事は、既存のページをコピーして作業していますが、これからは自分の仕事をするときも、同じように、作業前の計画段階でこれらの部分をうまく使えば、大変助かります.結果物の構想や作業過程を遠くから見ると,利用率の高い作業方法のようだ.

Review

今の過程で、基本的な設計図の仕事とcss属性の応用は特に新しいものではないと思います.しかし,idとclassセレクタの設定作業を用いると,コード成分の増加に伴って不要な繰返し作業を減らすことができ,より効果的であり,ファイルサイズの減少に大きな意義があると考えられる.id選択者の固有性とclass選択者の複合性(?)[複合性という言い方が正しいかどうか分からない]したがって、ある構造では、選択者の使用に慣れ、その範囲を特定すればするほど、簡単に作業を続けることができます.
従来の学習の連続的な基本作業はハンマーをたたくことであり,新しい学習属性の使用方法と使用方法は立刀の研磨作業として消化される.