[クイックキャンパスフロントコース]5~10日目(2週目-2022.04.15~20)

4725 ワード
WIL 公費支援 フロントエンド テキストリンク

5~10日目(2週目)の勉強内容

  • HTMLとCSSの勉強を本格的に始めました.
  • 次の記事は、コード作成時に発生した問題シュートを記録するために週単位で作成されます.

    • HTML


    HTMLコンピュータWeb


    仮想ネットワークとは?


  • Cimantic Webは有意義なWebであり、Web上の情報を良好に定義し、人もコンピュータも簡単にドキュメントの意味を自動化することができる.

    • 都市ネットワークの目的

  • CimanticWebの目的は、検索エンジンがスクロールするときにHTMLコードだけでその意味を認識できるようにすることです.HTMLで作成された文書には,コンピュータで解釈できるメタデータと人間が使用する自然言語文が混在しており,開発者の意図する要素の意味を時態タグで明確に示すことができる.これにより、コードの可読性が向上し、メンテナンスが容易になります.

    • シンボルマーク


  • 仮想タグは、ブラウザ、検索エンジン、開発者にコンテンツの意味を明確に説明する役割を果たします.

  • HTMLタグは非意味、意味要素に分けることができます.
    • 非意味要素:div、spanなど、これらのタグは内容について何も説明しません.
    意味要素:form,table,imgなど,内容の意味を明確に説明する.

    HTMLに追加された記号タグ

    <header>:ドキュメントまたは一部のヘッダーを表し、1つのドキュメントに複数のヘッダーを持つことができます.<main>:このページの本文については、各ページに1つしか存在しません.<footer>:ドキュメントまたは一部のフッターを表し、1つのドキュメントに複数のフッターを持つことができます.通常は作者の情報などが必要です.<aside>:本明細書に直接関連しない分離内容を示す.主にエッジバーに使用されます.<nav>:ナビゲーションを表します.<section>,<article>:同じ聖書の内容集を表す.<main>とは異なり、その意味はより自由であり、<section>に<article>を記述することができ、逆も同様である.
    ソース
    https://velog.io/@ground4ekd/semantic-web
    https://poiemaweb.com/html5-semantic-web

    CSS


    CSSセレクタ優先度



    優先順位は?

  • 同じ要素が複数の宣言の対象となる場合、どの宣言のcss属性を優先的に適用するかを決定します.
  • 点数の高い宣言優先.
  • スコアが同じであれば、最終解釈の宣言が優先される.

    • 選択者固有のスコア(明示)

    important:99999999999999(無限大)点-最優先として宣言します.inline 선언:1000点.ID 선택자:100点.Class 선택자:10点.(仮想クラスセレクタ(:)も含まれます.)부정 선택자(not()):10点.(否定選択者のいずれの選択者も否定的であるため、スコア計算には含まれない.)태그 선택자,가상요소선택자(::):1点.전체 선택자(*):0分.상속:スコアは計算されません.
    内部声明と!「重要」は使用を推奨しません.
    index.html
<body>
<div id="hello" class="hello">Hello world!</div>
</body>
    style.css

.hello{ /* 10점 */
    color: red;
}

#hello{ /* 100점  (우선 적용된다.)*/
    color: blue;
}

    style.css

/* 점수가 같은경우 */

.hello{ /* 10점 */
    color: red;
}

.hello{ /* 10점 - 더 나중에 해석된 선언이 우선 적용 한다. */
    color: green;
}
    Fabricネットワーク環境起動プロセスの詳細
    JSP| JSTL(JSP standard Tag Library)