[TIL]20210627

19355 ワード
TIL ネットワーク テキストリンク
何の理由もなく、午前5時に眠りから覚め、再び眠りについたので、ネットから勉強しましょう.

ネットワーク


コンテンツモデル


HTMLを習い始めたばかりの頃は分かりにくく、理論的な内容だったので、後で復習したときに調べやすいようにBoostレッスンの内容全文を書き換えました.
  • Metadata
    "base, link, meta, noscript, script, style, title "
    metadataには、コンテンツのスタイル、動作、または他のドキュメントとの関係など、情報を含む要素が含まれています.
    メタラベル、タイトルラベル、スタイルラベル、リンクラベルは、これらのラベルの主な特徴であり、ほとんどが含まれています.
  • Flow
    "a, abbr, address,
map>area, article, aside,
audio, b, bdo, blockquote,
br, button,
    canvas, cite, code, datalist, del, details, dfn, div, dl, em, embed,
    fieldset, figure, footer, form, h1 ~ h6, header, hgroup, hr, i, iframe, img,
    input, ins, kbd, keygen, label, map, mark, math, menu, meter, nav, noscript, object, ol,
    output, p, pre, progress, q, ruby, samp, script, section, select, small, span, strong,
    style[scoped], sub, sup, svg, table, textarea, time, ul, var, video, wbr "
    Flowには、ドキュメントの自然な流れによって配置される要素が含まれています.
    メタデータに対応するタグの一部だけがFlowから除外され、ほとんどの要素がFlowに含まれています.
  • Sectioning
    "article, aside, nav, section "
    Sectioningには、ドキュメント構造に関連する要素が含まれます.
    HTML 5で新しく生成された <article>, <aside>, <nav>, <section>などが含まれており、これらのタグはドキュメントの構造やアウトラインに影響します.
  • Heading
    "h1, h2, h3, h4, h5, h6 "
    見出しには、各セクションの見出しを定義する見出しラベルが含まれます.
  • Phrasing
    "a, abbr, map>area, audio, b, bdo, br, button, canvas, cite, code, datalist, del, dfn, em, embed,
    i, iframe, img, input, ins, kbd, keygen, label, map, mark, math, meter, noscript, object, output,
    progress, q, ruby, samp, script, select, small, span, strong, sub, sup, svg, textarea, time,
    var, video, wbr"
    Phrasingには、ドキュメントのテキストまたはテキストを装飾する内部段落レベルの要素が含まれています.
  • Embedded
    "audio,
 canvas,
 embed,
 iframe,
 img,
 math,
 object,
 svg,
 video "
    Embeddedには、外部コンテンツを表す要素と、オーディオ、ビデオ、画像などのマルチメディアに関連する要素が含まれています.
  • Interactive
    "a, audio[controls], button, details, embed, iframe, img[usemap], input, keygen, label, menu,
    object[usemap], select, textarea, video[controls] "
    Interactiveには、ユーザーと対話する要素が含まれています.その中で最も代表的なのはフォーム要素です.

    • シンボルマークアップ


    同様に、これまでは理論的な内容だったが、心理的な表記は適切なHTML要素を正しく使用している.
    <b>굵은</b> vs <strong>중요한</strong>
<i>기울어진</i> vs <em>강조하는</em>
<u>밑줄친</u> vs <ins>새롭게 추가된</ins>
<s>중간선이 있는</s> vs <del>삭제된</del>
    <b>を使用しても<strong>を使用しても、両方の視覚効果は同じです.
    しかし、意味は同じではない.<b>は意味がなく、単純にテキストの太字を表すだけであるが、<strong>は重要な意味を持つ.重要な意味を含む場合、<br>の代わりに<strong>を用いるのは詩的な表記である.<s>は中間線を描くだけですが、<del>には以前の値を削除する意味が含まれており、ショッピングモールの割引を例にとると、定価は<del>で、納得できる表記です.
    似たような脈絡で使い分けるべき!
    HTML公式文書では、次の注釈表記の利点を説明します.
  • 検索エンジンは、ページ検索ランキングに影響を与える重要なキーワードとして意味ラベルを注視する.
  • 視覚障害者ユーザは、スクリーンリーダー上でページを閲覧する際に、有意義な注釈をタグとして使用することができる.
  • 意味のあるコードブロックを探すのは、意味のない、クラス名のある、または途切れないdivを参照するよりもずっと簡単です.
  • の開発者に、ラベルに埋め込まれたデータ型
    • を推奨する.
  • の「命名」(Semantic Naming)には、対応するカスタム要素/コンポーネントの命名(Namimg)が反映されます.

    • 心理的要因.

    <article> <-- 독립적으로 구분해 배포하거나 재사용할 수 있는 구획, 사용 예제로 뉴스 기사등이 있음 -->
<aside> <-- 별도 구획 요소, CSS와 곁들여 사이드 바 등을 만듬 -->
<figcaption> <-- 부모 figure 요소의 설명 또는 범례를 나타냄. 주석이라 이해. -->
<figure> <-- 독립적인 콘텐츠를 표현-->
<footer> <-- 푸터는 일반적으로 구획의 작성자, 저작권 정보, 관련 문서 등의 내용을 포함. -->
<header> <-- 소개 및 탐색에 도움을 주는 콘텐츠. 제목, 로고, 검색 폼, 작성자 이름 등의 요소도 포함. -->
<main> <-- 문서 <body>의 주요 콘텐츠, hidden 속성 없이는 문서에 하나보다 많은 <main> 요소가 존재해선 안됨. -->
<mark> <-- 현재 맥락에 관련이 깊거나 중요해  하이라이트한 부분 -->
<nav> <-- 탐색 구획 요소, 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획을 표시. 자주 쓰이는 예제는 메뉴, 목차, 색인. C:\Program Files\Adobe 의 느낌으로 이해 -->
<section> <-- 일반 구획 요소 -->
<time> <-- datetime 특성의 값을 지정해 보다 적절한 검색 결과나, 알림 같은 특정 기능을 구현할 때 사용 -->
<details> <-- "열림" 상태일 때만 내부 정보를 보여주는 정보 공개 위젯, 보통 레이블 옆의 작은 삼각형이 돌아가면서 열림/닫힘 상태를 표기. <details> 요소의 첫 번째 자식이 <summary> 요소라면, <summary>의 콘텐츠를 위젯의 레이블로 사용. -->
<summary> <-- 요소의 공개 상자에 대한 요약, 캡션 또는 범례를 지정 -->
    背中がある.

    ブロック&インライン


    ≪ブロック・レベル要素｜Block Level Elements｜oem_src≫:1行に1つの要素"div, h1~h6, p, ul, li, table ..."が表示されます.
    ≪行内要素｜Line Elements｜oem_src≫:1行に複数の要素を表示します."span, i, img, em, strong, a ..." 行レベル要素はブロックレベル要素のサブアイテムとして使用できません.
    2つの例外があり、1つ目は<a>がインライン要素であるが、サブ要素はブロックレベル要素であってもよい.2つ目は<h1> ~ <h6>(headings)要素と<p>要素がブロックレベル要素であるが、内部要素としてPhrasing Contentのみを使用できる.

    CSSが起動します。


    積層スタイルシートを学習します.
    多くのページではhtmlのラベルは十数個しかありませんが、それぞれ特色があります.その原因はcssにある.
    http://www.csszengarden.com/
    上のサイトではhtmlの内容が同じで、cssの構成だけが違います.

    CSS構文

      h1 { color: yellow; font-size:2em; }
    セレクタ-h 1
    属性(property)-「color」
    値(value)-yellow
    宣言(declaration)-「color:yellow」「font-size:2 em」
    宣言ブロック-"{color:黄色;font-size:2 em;}"
    ルール(rule set)-「h 1{color:黄色;font-size:2 em;}」
    cssの「属性」は属性であり、htmlの「属性」は属性である./* */:cssでコメントを宣言する方法.

    CSSの適用


    CSSをHTMLに接続する方法は4つあります.
  • Inline
    Inlineは、スタイル属性を使用して要素内のルールを直接宣言する方法です.
    要素に直接入力するので、選択者は不要で、内容をスタイル属性の値として宣言に入れるだけです.
    この方法ではコードを回収できないという欠点がある.
    •   <div style="color:red;"> 내용 </div>
  • Internal
    Internalは、文書において<style>の方法を使用する.次のコードは、すべての<div>に同じスタイルを提供することができる.
    多くのページがある場合、各ページにはそれぞれのルール宣言があります.<style>は<head>の内部に入り、<style>はスタイルルールに入ります.
    • <style> div {color: red;} </style>
  • External
    外部スタイルシート外部スタイルシートファイルを使用します.
    外部スタイルシートは、スタイルルールを個別の外部ファイルとして作成します.
    CSSファイルを作成し、スタイル規則を宣言します.<link>を使用してCSSファイルに接続します.<head>の内部宣言<link>の後、href属性を使用してCSSファイルのパスを記録します.
    relプロパティは、リンクされたファイルとドキュメントの関係を示すプロパティであり、CSSファイルは「スタイルシート」として記入する必要があります.
    外部スタイルシートでスタイルを宣言する場合、複数のページがある場合でも、この行を使用して同じスタイルをすべてのページに適用できます.
    また、CSSファイルを変更する必要がある場合は、接続されているすべてのページに反映するようにCSSファイルを変更することもできます.
    外部スタイルシートは、ファイル管理が容易ですが、容量が小さいため、主な方法です.
    • <link rel="stylesheet" href="css/style.css">
  • Import
    この方法は性能などの問題には適用されない.
    • RxJavaとマルチスレッドの同時実行について簡単に説明します
    React-config(環境変数)