3 - HTML

20859 ワード
おしゃれなライオンのように html TIL 先端学校2期 テキストリンク

Text-level semantics


<br> , <wbr>

<br>:改行用タグ<wbr>:改行は、テキストボックスの1行がすべて表示されない場合にのみ許可されます.

<a href="">

<a>:hrefプロパティを使用してハイパーテキスト(リンク作成時に使用)のパスを指定します.<a href="#three">click</a> <!-- 해쉬 링크 -->ページ内を移動しているとき!
html構文のセクションとパケットコンテンツ要素は、このレベルの要素のサブ要素を作文する必要はありませんが、例外をマークするセクションとパケットコンテンツ要素のみをサブ要素としてアンカーできます.

<b> , <strong>

<b>:太字表示、X、CSSを使用しない前のマーク<strong>:太字ハイライト!ネストを使用可能

<i> , <em>

<i>:斜体字、段落の中で主言語とその他の言語で表現された部分(主言語がハングルから突然英語が現れたとき!)<em>:斜体+ハイライト

<dfn>

<dfn>:現在のコンテキストで定義されている用語
<dl>
	<dt>WWW</dt>
	<dd>
	    <dfn>WWW</dfn>는 
			인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공간을 말한다.
	    - 위키백과
	</dd>
</dl>

<abbr>

<abbr>:略語、略語(通常は単独で使用され、dfnラベルで包むこともできます!)
<dl>
	<dt>WWW</dt>
	<dd>
	    <dfn><abbr title="World Wide Web">WWW</abbr></dfn>는 
			인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공간을 말한다.
	    - 위키백과
	</dd>
</dl>

<sup> , <sub>

<sup>:上付き
下付き文字
化学記号や数式などの先端記号を使用する必要がある場所でのみ使用します.

<sub>

<span>:特に意味はなく、通常は改行せずに領域をバンドルし、複数のoe要素をバンドル制御する領域(id、class)、divなどの存在に用いられる!最後の手段!

Embedded content


<span>

<img>:htmlに画像を挿入するときに使用するタグ

src (source)

<img>はsrc属性を要求します!
srcプロパティは、ブラウザの画像ファイルの場所とファイル名を示します.

alt (alternative text)


画像が表示されない場合、altプロパティのテキストが画像ではなく表示されます.
ヘルプSEOは、スクリーンリーダーなどのプログラムに情報を提供します.
Q.すべてのイメージについて説明が必要ですか?
A.No説明が多すぎるとかえって不便になります重要なのは必要な情報を提供することです.<img>スクリーンリーダーからファイル名を読み込みます!<img src="img/a.jpg">alt=""ファイル名を読み込まない

反作用画像のsrc set


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

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

  • x叙述者:画素密度.ブラウザにデバイスのピクセル密度に基づいて画像をロードするように通知します.
    • <img
width="200px"
srcset="img/logo_1.png 2x,
        img/logo_2.png 3x"
src="a.jpg"
alt="test">
    💡 Pixel density
    同じ面積に入る画素数を意味する.画素の個数が多ければ多いほど解像度が高くなることがわかる.
    開発者画面のコンソールウィンドウに<img src="img/a.jpg" alt="">コマンドを入力!
  • w叙述者:元の画像の幅をブラウザに伝える(pxではなくwとマーク!)
    • <img
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叙述者は同時に使用できない.また、window.devicePixelRatio属性を保持する必要がある.
    これは、srcのブラウザが使用できないために使用される画像です.
  • 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">
    💡 srcsetプロパティを使用する場合、CSSで画像サイズを制御する方法と競合する可能性があることに注意してください.(CSSスタイルはsizes属性より優先)連携する場合は、事前に必ず同僚と反応型画像の処理方法を共有しておきましょう!

    sizes

    <picture>要素は、<picture>要素および<source>要素によって、異なる表示またはデバイスに従って、条件を満たす画像を表示する要素である.<img>要素のsrc setが画面に基づいて画像のサイズを調整する場合、<img>要素は画像フォーマット自体を変更することができる.
    <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>要素は、<picture>属性の値によって、条件を満たす画像を見つける.条件を満たすmedia要素内の<source>属性値を見つけ、srcsetタグの<img>に入れて画面に表示します.src要素がなければ、画面に画像は表示されません.<img>および<picture>要素自体は画像を示さない.

    type


    ブラウザ画像のフォーマットタイプを通知
    <picture>
    <source srcset="babies.webp" type="image/webp">
    <source srcset="babies.avif" type="image/avif">
    <img src="babies.jpeg" alt="귀여운 아기 팽귄들">
</picture>
    上から、ブラウザがこのフォーマットをサポートしているかどうかを順に探し、サポートしていないと判断した場合は、次の<source>要素に移動します.<source>要素のすべての画像が使用できない場合、<source>要素の画像が最後にレンダリングされる.
    したがって、WebPやAVIFなどの最新形式の画像をサポートする場合は、ブラウザ間で使用するために<img>要素と一緒に使用することが望ましい.

    [テクニカル面接準備!]


    💡 漸進的な改善方法
    基本的には、従来のテクノロジー環境で実行されていた機能を実現し、最新のテクノロジーを使用する環境で最新のテクノロジーを提供し、より良いユーザー体験を提供する方法があります.
    💡 画像フォーマットのタイプ
    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のようにアニメーションの万能フォーマットを表示したりすることができます!
    AVI(AV 1画像ファイルフォーマット):次世代画像フォーマットで、WebPのような色、アニメーション、透明度を提供し、容量はJPEG画像の50%に達する.まだサポートされていないブラウザが多いことに注意してください.

    実習:画面サイズに応じてピザ画像を別の画像に変更!


    <body>
    <h1>피자 만들기</h1>

    <picture>
        <source srcset="images/pizza3.jpeg" media="(min-width:960px)">
        <source srcset="images/pizza2.jpeg" media="(min-width:620px)">
        <img src="images/pizza3.jpeg" alt="pizza">
    </picture>
    <ol>
        <li>양파와 피망, 버섯을 채 썰어 준비해주세요</li>
        <li>빵에 토마토소스를 바르고 피망, 버섯, 베이컨 치즈 순으로 넉넉히 토핑해 주세요</li>
        <li>예열된 오븐에 넣고 230도 10~15분간 구워주세요</li>
    </ol>
<p>참고 : <a style="text-decoration: none; color: black;" href="http://xn--9p4b23hbxe6vk6ob.com/">http://xn--9p4b23hbxe6vk6ob.com/</a></p>

</body>

    今日の課題！


    サンプルページに寸法構造を描画するには

    終わりだ!


    Publishingをたくさん練習したので、早くマスターしなければなりません!
    課題のページパズルをクリア!
    [minirt]#5具体実施
    メソッドの再ロードの例