[TIL] HTML_Embedded Content
機能的要因
注:htmlコードインスペクタ
📌 <img>
・ 従って
なるべくALTは使わないようにしましょう!
ロード速度はパフォーマンスによって異なるため、src setを使用することが望ましい.
つまり、画像からブラウザを選択!
:ピクセルの密度を表します.
ピクセル密度(Pixel density):同じ面積のピクセル数
同じ1画素サイズでは、画素の個数が多いほど解像度が高くなります.
現在の画面のピクセル密度を理解するには、ブラウザapiを使用して表示します.
画面のコンソールウィンドウに入力
数字が高いほど良いディスプレイ
:ブラウザに元の画像の幅を300 px、600 px、900 pxの順に教えます.
この場合、pxではなくwとマークすべきである.
src setプロパティはインターネットExplorerでは機能しません!
大きいから書きます!
:ビューポート内の条件に基づいて、UI内の画像のサイズをブラウザに通知します.
ブラウザは、私たちが提供した画像の元のサイズとビューポートに基づいて、画像のサイズ情報を統合し、最適な画像をロードします.
💡
サイズ属性は、CSSで画像サイズを制御する方法と競合する場合があります.
協力する時、事前に必ず同僚とどんな方法で反応型画像を処理するかを分かち合って、このようにやっと衝突を避けることができます!
📌 <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のように透明度を表示したり、GIFのようにアニメーションの万能フォーマットを表示したりすることができます!
AVIF (AV1 Image File Format) :
WebPのように優れた色、アニメーション、透明度を提供します.
次世代の画像フォーマットで、容量はJPEG画像の50%にすぎません!
まだサポートされていないブラウザが多いことに注意してください.
📚 html練習
注:htmlコードインスペクタ
📌 <img>
:htmlページに画像を挿入するためのタグ(開いているタグのみ)
内線要素です.(複数の画像を登録すると、画像が横にマップされます.)
画像ラベルにtype属性はありません!!!<img src="이미지경로" alt="이미지정보텍스트">
srcプロパティ
src (source)
経路が/で始まると、絶対経路(root第一原始経路、開始経路)となる
このプロジェクトの絶対パスは何ですか?
例えば、位置がdayhun/images/peng.png科dayhun/test/img.htmlよって、経路指定は/images/peng.png相対経路を利用して、img.htmlから画像フォルダに移動するには、
したがってimages/peng.pngを使用してパスを指定する../:既存フォルダが1つしかない!./:県フォルダ現在位置!
全部で2つの方法があります
altプロパティ
altは代替属性と考えられる.
画像のロードに失敗するとaltプロパティの値が表示されます!
あるいはスクリーンリーダーなどのプログラムに情報を提供するために、よく使ってください.
装飾的な画像にalt値を追加する必要はありません.
<img src="이미지경로" alt="이미지정보텍스트"><img src="경로">この場合、スクリーンリーダーは「ファイル名」と「ラベルのない画像」を読み出します.<img src="경로" alt="">空白とするとスクリーンリーダーは省略します!<img src="경로" alt=" ">空きがあれば「ファイル名」をお読みください!なるべくALTは使わないようにしましょう!
反作用画像のsrc set
srcsetプロパティを使用すると、ブラウザは異なる解像度で画像を選択し、最適な画像をロードできます.ロード速度はパフォーマンスによって異なるため、src setを使用することが望ましい.
つまり、画像からブラウザを選択!
-x叙述者
:ピクセルの密度を表します.
ピクセル密度(Pixel density):同じ面積のピクセル数
同じ1画素サイズでは、画素の個数が多いほど解像度が高くなります.
<img
width="200px"
srcset="img/logo_1.png 2x, # 1픽셀에 2개의 화소가 들어간다.
img/logo_2.png 3x" #1픽셀에 3개의 화소가 들어간다.
src="a.png"
alt="test">現在の画面のピクセル密度を理解するには、ブラウザapiを使用して表示します.
画面のコンソールウィンドウに入力
window.devicePixelRatioコマンド数字が高いほど良いディスプレイ
-w叙述者
:ブラウザに元の画像の幅を300 px、600 px、900 pxの順に教えます.
この場合、pxではなくwとマークすべきである.
<img
width="200px" # 이미지의 크기
srcset="img/logo_1.png 300w, # 이 중 골라서 보여주기
img/logo_2.png 600w,
img/logo_3.png 700w"
src="a.png"
alt="test">src setプロパティはインターネットExplorerでは機能しません!
大きいから書きます!
-sizeプロパティ
:ビューポート内の条件に基づいて、UI内の画像のサイズをブラウザに通知します.
<img srcset="images/rabbit_500.png 500w,
images/rabbit_300.png 300w, images/rabbit_150.png 150w"
sizes="(min-width:960px) 500px, (min-width:640px) 300px, # 그외는 300으로!
900px" src="images/rabbit_150.png" alt="rabbit">ブラウザは、私たちが提供した画像の元のサイズとビューポートに基づいて、画像のサイズ情報を統合し、最適な画像をロードします.
srcset属性を使用するには、該当するsizes属性を明記する必要があります!💡
sizes属性を使用する際の注意点サイズ属性は、CSSで画像サイズを制御する方法と競合する場合があります.
協力する時、事前に必ず同僚とどんな方法で反応型画像を処理するかを分かち合って、このようにやっと衝突を避けることができます!
📌 <picture>
:異なるディスプレイまたはデバイスに基づいて、条件を満たす画像の要素を表示します.
利用<source>要素と<img>要素!
-メディアのプロパティ
media属性の値で条件に合った画像を見つけ、条件に合ったsourceのsrc set属性値を見つけ、scrを入れて画面に出力します.
Mediaプロパティは、写真自体を置き換えることができます.<img>要素がない場合は画面に画像が表示されないことに注意!
「デイリー・テレグラフ」のsrc setとpictureのメディアの違いはいったい何なのか。
すなわち、src setのx記述子、w記述子、sizes属性は同一画像であり、寸法は変更されている
画像ラベルのmediaプロパティは他の画像に変更できます<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>
-typeプロパティ:ブラウザ画像のフォーマットタイプを通知するプロパティ。
ブラウザがサポートされている場合は、フォーマットでない場合は次のソースラベルに移動します.
サポート可能なpomacがない場合は、最後のimgタグの画像をレンダリングします.
つまり、ブラウザで書けるフォーマットを選択!<picture>
<source srcset="babies.webp" type="image/webp"> # 지원안하면 아래로
<source srcset="babies.avif" type="image/avif"> # 지원안하면 아래로
<img src="babies.jpeg" alt="귀여운 아기 팽귄들"> # 최후의 수단
</picture>
WebPやAVIFなどの最新フォーマットの画像をサポートしたい場合は、
ブラウザを跨ぐためには、<picture>要素と併用することが望ましい.
このクロスブラウザ技術は漸進的なリフト法と呼ばれている.
たとえば、上のコード:
:旧技術環境で動作可能な機能を実現する(<img src="babies.jpeg" alt="귀여운 아기 팽귄들" type="image/jpeg">)
最新のテクノロジー環境で最新のテクノロジーを提供
( <source srcset="babies.webp" type="image/webp"> <source srcset="babies.avif" type="image/avif"> )
この2つの方法を漸進的な昇進方法と呼ぶ.
画像フォーマットのタイプ
<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><picture>
<source srcset="babies.webp" type="image/webp"> # 지원안하면 아래로
<source srcset="babies.avif" type="image/avif"> # 지원안하면 아래로
<img src="babies.jpeg" alt="귀여운 아기 팽귄들"> # 최후의 수단
</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のように透明度を表示したり、GIFのようにアニメーションの万能フォーマットを表示したりすることができます!
AVIF (AV1 Image File Format) :
WebPのように優れた色、アニメーション、透明度を提供します.
次世代の画像フォーマットで、容量はJPEG画像の50%にすぎません!
まだサポートされていないブラウザが多いことに注意してください.
📚 html練習
トッポッキの作り方!
画面のサイズを620 px以下に設定すると、画像が変わります.
📚 フィードバック
🔑 参考サイト部分は使いやすい<cite>!
(リンクもかけた方がいい!)
これは何かの出典を書いて、引用したものを書くときに使うラベルですから!
変更前のコード
<p>
<a href="https://www.10000recipe.com/recipe/6858080">참고 사이트 : 떡볶이만들기</a>
</p>
修正後のコード
<cite>
<a href="https://www.10000recipe.com/recipe/6858080">참고 사이트 : 떡볶이만들기</a>
</cite>
cf)
footerタグは会社情報、著作権に使用されるので、参考サイトタグには向いていません!
🔑 articleラベルは、分けるときも気まずいことがなければ使用できません.
すなわち、第条は独立しなければならない.(機能は独立して行う必要があります.)
例えば、トッポッキを作るh 1とトッポッキの画像ラベルを文章で包むと、別に見ると「これは何ですか?」できるので、使いにくいです.
材料の内容と作り方の内容を入れたいなら
この2つのコンテンツは独立していますが、コンテンツに機能しています.<article> 재료내용~ </article> <article> 만드는 방법 내용~ </article>使えます.
🔥 より多くのsectionとarticleを学ぶ🔥
🔑 食べ物を作る目次はolliで書くのが適当!
整列リストの場合、
使用<p>ラベルより<ol><li>の方が良い!
無秩序リストの場合、<ul>ロ!
ol,ul定理
🔑 画像のalt部分は少し具体的な説明を加えたほうがいいです!
簡単に「トッポッキ写真」と言うよりも、「赤いトッポッキ写真」のようにイメージがわかるような説明を加えてみましょう!
🔑 pラベルは文章を隠すだけです.
あまりにも多くの文章を迂回して使うのはよくない.
短文での使用をおすすめします!
🔑 body>頭/主/足習慣good
タイトル>h 1
main>コンテンツ
フッター>会社情報など<body>
<header></header>
<main></main>
<footer></footer>
</body>
📚 フィードバック後の変更
スクリーン縮小前
画面縮小時に表示
修正されたコード<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>떡볶이 조리법</title>
</head>
<body>
<header>
<h1>떡볶이 만들기</h1>
</header>
<main>
<section>
<picture>
<source srcset="food2.jpeg" media="(min-width:620px)">
<img width="auto" height="300px" src="./food.jpeg" alt="빨간매운떡볶이">
</picture>
<ol>
<li>떡은 따로 불려두거나 그러지 않아도 괜찮아요. 떡 400g을 냄비에 넣어주세요.</li>
<li>물은 종이컵으로 2컵 넣어주세요.</li>
<li>설탕 4큰술, 간장 2큰술, 고춧가루 1큰술, 고추장 1큰술을 넣고 풀어주세요.</li>
<li>물을 끓이다가 파를 1컵 넣고 졸여주세요.</li>
<li>떡볶이 완성~!</li>
</ol>
</section>
</main>
<footer>
<cite>
<a href="https://www.10000recipe.com/recipe/6858080">
참고 사이트 : 떡볶이만들기
</a>
</cite>
</footer>
</body>
</html>
Reference
この問題について([TIL] HTML_Embedded Content), 我々は、より多くの情報をここで見つけました
https://velog.io/@dayhun/TIL-Embedded-Content
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
<p>
<a href="https://www.10000recipe.com/recipe/6858080">참고 사이트 : 떡볶이만들기</a>
</p><cite>
<a href="https://www.10000recipe.com/recipe/6858080">참고 사이트 : 떡볶이만들기</a>
</cite><body>
<header></header>
<main></main>
<footer></footer>
</body><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>떡볶이 조리법</title>
</head>
<body>
<header>
<h1>떡볶이 만들기</h1>
</header>
<main>
<section>
<picture>
<source srcset="food2.jpeg" media="(min-width:620px)">
<img width="auto" height="300px" src="./food.jpeg" alt="빨간매운떡볶이">
</picture>
<ol>
<li>떡은 따로 불려두거나 그러지 않아도 괜찮아요. 떡 400g을 냄비에 넣어주세요.</li>
<li>물은 종이컵으로 2컵 넣어주세요.</li>
<li>설탕 4큰술, 간장 2큰술, 고춧가루 1큰술, 고추장 1큰술을 넣고 풀어주세요.</li>
<li>물을 끓이다가 파를 1컵 넣고 졸여주세요.</li>
<li>떡볶이 완성~!</li>
</ol>
</section>
</main>
<footer>
<cite>
<a href="https://www.10000recipe.com/recipe/6858080">
참고 사이트 : 떡볶이만들기
</a>
</cite>
</footer>
</body>
</html>Reference
この問題について([TIL] HTML_Embedded Content), 我々は、より多くの情報をここで見つけました https://velog.io/@dayhun/TIL-Embedded-Contentテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol