コース名称:大邱AI学校一般コース
講座:ネットプログラミング金仁権18 NAVERブログ1 210519(2/3)
ネットワークプログラミング金仁権19 NAVERブログ1 210519(3/3)
件名:html/css

ネイバーブログページ

-ブログホームの右側

-ブログ詳細ページ(チャレンジプラン)

ブログのホームページの右側のエリアは、これまでの作業とあまり変わりません.ログインエリアは、NAVERホームページを使用したファイルインデックスです.htmlからそのフレームワークを取得しました.ログインエリアの背景やボタンの背景、フォントの色などをいくつか変更しました.

チェックボックスのあるhepler領域で新しいプロパティを使用しようとします.従来の作業では、このように画像やテキストを配置する際に、<i>または<img>タグを用いて並べ替えたが、今回はbackground-imageプロパティを用いた.

	<div id="blog_helper">
		<ul class="blog-helper-lists">
			<li><a href="#">블로그 앱 간편설치</a></li>
			<li><a href="#">개발 가이드</a></li>
			<li><a href="#">블로그 글 권리 보호</a></li>
			<li><a href="#">블로그 스마트</a></li>
		</ul>
	</div>

.blog-main #blog-main-content #blog-helper li a {
	display: block;
	height: 35px;
    	line-height: 35px;
  	padding-left: 30px;

	background-image: url(../img/checkbox.png);
	background-repeat: no-repeat;
	background-position: left;
	background-size: 20px 20px;
}

background-imageプロパティは新しいものではありません.これは、以前他の作業で複数回使用されていたプロパティです.しかし、今回はテキストや画像を置く過程で、新しい方法が登場しました.
ラベルには、background-image属性を使用してチェックボックス画像を読み込み、左側に配置します.ラベルに入力されたテキストと画像が重なり、重複を避けるためにpadding-left属性でテキストが配置されます.
これまで、すべてのオブジェクトは、margin属性またはpadding属性に従って位置の影響を受けてきた.しかし、background-imageのプロパティでロードされた画像は影響を受けないことが分かった.この構成にも制限があるが、flexを使用する方法よりも簡潔な利点があるようだ.
この配置方法は、画像上にテキストを配置するためにも使用できます.

ブログ詳細ページ

ブログメニューラベルの「Chellingeプログラム」ページをブログ詳細ページに設定し、今日の講座をコピーして終了しました.

詳細ページ上部

詳細ページの下部

詳細ページの上部と下部の領域は、前のブログページと同じです.ブログページのheaderとfooterのhtmlコードに沿っています.

詳細ページのオブジェクトレイアウトは多彩です.基本的な仕事は既存の符号化を延長することですが、新しいレイアウト設計は楽しいです.

Review

エラーに対してコードをゆっくり閲覧する余地があります.エラーの範囲や状況によっては精度は低下していますが、エラーの位置は、そのエッジがループ視の程度に達していると思います.間違いによるストレスを減らすのはもう慰めです.
今日のブログの詳細ページのレイアウトは意味が大きいと思います.属性を使用してオブジェクトを生成して配置すると考え、Webプログラミングの最も基礎的な段階を経て、設計はあなたを待っています.どのようにユーザーに情報を伝え、どのように情報を置くかを考えるには、ユーザーと協力するだけでなく、多くの時間と精力を払う必要があります.これは激しい創意の争いです.
今はまだ登っていますが、私の前で歩く未来を考えるのはまだ早いですが、今日の仕事ではデザインを考え始めました.