21.08.10

学習内容

YouTubeチャンネルページを実習しました.
210810 YouTubeチャンネル、ナビゲーションページ練習コード

▷YouTube

-チャンネルページ

YouTubeのホームページの内容は、ブラウザを縮小して大きくすると減少します.ただし、チャンネルページはホームページと同じデザインですが、ブラウザのサイズに従って縮小することはありません.
チャンネルページの上部と左側の領域はホームページと同じなので、コンテンツ部分のみ作成しました.

上端に横断幕があり、パッドは使えません.また、バナーの下のコンテンツ部分も中央にあるため、デフォルトクラスが作成されます.

.channel-container {
	width: 1284px;
	margin: 0 auto;
}

この既定のクラスを各領域の外に適用すると、すべて中央揃えになります.

リアルタイム領域では、サムネイルと文字部分(タイトルの発起人がリアルタイムで符号化番組を生中継する24時間と以下のコンテンツテキスト部分)が互いに貼り合うべきである.私はflexを使っています.align-items: flex-start;を使ってこそ、胃を基準に貼ることができます.

チャンネルのメニューラベル部分が独特です.各ボタンのサイズは異なりますが、スペースのサイズは同じです.
詳細な調整の空白を除いて、他の部分は昨日作った内容とほとんど似ています.

-ページをナビゲート

完成した様子はこんな感じ.
ここでも積極的にulliaと書いてありました.

その一つの分野はli aで、その部分は1と2の分野に分かれています.ソートのために、昨日depoltクラスとして作成したflex-startを使用しました.画像とテキストを(x軸)上から揃えるために、チャンネルページの内容のようにalign-itmesプロパティ値を変更しました.

#popular-section a {
	align-items: flex-start;
}

◆Javaスクリプト

困難な内容

ビデオリストの作成自体はある程度模倣されていますが、flexの属性値はまだ不足しているようです.学習内容にも記録がありましたが、昨日からalign-items万人が転職しました.flexboxのサイトでは属性値の変化がよく見られますが、適切な属性値に変換するには、一つ一つ入れてこそわかります.属性値の変化を学び続けます...

解決策

flexbox.helpサイトで自分の目で見るには、属性値の変化をさらに熟知します.単純なブロックなので暗記できないのであれば、NAVER Mainが今日読める文章を作って、そのまま写真と文章を並べて記憶しましょう.

に感銘を与える

今日は内容が難しいというより頭痛がひどくて集中できませんでした.だから進度も1強...しかし集中できず、逆に繰り返し聴講していたので、今日の内容は完全に理解できました.YouTubeをやり終えたら見えました今日完成したチャンネルや探索ページよりも、昨日の内容の全体的なフレームワークを理解し、aラベルを区切る作業が重要らしい.昨日と今日のコンセプトがyoutubeに似ているtwitch実習結果をもう一度見てから勉強します.