[TIL] 8/8

書いたものがなくなって、、、、ゴロゴロ、、、一時貯蔵を生活化

▼▼新学の

CSS idとclass

実はidとclassはすでに知っていたのですが、styled-componentsを使ってからはほとんど使ったことがなく、ほとんど選択者などを忘れていたので、今回受講後に検索して復唱しました.
まずidとclassの共通点はHTML Tagでスタイルを設定して指定することである.では、違いは何でしょうか.

idとclassの違い

適用対象オブジェクトの数
idは하나의 객체=にのみ適用され、classは여러 객체に名前のように適用され得る.

優先度
オブジェクトにidとclassが同時に適用されている場合、どのようなスタイルが適用されますか?idに適したスタイルです!id가 class보다 우선순위가 높기 때문です.この部分は명시도を探します.簡単に言えば、スタイルは!important > Inline Style > id > class > tagに優先されます.

選択者記号
idプロパティは、#と宣言されたスタイルに関連付けられ、classプロパティはです.アピールスタイルでつながっています.ここでも李さんより高度な選択者は、選択者の優先度によってid、classの優先度が生じたのか、id、classの優先度によって選択者の優先度が生じたのか、まだ不明である.

クラスの特徴

idとclassの違いを探しているとclass独自の特徴が見つかりました.1つのオブジェクトにのみ適用でき、各オブジェクトに1つのidしか適用できないのとは異なり、classは複数のオブジェクトに適用できるだけでなく、1つのオブジェクトに複数のclassを適用することもできます.
1つのオブジェクトに複数のクラスが設定されている場合、どのスタイルが適用されますか?次に定義したcssはclassプロパティ設定の順序に関係なく適用されます.

<style>
.blue {background-color:blue;}
.red {background-color:red;}
</style>

<button class='red blue'>button</button>
<button class='blue red'>button</button>

上のコードを実行すると、2つのボタンが赤くなります.2つのボタンのクラス順序は異なりますが、redはblueよりも遅いので宣言されます.

DOM tree

ブラウザは、HTMLドキュメントをグループ化し、そのドキュメントのモデルをメモリに作成します.このときHTMLの各TagはオブジェクトとしてDOM Treeと呼ばれるツリーを構成する

DOMツリーのノード

DOMツリーには4種類のノードがあります.

ドキュメントノード

ツリーの最上位ノードは、すべてのノードがドキュメントノードを介してアクセスする必要があります.

要素ノード

HTML Tagそのもの.

要素ノードは、HTMLドキュメント記述構造をそのまま表す.

言語ツリーノードまたはテキストノードにアクセスするには、要素ノードを見つける必要があります.

ツリーノード

要素ノードにアタッチされているノードは、要素ノードのサブノードではありません.

Tagで定義されている属性はこれに属します.

テキストノード

要素ノードのサブノードで、要素のテキストを表します.

サブノードを持つことができないため、端末ノードとなる.

DOMの各要素は、プロトタイプオブジェクトとして明確に定義されています.

レンダー(Render)

ブラウザは様々な要素で構成されており、通信、JavaScript解釈器など、次回に理解することにしました.今日は렌더렝 엔진を学びました.レンダリングエンジンは、要求されたコンテンツをブラウザ画面に表示する役割を果たします.Chromeの場合、Webkitから派生したレイアウトエンジンBlinkが使用される.

レンダーパス(Render Passes)

レンダリングエンジンの動作は次のとおりです.

DOM 파싱 & DOM tree 구축HTMLを読み込んでグループ化し、DOM treeを構築します.

CSS 파싱 & CSSOM tree 구축CSSをグループ化し、スタイル規則を作成し、CSSOMツリーを作成します.

Attachment & Render tree 생성DOMツリーとCSSOMツリーを組み合わせてRenderツリーを生成します.この場合、HTMLの一部のノード(ex)script、meta tag)やCSSで非表示になっている一部のノード(ex)display:noneで適用されているノード)などはレンダリング出力に反映されないので、Render treeでは省略する.

Render tree 배치DOM要素の位置はlayoutまたはreflowのプロセスによって決定される.

Render tree 페인팅各ノードをRender Treeで画面に描画します.

🔥 勉強を続ける

ディスパッチプロセス

勉強発表時間に参加して、たまたまボクシングにも順番があることに気づきました!次回もこの掘削過程を詳しく知りたい.

ブラウザの構造

先ほどお話ししたように、ブラウザはレンダリングエンジンだけでなく、多くの他の要素から構成されており、それらの役割を理解したいと思います.

明示図

図面を検索するとき!大切なのは、絶対に使わないように書いてある文章をちらっと見たようなので、この部分も検索してみましょう.

の最後の部分

フロントエンドの開発者になるために、Javascriptを本格的に勉強して感じたのは、コードを書くだけでいいわけではないということです.言語そのものに対して高い理解度を持つには、Web開発をするには、ブラウザやネットなどをたくさん勉強して、まだまだ先があるのですが、続けていくと、いつかかっこいい開発者になれるのではないでしょうか~?🤔

ソース

レンダーツリー、レイアウト、塗りつぶしを作成するには

ブラウザはどのように動作しますか?

ドキュメントオブジェクトモデル

ドキュメントオブジェクトモデルとは?DOM Treeとは?

id,classセレクタ

id,class差異