おしゃれなライオンのように、先端学校TIL(0330)📖
19243 ワード
Text-level semantics
<wbr>改行は、テキストボックスに1行すべて表示できない場合にのみ許可されます.単語だけが落ちて(veiwportサイズを減らしたとき)、文全体が落ちます.cssでは白空間が正常なので機能していないように見えます.
CJKは一字一字で分かれていますが、英語に変えたいなら?
style=”word-break:keep-all”
text-levelとパケット内容の違い
どのように空間を占有するか.
ハッシュ・リンク
Internet Explorer 는 download 속성을 지원하지 않는다. <a href="#three">click</a> <!-- 해쉬 링크 -->
<a href="./index.html" download>click</a>
<a href="./hello.hwp">hwp click</a>
<a href="./hello.hwp" download="a.hwp">hwp download click</a> <!--파일이름 지정-->
<a href="./hello.pdf">pdf click</a>
<a href="./hello.pdf" download="a.pdf">pdf download click</a><IMG>
srcset属性は、少なくとも2つの異なるサイズの同一画像に使用される.
x記述子、w記述子、size属性
<img
width="200px"
srcset="img/logo_1.png 2x,
img/logo_2.png 3x
src="a.jpg"
alt="test">ピクセルが多いほど解像度が高くなります.
srcset大きなスタートから!<img
width="200px"
srcset="img/logo_1.png 300w,
img/logo_2.png 600w,
img/logo_3.png 700w" <!--px 아님 주의-->
src="a.jpg"
alt="test">w記述子とx記述子は同時に使用できません.
必要なsrcを作成します.src setが動作しないようにします.
PCではまだ使いにくいです.👉サポートされていないブラウザが多い(?)あるから.
sizesプロパティは、ビューポートの条件に従って、UIに使用されるブラウザ画像のサイズを通知します.<img
srcset="img/logo_1.png 300w,
img/logo_2.png 600w,
img/logo_3.png 700w"
sizes="(min-width: 960px) 250px,
(min-width: 620px) 150px,
300px"
src="a.jpg"
alt="test">srcsetプロパティを使用する場合は、対応するsizesプロパティを指定する必要があります.CSSで画像サイズを制御する方法と衝突する可能性があります
(CSSスタイルは
sizesプロパティより優先されます.)<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<!-- <img width="200px" srcset="../images/rabbit_500.png 3x, ../images/rabbit_300.png 2x" src="../images/rabbit_150.png"
alt="test"> -->
<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,
900px" src="images/rabbit_150.png" alt="rabbit">
</body>
</html>picture
<picture>要素は、画像フォーマット自体<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属性が表示されます.<img>要素がない場合、画像は画面に表示されません.🚨:
<picture>および<source>要素自体は画像を表さない.✔ type
画像のフォーマットタイプをブラウザに通知します.
<picture>
<source srcset="babies.webp" type="image/webp">
<source srcset="babies.avif" type="image/avif">
<img src="babies.jpeg" alt="귀여운 아기 팽귄들" type="image/png">
</picture>上から順にブラウザがこのフォーマットをサポートしているかどうかをナビゲートし、サポートしていない場合は次の
<source>要素に移動します.すべての
<source>要素の画像が使用できない場合は、最後に<img>要素の画像がレンダリングされます.したがって、WebPやAVIFなどの最新フォーマットの画像をサポートする場合は、クロスブラウズのために
<picture>要素とともに使用することをお勧めします.🍯TIP
漸進的な改善方法🚩重要
デフォルトでは、従来のテクノロジー環境で実行されていた機能を実装できますが、最新のテクノロジーを使用している環境では、最新のテクノロジーを提供することで、より良いユーザー体験を得ることができます.
漸進的な改善の概念も愛子の日方法論と訓練において非常に重要な要素である.**
画像フォーマットのタイプ🚩重要
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のようにアニメーション化できる万能フォーマットです.
AVI(AV 1画像ファイル形式):次世代の画像フォーマットで、WebPのような優れた色、アニメーション、透明度を提供し、容量はJPEG画像の50%に達する.サポートされていないブラウザもたくさんあります.
もし私が書いたコードが正しいかどうかを確認したいなら?
👉Click ME👈
覚えておきたい
一日を終える
私にはなじみのないものを中心に整理してみました…!html部分では何も出てこないと思いますが….
知らなかったけど講師もhtmlが斬新だと言ってました.like poem...💌
私はhtmlが一定の理解があると思って、今日多くの新しい概念を学びました.
imgがhtmlで動的に変更できるとは知らなかったのですが...まったく.
picture,scrsetはまだ慣れていないので、もっと練習する必要があるかもしれません.📚課題
講師が提供するサイトの構成例を分析します.
Reference
この問題について(おしゃれなライオンのように、先端学校TIL(0330)📖), 我々は、より多くの情報をここで見つけました https://velog.io/@sabit97/멋쟁이사자처럼-프론트엔드스쿨-TIL-0330テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol