HTML, CSS

4357 ワード

TIL CSS frontend html テキストリンク

TIL 2021. 01. 08
新しい認識の概念/忘れがちな概念を中心に

HTML

HyperText MarkUp

HyperText:テキスト外部フォーマットのデータ型をサポートし、ハイパーリンク

にリンク可能

MarkUp:タグを使用して文書またはデータの構造を表すことができる

(HTML5) Semantic markup

ドキュメントの意味とHierarchyをよりよく理解できる要素を特定します.

なぜCSSをheadに、JSをbodyの末尾に追加するのか

cssが後でロードされると、まずhtmlを作成し、cssを指定するので、画面が変わります

jsには、htmlを完全にロードした後に実行する必要があるユーザインタラクションに密接に関連する関数が含まれているため、最後に追加することが望ましい.

Cascading Style Sheet

Cascading:優先度schemeの指定:親要素のスタイル属性をツリー構造から子要素に継承

説明文書の表示言語における表示方法

は、1つの要素に対して最も特殊であり、後に適用されたルール

を反映している.

Attribute Selector
:属性が存在する場合、またはattributeに特定の値がある場合、

が適用されます.

      #myId[name="soo"]{
        background-color: white;
      }

Descendant Combinator
:AのBに一致するサブエレメント

を示します.

      A B {
          /* ... */
      }
      /* A의 자식, A의 자식의 자식, ... */

Child Combinator
:Aのすべての直系サブエレメントが一致していることを示します

      A > B{
          /* ... */
      }
      /* A의 자식 */

Pseudo-Class Selector
:要素の特定のステータスに応じて適用されるスタイル(ステータス:サスペンション、無効化、アクティビティなど)

ブラウザのレンダリングエンジンは、標準CSSベースボックスモデルに従って各要素を矩形ボックス

として表す.

boxは4つの部分からなる

Content:実際のコンテンツを含む領域(サイズ:width,height属性)

Padding:内側マージン

Border:枠線

Margin:外付け

ディスプレイのプロパティはflexです.
内部要素を外部に自動的に調整します.ターゲットの外部構成部品に設定する必要があります

flex方向:flex方向;水平と垂直の位置合わせ(列、行)

align-items:flex方向(垂直)の整列方向(ベースライン、中心など)

    #myFlexBox {
      display: flex;
      flex-direction: column; /* 세로 (열) */
      align-items: center;
      /* 가로(행)에 대한 중앙 */
    }

prevident-contents:flex方向の整列方向(中心、スペース-中間など)

    #myFlexBox {
      display: flex;
      flex-direction: column; /* 세로 (열) */
      justify-content: center;
      /* 세로(열)에 대한 중앙 */
    }

クローンエンコーディングの練習に役立つサイト
フォント:https://www.festisite.com/logo/google/
ロゴ:https://fonts.google.com

この問題について(HTML, CSS), 我々は、より多くの情報をここで見つけました https://velog.io/@swimme/TIL-HTML-CSS-2021-01-08

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol