コース名称:大邱AI学校一般コース
講座:ネットプログラミング金仁権9 NAVERホームページ1 210517(1/2)
件名:html/css

-クロム拡張ツールがWeb開発に役立つ

https://wpastra.com/chrome-developer-extensions/
Chromeブラウザの拡張ツールでは、Web開発に役立つ拡張ツールが集合しています.Webページのサイズを確認したり、cssコードを表示したりするなど、さまざまな機能を持つ拡張ツールがあります.box-shadowプロパティのWebツール
https://cssgenerator.org/box-shadow-css-generator.html

NAVERホームコピー

NAVERホームページのレイアウトを整理しました.

見出し領域

	<header id="main_header">
		<div class="search_area">
			<div class="search_wrap">
				<input type="text">
				<button type="button"></button>
			</div>
		</div>


		<div id="navbar">
			<div class="container">
				<ul>
					<li><a href="">메일</a></li>
					<li><a href="">카페</a></li>
					<li><a href="">블로그</a></li>
					<li><a href="">지식in</a></li>
					<li><a href="">쇼핑</a></li>
				</ul>		
			</div>
		</div>
	</header>

NAVERの検索ウィンドウとメニューがあるエリアです.検索ウィンドウはinputプロパティ、緑の検索ボタンはbuttonプロパティです.

#main_header .search_wrap input {
	width: calc(100% - 52px );
	height: 100%;
	/*background-color: yellow;*/

	padding: 13px 15px;
	font-size: 22px; 
	border: none;
}

inputプロパティの幅は、width: calc(100% - 52px );を使用して52 px幅のボタンを作成する場所です.(スペースに注意)calcは計算の略であり、inputを含む親ラベル幅値の100%から52 pxの間のマイナス記号幅を表し、52 pxはbuttonの幅である.

input, textarea:focus {
	outline: none;
} 

仮想セレクタ:focusを使用して設定を解除し、input領域のカーソルが移動したときに輪郭が変化しないようにします.cssデバッガ設定を使用します.

しゅりょういき

.container {
	width: 1130px;
	margin: 0 auto;
}

.containerをcssデバッガに設定し、必要に応じてクラスセレクタとして使用します.

<div id="news_wrap">
				<div class="news_header">
					<h2>뉴스 스탠드</h2>
					<div class="news_btn_wrap">
						<button class="setting_1"></button>
						<button class="setting_2"></button>
						<button class="setting_3"></button>
					</div>
				</div>

				<ul class="news_lists">
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
				</ul>
			</div>

24のメディア企業が配置する領域に設定し、境界が重複しないようにします.

main #news_wrap .news_lists .news_list {
	position: relative;
	float: left;
	width: 16.66%;
	height: 65px;
	background-color: #ffffff;

	border-bottom: solid 1px #e4e8eb;
	border-right: solid 1px #e4e8eb ;

	text-align: center;
}

仮想選択プログラムnth-child()に直接オブジェクトを割り当てる

main #new_wrap .news_lists .news_list:nth-child(6),
main #new_wrap .news_lists .news_list:nth-child(12),
main #new_wrap .news_lists .news_list:nth-child(18),
main #new_wrap .news_lists .news_list:nth-child(24) {
	border-right: none;
}

仮想選択プログラムnth-child(n)を使用して、オブジェクトを数列で指定します.

main #news_wrap .news_lists .news_list:nth-child(6n) {
	border-right: none;
}

上記の2つのコードは同じ結果を生成します.仮想セレクタを使用して、左側と端の境界を除去します.画像中の下端境界が消えていないのは錯覚ではなく、border-bottomをboreder-bottonの代価として入力する.私たちはいつも間違いを犯して、いつも代価を払って...

Review

パズルにはノックというパズルゲームがあります.碁盤のような平面上で縦横数の格子を予測して埋めるゲームです.当たり前ですが、5 X 5や10 X 10は難しくありません.でも難易度が30 X 30くらいの人は謎解きが難しいですパズルの最後の段階になっても、前にスペルを間違えた格があれば、パズル全体が悪くなり、消して解き直す必要があります.ストレスを和らげる働きがありますが、パズルが解けにくい場合があります.大好きで長らく楽しんだパズルですが、たまにやると頭痛が襲ってくるので、ゆっくりリラックスしていても暑くなります.約2週間、先週もこのネットワークプログラミングで似たような体験をしました.授業を聞くのは急いで、多くの間違いがあって、急いで授業を止めて原因を探します.話が終わると、片付けるどころか、頭が痛くてめまいがします.
週末に前でやった実習をもう一度やります.講座を聞き直すのではなく、手順を追って、以前に完成したコードをもう一度繰り返す方法で週末を過ごしました.繰り返しの効果なのか、追いかけない快適さなのかはわかりませんが、同じ過程でも、より近づきやすいです.各コードの入力に追われた講義とは違って、彼は自分で内容を整理し理解した.
今日の授業も何の違いもありません.わずか1週間の差に加えて、3日余りの時間もあれば、今日の授業も余裕を持ってついていける.(これは、リアルタイムでコードをコピーするようにフォローするのではなく、先週と比較的余裕があることを意味します.)ゴルフで一番難しいのはリラックスですが、今日はリラックスと柔軟な状態を保つコツを身につけたような気がします.