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

YouTubeページコピー

-YouTube

YouTubeチャンネルのページです.上には横断幕、チャンネルのアイコンとタイトルがあり、下にはチャンネルに関するメニューがあります.コンテンツの領域はチャンネルの設定によって現れ、最近アップロードされたビデオや人気のあるビデオが通常配置され、以下はチャンネルのプレイリストに基づいてビデオを分類して配置します.

オブジェクトのソートには、左側に対するレイアウトの特性を満たすために、flexのjustify-content: flex-start;属性が使用されます.liラベルにmargin-right: 3px;およびlast-childのプロパティが追加され、最後のliラベルにはmargin-rightのプロパティ値が削除されます.これは特別な日常の仕事ではありません.

-YouTubeナビゲーションページ

YouTubeの検索ページです.YouTubeで多くの時間を過ごしましたが、生まれて初めてのページなので保証できます.
YouTubeのナビゲーションページもホームページフレームワークと同じ構造を持っています.上部と左側の領域は固定されており、コンテンツを含む主領域は独立して空間を構成しており、YouTubeが提供するビデオサムネイル、ビデオタイトル、YouTubeチャンネルなどの情報を含むオブジェクトと垂直に配置される構造と同じである.

<li>
	<a href="#" class="flex-align-start">
									
		<div class="image-wrap">
			<img src="https://via.placeholder.com/246x148">
			<span class="time">00:20 </span>
		</div>

		<div class="txt-wrap">
										
			<h3>개발자 코딩 프로그램 24시간 개발자 코딩 프로그램 24시간 개발자 코딩 프로그램 24시간개발자 코딩 프로그램 24시간</h3>
			<p class="video-info">
				<span class="channel">개발자 코딩채널</span>
				<span class="count">조회수 435만</span>
				<span class="date">1일전</span>
			</p>
			<p class="describtion">동해물과 백두산이 마르고 닳도록</p>

		</div>

	</a>
</li>

Review

オブジェクトを配置する操作では、以前の操作も同様であり、以前の操作ではliラベルのサイズが指定されていなかったため、配置が適用されないことが確認されました.オブジェクトソート属性が適用されないため、liラベルのサイズが指定されているため、正しく配置される場合があります.
私の経験では、liラベルの大きさを指定したり、指定しない場合がありますが、場合によっては構成が適用されると思います.もちろん、これは私の1週間の経験だと思いますが、実際にはいろいろな違いがあるかもしれません.liタグのサイズを指定しないと、サブタグのサイズ値の影響を受けると考えられますが、これはこれに関係すると思います.以降の作業では、liタグのサイズ値を指定して配置する作業で、この部分にさらに注意します.