What is the CSS?

CSSは、積層スタイルシートの略であり、従属スタイルシートである.HTMLがコンテンツの構造と意味を定義している場合、CSSはスタイルとレイアウトを指定します.たとえば、コンテンツのフォント、色、サイズ、行、列を分割します.

重要な内容または新しい知識

CSSで使用可能な単純な関数があります.回転パターンの回転()は変換です:回転(0.8 turn);と

@rules(at-rulesと発音)特殊ルール

代表的な@Media.反応型ウェブページを作成するには、画面を一定の幅に縮小すると、CSSを適用したメディアクエリーを使用することができます.PCやノートパソコンのユーザーとスマートフォンのユーザーでは画面サイズが異なるため、異なるスタイルを使うのに適している場合に便利です.

速記プロパティ(shorthands properties)

フォント、背景、塗りつぶし、枠線、枠線などがあります.複数行のプロパティ値を1行に設定し、時間を節約し、作業中にコードをきれいにします.
padding: 10px 5px 10px 5px;/値は(上、右、下、左)の順に適用されます./

カスケードと優先度(特殊性)

同じアトリビュートに異なるアトリビュート値を入力した場合、適用されるスタイリングの優先度は?id>class>セレクタ
同じ優先度で、次に入力した値を適用します.

What is type selectors?

Type, class and ID selectors
ex) h1 {}, .class {}, #ID {}

Attribute selectors
ex) a[arr] {}, a[href=""] {}

Pseudo-classes and pseudo-elements
a:hover {}

Combinators
main > p {}, .header li {}
参照 MDN

Box model

ブロック
上のコンテナに空きスペースを埋めた後、新しい行で改行します.

行イントラボックス
このボックスは改行せず、行の順序でリストされ、データが埋め込まれます.

ボックスの設定

Content, Padding, Border, Margin

MDNを参照

各種機能

.sidebar_menu {
	writing-mode: vertical-rl; // 화면에서 글씨를 세로로 쓰고 싶을 때 사용
    opacity:0.6; // 해당 layout의 box를 투명하게 하고 싶을 때 0~1 사이 값을 사용
    color: #0b5c78; // 16진수*2=256 RGB를 0b/5c/78로 나누어서 표현한다
    object-fit: cover; 또는 contain; // 박스에 들어가는 이미지의 크기를 조정할 때 사용
    
}

Debugging CSS

https://jigsaw.w3.org/css-validator/またはDevTool(ホームのF 12 in Ubuntu)を使用

注意事項

あまり具体的な選択者exheaderの使用を避けます.main p.im