今日のキーワード📌

反応型画像

反応型背景画像

反応型ビデオ

1.反応型画像

1-1. 画像フォーマットのタイプ

画像フォーマットのタイプをもう一度見てみましょう.

GIF(Graphics Interchange Format) :
256色しか表現できないので、あまり目立たないですが容量は小さいです.透明は表現できるが、その程度は調節できないので影も表現できない.アニメーション処理が可能です.

JPG/JPEG (Joint Photographic Expert Group image):
画素が高く、容量は小さいが、透明に処理できない.

PNG (Portable Network Graphics) :
一般的な色で表現できるので透明領域処理は可能ですが容量は大きいです.

SVG (Scalable Vector Graphics) :
SVG形式のベクトル画像は、品質を失ったり下げたりすることなく、任意のサイズでレンダリングできます.

WebP (Web Picture Format) :
JPEG画像の圧縮率より70%も高いが、より優れた色をサポートするフォーマットです.それでも、PNGのように透明に表現でき、GIFのようにアニメーションの万能フォーマットも表現できます.

AVIF(AV 1画像ファイル形式):WebPのように色、動画、透明度に優れたJPEG画像容量50%の次世代画像フォーマットです.まだサポートされていないブラウザが多いことに注意してください.

1-2. インタラクティブイメージの作成

width: 100%

max-width: 100%

2.反応型背景画像

2-1. 背景寸法のプロパティ

Background-size: px:画像のサイズを特定します.

・Background-size: auto:他の軸の大きさは画像のアスペクト比で自動的に決定します.

使用

・Background-size: %:%コンテナの幅に比例してサイズ調整可能.

・Background-size: contain:コンテナ全体を覆っているが、画像は切り取らない.

Background-size: cover:コンテナ全体を覆う.

2-2. インタラクティブなバックグラウンドイメージの作成

background: url
  ("https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8Y2l0eXxlbnwwfHwwfHw%3D&w=1000&q=80") 
  center /cover no-repeat;

3.反応型ビデオ

3-1. ビデオのプロパティ

・preload = "none", "auto:ページのロード時にビデオをプリロードするかどうかを決定します.

・poster:動画のダウンロード時に、動画が再生される前に表示する画像を指定します.

controls:ブラウザが再生に必要なコントローラを提供するかどうかを指定します.

autoplay:ファイルのダウンロードが完了したら自動的に再生するかどうかを指定します.

muted:音を消す.

loop:動画終了後に再生を繰り返すかどうかを指定します.

3-2. ビデオの作成

ビデオラベルの作成

<video autoplay controls loop src="동영상.mp4"></video>

YouTubeビデオの作成

<iframe class="video-next-level"
            src="https://www.youtube.com/..."
            title="YouTube video player" frameborder="0" allowfullscreen></iframe>

3.3反応ビデオの作成

<article class="cont-video">
	<iframe class="비디오"
            src="https://www.youtube.com/..."
            title="YouTube video player" frameborder="0" allowfullscreen></iframe>
</article>

.cont-video {
    position: relative;
    padding-top: 56.25%;
		/* padding-top, padding-bottom 속성의 % 값은 부모 요소의 넓이에 비례한다. */
		/* 예를 들어 부모의 넚이가 1200px 이라면 padding-top=50% 의 값은 600px과 같다. */
} 


.비디오 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

}

知らない場所

反応性内容

反応型画像

反応型背景画像

反応型ビデオ

メディア照会

今日一日を整理します..。🌃

実装は完了していますが、講師のコードを参考にして、やり直します!私と講師のコードが違うのもあまりにも違います~ちょうど金曜日は休講で、木曜日、金曜日は走ります!
そして来週から、待ちに待ったJavaScriptレッスンが始まります.無知な状態で授業を受けるのはどんなに苦しい道だろう.JavaScript…容易ではないが...週末はできるだけ予習しなければならない.
よし、行ってみよう!!!