Embedded content

img

imgタグはhtmlページに画像を挿入する際に使用するタグです.

src(source)

imgタグにはsrcという必須属性が必要です.srcプロパティは、ブラウザの画像ファイルの場所とファイル名を示します.引用符のパスは、絶対パスまたは相対パスでなければなりません.

alt (alternative text)

画像が表示されない場合、altプロパティには画像ではなくaltプロパティのテキストが表示されます.また、スクリーンリーダーなどのプログラムに情報を提供し、ブラウザに画像に関する情報を伝えることでSEOを支援するためにも使用されます.

反作用画像のsrc set

src setプロパティを使用すると、ブラウザは複数の解像度に基づいて最適な画像をロードできます.src setプロパティは、少なくとも2つの異なるサイズの同じ画像を使用して、画像の選択権をブラウザに委任するために使用されます.

x記述子、w記述子、size属性

xディスクリプタは、画素の密度(画素密度)を表す.ブラウザにデバイスのピクセル密度に基づいて画像をロードするように通知します.
ピクセル密度:同じ面積に入るピクセル数を表します.ピクセルが多いほど解像度が高くなります.
wディスクリプタは、ブラウザの元の画像の幅が300 px、600 px、700 pxの順であることを示す.pxではなくwでマークすることに注意してください.
例)まず大きいサイズの画像を作成する

width="200px"
srcset="img/logo_3.png 700w,
        img/logo_2.png 600w,
				img/logo_1.png 300w"
src="a.png"
alt="test">

w叙述者とx叙述者は同時に使用できない.
また、srcプロパティは保持する必要があります.
src setは、使用できないブラウザの画像に使用されます.
sizeプロパティは、ビューポートの条件に基づいて、UIでブラウザ画像が使用するサイズを通知します.

<img
srcset="img/logo_3.png 700w,
        img/logo_2.png 600w,
				img/logo_1.png 300w"
sizes="(min-width: 960px) 250px,
			 (min-width: 620px) 150px,
			 300px"
src="a.png"
alt="test">

ブラウザは、私たちが提供した画像の元のサイズとビューポートに基づいて、画像のサイズ情報を統合し、最適な画像をロードします.
srcセット属性にはsize属性はありませんが、Web規格を遵守するために、srcセット属性は対応するsize属性を指定する必要があります.
sizesプロパティを使用する場合、cssで画像サイズを制御する方法と競合する可能性があることに注意してください.CSSスタイルはsizeプロパティを上書きします.コラボレーションするときは、事前に同僚と反応画像をどのように処理するかを共有する必要があります.

picture

picture要素は、ソース要素とimg要素によって異なる表示またはデバイスに基づいて条件に合致する画像を表示する要素である.img要素のsrc setが画面に基づいて画像サイズを調整する場合、画像要素は画像フォーマット自体を変更できます.

<picture>
    <source srcset="babies_large.jpeg" media="(min-width:960px)">
    <source srcset="babies.jpeg" media="(min-width:620px)">
    <img src="babies_small.jpeg" alt="귀여운 아기 팽귄들">
</picture>

メディアのプロパティ

上のコードでは、source要素のmediaプロパティが表示されます.picture要素は、メディア属性の値によって条件に合致する画像を検索します.条件を満たすソース要素のsrc setプロパティ値を見つけ、imgタグに挿入して画面に表示します.img要素がない場合、画像はこのような構造であるため、画面に表示されません.
pictureとsource要素自体は画像を表しません.

type

画像のフォーマットタイプをブラウザに通知します.

<picture>
    <source srcset="babies.webp" type="image/webp">
    <source srcset="babies.avif" type="image/avif">
    <img src="babies.jpeg" alt="귀여운 아기 팽귄들">
</picture>

上から順にブラウザがこのフォーマットをサポートしているかどうかをナビゲートし、サポートされていないフォーマットと判断した場合は、次のsource要素に移動します.
すべてのソース要素の画像が使用できない場合は、最後にimg要素の画像がレンダリングされます.したがって、WebpやAVIFなどの最新形式の画像をサポートする場合は、picture要素と一緒に使用してクロスブラウズすることをお勧めします.
このようなブラウザ間テクノロジーは、漸進的な改善と呼ばれています.

漸進的な改善方法

デフォルトでは、従来のテクノロジー環境で実行されていた機能を実装できますが、最新のテクノロジーを使用している環境では、最新のテクノロジーを提供することで、より良いユーザー体験を得ることができます.

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

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画像の圧縮率は、JPEG画像に比べて70%と高いが、フォーマットはより良い色をサポートする.それでも、PNGのようにアニメーションを表示できる万能フォーマットです.
AVIF (AV1 Image File Format) :
これは次世代の画像フォーマットで、WebPのような優れた色、アニメーション、透明度を提供し、容量はJPEG画像の50%にすぎません.まだサポートされていないブラウザが多いことに注意してください.

iframe

iframeは、現在のHTMLページに別のHTMLページを表示するために使用されます.iframeはwidthまたはheightプロパティを使用してサイズを調整します.値を別途設定しない場合、デフォルトは高さ150 px、幅300 pxです.

<iframe src="링크"></iframe>

src属性としてロードするHTMLリンクを設定することができ、通常はYouTubeビデオをロードする際に使用されます.
YouTubeビデオをロードする場合、通常は次のプロパティ値があります.

<iframe width="1280" height="720" src="https://www.youtube.com/embed/-iuX3r8PSzU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>

frameboorder-枠線を描画するかどうかを決定します.値は0または1です.使用しないでcssborderプロパティで置き換えます
allow-iframe許可機能の指定
allowfullscreen-フルスクリーン対応
Autoplayプロパティは、一部のモバイルブラウザで使用するのに適していない可能性があり、muteプロパティと常に使用する必要があります.
これは、モバイル環境ではautoplay機能が予期せぬトラフィックを防止し、アクセス性の面で悪いためです.これらの特性はiframe、audio、video要素での応用と同じである.

audio

audioは音楽コンテンツを再生するタグです.srcプロパティは、ブラウザのオーディオファイルの場所とファイル名を示します.

<audio src="폴더/파일명" controls autoplay loop ></audio>

controls

音楽ファイルを制御するコントローラを読み込みます.

autoplay

自動再生ロード完了ファイル

loop

音楽を繰り返す.audioは、source要素をサブ要素として使用することもできます.ブラウザ間で複数のフォーマットをサポート

video

ビデオファイルのタグを再生します.基本的な使い方は次のとおりです.

<video src="batman.mp4" controls autoplay loop width="450" height="300"></video>

src-ブラウザのビデオファイルの場所とファイル名を示す

コントロール-

ビデオファイルのロードに必要なコントローラ

autoplay-ロード完了後にビデオファイルを自動的に再生する

loop自動再生

次のコードを使用して、クロスブラウズとユーザーフレンドリーなビデオを実現します.

<video controls poster="batman.jpeg" preload="auto" width="450" height="300">
	<source src="batman.mp4" type="video/mp4">
	<source src="batman.ogv" type="video/ogg">
	<source src="batman.webm" type="video/webm">
	<track kind="subtitles" src="foo.en.vtt" srclang="ko" label="batman">
</video>

preload-良好なユーザー体験を得るプロパティ
None-ビデオファイルxを事前にロードし、サーバは最小限の通信量を維持し、ページのロード速度がより速い
metadata-ビデオファイルはプリロードされませんが、ビデオ長などのプリインポートファイルのメタデータを許可します.
Auto-すぐにロードおよび表示できるように準備が整いました

poster-ビデオがロードされているときに画面に表示する画像を指定します.

source-他の埋め込み要素と同様に、source要素では、ブラウザでサポートされている複数のファイルパッケージを指定できます.

track-字幕などの時間ベースのテキストデータを表示するオーディオまたはビデオ要素のサブアイテム
kind-字幕情報のタイプを指定します.字幕、字幕等の指定
src lang-言語の指定
Label-タイトル

WebVTT(Web Video Text Tracks)
track要素で使用される字幕ファイルフォーマット.vttとマーク
subtitles VS captions
字幕-視聴者に理解できない言語翻訳を提供する
説明-字幕付きオーディオの転写を提供します.音声転写とは、音声を発する主体、音楽、または効果などの非言語音声を含むすべての音声データを文字で表すものである.