ためらう💭
今日は昨日とは違う講師の講義です.Winibeフロント開発者として働いていて、就職期間中に5-6個のBoot camp、学院などに参加したことがありますが、JIN先輩でもあり実業家の講義だったので、さらに集中しました!途中で会社の話や就職に必要な話をしてくれたので、こんなに時間が経つとは思わなかった.会社のことはおもしろい!!

htmlベース

☝🏻 Text-level semantics

<br>、,<wbr>:brタグは改行のためのタグである.wbrがテキストボックスにすべての行を表示できない場合、改行が発生します.
英語は単語単位で改行され、ハングルは一字一字で改行される.
style="white-space : nowrap;"使用時、wbrタグを使用しているところだけ改行が発生します!
ハングルの場合、style-「word-break:keep-all」を使用すると、英語単位になります.

<a href="경로">:リンクの作成

    <a href="www.naver.com">현재창에서 네이버로 이동</a>
    <a href="www.naver.com" target ="_blank" >새창에서 네이버로 이동</a>
    <a href="#one">click 1</a>
    <a href="#two">click 2</a>
    <a href="#three">click 3</a> <!-- 해쉬링크 : 이 페이지 내에서 이동  -->
    <a href="./index.html" download>[download]</a> <!-- 누르면 파일 다운로드 -->
    <a href="./hello.hwp" download="a.hwp">[hwp download]</a> <!-- 파일의 이름,확장자를 정해준다 -->

<strong>:太字ハイライト時に使用!重要性をさらに強調する必要がある場合は、ネストを使用します.

<i>,<em>:iは斜体を表し、段落の中で主言語と異なる言語で表現される部分、小説の中の人物の考え方などの原因で周囲の人と区別する必要がある場合に用いられる.Emは同じ傾斜ですが、強調の意味が含まれています.

<efn>:現在のコンテキストで定義されている用語.最近の親要素がp/dt、dd/section要素である場合、dfn定義の説明とみなされ、ドキュメントに最初に表示されたときに使用されます.

	<dl>
		<dt>WWW</dt>
		<dd>
		    <dfn>WWW</dfn>는 
				인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공간을 말한다.
		    - 위키백과
		</dd>
	</dl>

<abbr>:abbrタグは略語を表すために使用される.通常は1人用ですが、dfnで包む場合もあります.

<sup>,<sub>:上付き、下付き.

	<p>H<sub>2</sub>0</p>
	<p>x<sup>2</sup>=4</p> <!-- x^2=4 -->

<span>:エリアを改行せずに制御します.divのように、最後の手段として!

✌🏻 Embedded contect

<img>src(source)プロパティ:ファイルの場所とファイル名を教えます./ファイル名の絶対パス./ファイル名相対パス
alt(オプションテキスト)プロパティ:画像が表示されない場合に表示されます.altを追加する必要がない場合は、「」空白のままにします.スクリーンリーダーに使うので、気をつけて書きます!

はんのうイメージ
src setプロパティ:複数の解像度に対応し、最適な画像のロードに役立ちます.ブラウザは自分で選択します!
x叙述者:画素の密度
w記述子:ブラウザに元の画像の幅を教える
ex) srcset="img/logo3.png 700w, ..."_srcプロパティを保持する必要があります
sizesプロパティ:ビューポートの条件に基づいて、UIで画像が占有されているサイズをブラウザに通知します.Web規格でsrcセットと併用
❗cssは反作用メソッドと競合する可能性があるので、コラボレーション時に事前に共有する必要があることに注意してください.

	<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">

<picture>source要素とimg要素で異なる表示条件に従って画像を表示します.上のsizesプロパティで画像のサイズが変更された場合は、画像を使用して画像フォーマット自体を変更します.

	<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>

mediaプロパティ
pictureでは、mediaプロパティの値で条件に合った画像を検索します.pictureとsource要素自体は画像を表しません.

type属性

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

上から、ブラウザでサポートされているフォーマットを参照し、サポートされているフォーマットをレンダリングします.
すべてのソースドキュメントの画像が使用できない場合は、最後の方法でimg要素をレンダリングします.
この方式のクロスブラウザ技術を漸進的なアップグレード技術と呼ぶ.

<iframe>:htmlページに別のhtmlページを表示する

allow:iframeが許可する機能を指定する

allowfullscreen:フルスクリーン対応

<audio>:音楽再生ラベル

Controls:音楽ファイルを再生するために必要なコントローラを読み込みます

Autoplay:自動再生

loop:繰り返し再生

<video>:ビデオ再生ラベル

Controls:ビデオファイルを再生するために必要なコントローラを読み込みます.

Autoplay:自動再生

loop:繰り返し再生

漸進的な改善方法

:デフォルトでは、従来のテクノロジー環境でこれらの機能を実行できます.
最新のテクノロジーを使用する環境で、より良いユーザー体験を提供するために、最新のテクノロジーをどのように提供しますか?

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

GIF(Graphics Interchange Format) :
256色しか表現できません.明らかではありませんが、容量は小さいです.透明は表現できるが、程度は調節できず、影も表現できない.アニメーション処理をサポート

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

PNG (Portable Network Graphics) :
一般的な色はすべて表現することができて、透明な領域を処理することができて、しかし容量はとても大きいです.

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

WebP (Web Picture Format) :
圧縮率の高いJPEG画像に比べて、容量は70%と低く、より良い色をサポートしています.
PNGのように透明に表示したり、GIFのようにアニメーションの万能フォーマットを表示したりすることができます

AVIF (AV1 Image File Format) :
次世代の画像フォーマットは、WebPのような色、アニメーション、透明度を提供し、容量はJPEG画像の50%にすぎません.サポートされていないブラウザもたくさんあります.

に質問

sizesを用いた反作用型では、サイズを調整するファイルや、後ろ500 wなどの画像がuiのサイズを占めるように入力する必要がある.しかし、最大サイズのイメージを1つだけ注文したり、3人とも同じサイズのイメージを後ろの500 w、300 wに変えたりして、結果も同じです.月曜日に講師に質問します.

💡 問題を解決する

src setはブラウザがユーザーに性能に応じて効率的な画像を選択することを許可します!
最初のコードはsrscetによって複数の画素の画像を提供する.
私がテストした次の2つのコードは500の1つの画像しか提供していません.
sizeプロパティにより、画面幅に応じて画像サイズが調整されるが、実行コードが開発者モードで検証されると、src setを用いた最初のコードが応答ごとにロードされる画像が異なるため、より効率的に画像をロードする容量を無駄にすることはない.使用可能ですが、次の2つの疑問コードは500万を提供しているので、画像サイズが違ってもロードされた画像容量は変わりません.

まとめ
src setを使用すると、単純なsize変換ではなく、ブラウザがイメージを効率的にロードすることを目的として容量の浪費を減らすことができます.
必要なのは印刷された画面だけでなく、画像の読み込み量も含まれています

今日の秘訣

サポートしたい企業のサービスについて
(ブラウザのテストで問題を発見し、指摘したほうがいい!)

プログレッシブアップテクニック、画像フォーマットの種類:面接によく登場します!

フロントエンド開発者はプロジェクトのInsidePosition
企画者、デザイナー、バックエンドと仲良くしましょう!!私たちはみな友达です.🧑🏻‍🤝‍🧑🏻🤍

NAVER、Next、KACAなど大手企業が利用するサービス対象が広いのでdivをよく使う…!(すべてのバージョンの互換性、、、)
でも絶対に私のPopoleをdiv田に変えてはいけない!!divを終了させる

サービス利用状況を考慮したWeb開発

すべてのバージョンでブラウザをテスト!(Chrome、Edge、Opera、Brave、FireFoxなど…)