🥴 生活コードCSS(2)

📌 ボックスモデルボックスモデル

ボックスモデルを作成するには、さまざまなプロパティを使用します.
💛 各ラベルには、次のフィーチャーがあります.

h1 등의 header:フルスクリーン使用.Block level elementと呼ばれます.

a:自分の大きさで使う.Inline level要素と呼ばれます.

これらの基準はcssで随時変更できます.

display: lnline; # 크기에 맞게 변경하기
display: block; # 화면 전체에 맞게 변경하기
display: none; # 화면에서 제거해줌, 자주 쓰니까 기억해두기

上図に示すように、propertyにはpadding、margin、border、width、heightなどがあります.
¥¥サイトでマウスの右ボタン>を押すとどの属性が当てはまるのかわかるので、活用しましょう~!

📌 グリッドグリッド(Grid)

意味のない、機能のない親のラベルを必ず持っていなければなりません~!

デザイン用ラベルCSS

<div></div> # 알아서 줄 바꿈이 들어간다
<span></span>

fr # 화면 조정 비율을 의미한다
# 나중에 그리드로 영역 나눌 때 많이 이용한다

検索方法

css border property

使用するよよよよよよよよよよ
1.意味と機能のない親ラベルを挿入し、必要に応じてid値を追加します.
2.検出機能を利用して、自分の方向に合わせて設計を調整する.
3.スタイルを再指定するには、Style Propertyを使用します.
注意したいのは、idでスタイルを表現しますが、例外は明確に表現します~!

ol 보다는 #grid ol 이런 식으로 표현하기
"ol인 부분" <<< "id가 grid인 ol인 부분"이라고 표현하는 것이 더 좋은 표현이다

次のリンクは、Style Propertyを使用できるドキュメントです.
大切なリンクなので、よく知っておきましょう~!
注:Can I Use?

📌 反応式設計応答式Web

Media Queryは反応型の設計を提供することができる.
ある条件を満たした場合にのみcssコンテンツを有効にすることができます~!

検索方法

css media query

min-width:最小を表し、~以上.

max-width:最大、小

😀 整理...
反応型デザインのページを作成する場合はmediaqueryを使用できます.

📌 Cssコードの再使用

cssファイルを単独で作成し、link~!
linkを使用すると、重複データの除去と修正が容易になり、メンテナンスが容易になり、ネットワークにも有利になります.

😀 授業が終わるとき。

CSSで一番重要なのは

選択者

属性

この2点をよく知ってこそ、より多くのデザインを創造することができるからです.
なるべく使って、今まで作成した例外を利用してサイトを実現しましょう~!