[CS]CSSベースDay-6

#### CSS?
HTMLがWebページの構造を担当する場合、CSSは組織の外部と内部を担当します.CSSファイルを適用して、まったく異なるWebサイトに変換できます.

CSSスタイル

派手さのためだけにCSSを使うわけではありません.コンテンツの配置と場所、テキストのハイライト、下線など、ユーザーエクスペリエンス(UX、ユーザーエクスペリエンス)を提供します.色が弱くなったり、障害者がホームページを使うときに助けてくれることがあります.
これはデザイナーの分野だけではありません.適切な位置にコンテンツを置くことは、デザイナーでなくてもできるはずです.
(UI、ユーザインタフェース)は使用できません.どんなに優れた機能を持っていても、UIがなければ役に立たない.ユーザーが一目で分かるように、複雑なコンテンツをシンプル化することをお勧めします.

CSSは簡単ですか?

ネット開発者は最も学びやすいですか?最も難しい言語の一つですプロジェクト規模の拡大に伴い、CSSの組織はますます困難で複雑になっている.場合によっては、CSSファイルへの変更は、他のページHTML要素に影響します.

CSSファイルの追加

<link rel="stylesheet" href="index.css" />

CSSファイルをHTMLファイルに接続する場合、href属性でリンクラベルに接続できます.
また、CSSプロパティをHTMLタグに直接追加して、個別のバインドファイルに分離することはできません.しかし、区別することはお勧めしません.
CSSスタイルの適用方法
1.インラインスタイル
2.CSSファイル(内部および外部のスタイルシートを使用)
classを使用して、同じ機能を持つCSSを複数の要素に適用します.
特定のクラスでのみ作成またはスタイリング要素を作成する場合は、次のようにex)selectedを追加してスタイリングできます.

<li class="menu-item selected">Home</li>

.selected {
  font-weight: bold;
  color: #009999;
}

CSS文字の色

テキスト色のプロパティをcolorに変更します.HEX値を使用するか、メインカラーの名前を使用することができます.コマンドで背景色と枠線色を変更できます.

.box {
  color: #155724; /* 글자 색상 */
  background-color: #d4edda; /* 배경 색상 */
  border-color: #c3e6cb; /* 테두리 색상 */
}

CSSフォント

フォントのプロパティはfont-familyです.
引用符を使用して適用できます.デバイスがサポートされていない可能性があります.この場合、fallbackフォントを追加できます.
Google Fontsでは、さまざまなWebフォントを簡単に使用できます.

CSS番号

font-sizeプロパティを使用してフォントサイズを変更します.
フォントサイズでは、単位が最も重要です.フォントの単位には相対単位と絶対単位があります.
絶対単位:px,pt
相対単位:%、em、rem、ch、vw、vhなど
状況に応じて単位を選択

デバイスやブラウザサイズなど環境の影響を受けない絶対サイズ.
px(ピクセル)を使用します.pxはフォントサイズを固定する単位です.フォントサイズが固定されています.したがって、環境は純粋なテキストよりも小さな結果をもたらす可能性があります.

特に、モバイルデバイスなどの小画面、高解像度のユーザ.

相対単位remを使用することを推奨します.デフォルトのサイズは1 remで、倍に拡大したい場合は2 rem、または縮小時は0.8 remに調整できます.Emはremを推奨します.相対的なサイズは変更しにくいからです.

リアクションネットワークの基点
スマートフォン、タブレット、PCの環境はそれぞれ異なる場合があります.そのため、異なるCSSを適用する必要があります.通常、デバイス条件はpxに設定されます.デバイスの幅(width)と高さ(height)に基づいて実際のビジュアルテストを行い、必要に応じて適切な応用を行うことができます.

画面のサイズは、画面の幅または高さによって異なります.
vw,vh.(vw、viewport width)と(vh、viewport height)を表します.

標準スタイル

太さ:font-weight

下線、横線:text-装飾

文字間隔:アルファベット間隔

行:line-height

ソート:テキストの位置合わせ(左、右、中、右)

箱型

このボックスは常に長方形で、幅と高さで構成されています.
Block要素はdiv、pを表し、Inline要素はspanを表す.
Boorder(ボーダー)
設計においても開発においても、非常に有意義です.レイアウトのサイズを直感的に確認して、各領域のサイズを決定できます.
border-width:枠線の厚さ
border-style:枠線スタイル
border-color:枠線の色
マージン
外部距離の場合、負の値を指定できます.負の値を指定すると、他のエンティティとの間隔が小さくなります.他のエンティティと重複させることができます.
义齿
ボックス内の余白を指定します.値の順序方向は、上部、右側、下部の左側の順に、余白と同じです.
ex)

padding: 10px 20px 30px 40px // top, right, bottom, left

ボックスより大きい内容

コンテンツがボックス内のスペースより大きい場合、コンテンツはボックスの外に移動します.
解決策
1.箱より中身を小さくする.△箱を大きくする.
2.overflowプロパティをautoに設定し、コンテンツが大きい場合にスクロールを生成します.(overflow-x,overflow-y)でスクロール縦横を指定できます.
レイアウトデザインの余白は、枠線を設定するときにborder-boxを推奨します.