CSS

CSS : Cascading Style Sheets
HTMLまたはXMLで記述された文書の表示方法を記述するスタイルシート言語.
#cssシーケンスガイド
1.全体の大きなフレーム、ブロック(Header、Contents、Footer...)先に分けましょう.盲目的に内容を埋めるのはよくない.
2.視覚的に区別する.background-color , border3.基本(レイアウト)スタイルのみを作成します.内容を入れる前に、スペースを用意しておきます.margin , padding4.ベースメイクは、エレメント、タイプセレクタなどで準備しておきます.
    初期化によりクリーンアップを完了します.initial , inherit , margin 0 , padding 05.classを使用して、細かい作業を開始します.
div以外の余白は、デフォルトのスタイルシート(ユーザエージェントスタイルシート)bodyにmargin:8pxが適用されているためです.ちなみに、ブラウザごとにデフォルトのスタイルシートが異なるため、同じデザインも異なるように見えるかもしれません.そのため初期化が必要です.

여기서 잠깐, 콘텐츠가 왼쪽 정렬인 이유는 뭘까? 
우리나라는 글자를 왼쪽에서 오른쪽 방향으로 읽는다. 이러한 특성을 반영한 것이라고 할 수 있겠다. 
단순히 코딩만 하는 것이 아니라 브라우저 관점으로 시각을 넓히면 best!

initial, inherit

コンテンツにwidthが割り当てられていない場合、コンテンツは親要素の幅に準拠します.
したがって、初期値はbodyおよびmargin:0に設定される.
ただし、margin:initialはIEによってサポートされていないため、属性を表示できないため、通常initialが使用される.
直接0をあげることができますが、キーワードを見る練習をします.margin:0継承をサポートする属性を初期化するために使用されます.
すべての要因が適用されるわけではない.(余白、padding、float、position、borderなどの属性はサブ要素に継承されません.)継承がサポートされていない場合は、頭文字を書きます.
ex.親のお金を受け継ぎたい!
▼▼▼定理inherit:初期値initial:親要素からの継承値の指定

財産相続

inheritをfont-sizeに適用した場合、サブエレメント(wrapper、header、contents...)property(プロパティ)が継承されます.
通常、基本フォントサイズは16 pxで、2 emをあげると倍になります.(h 1のフォントサイズは16 px X 2)

reset css

初期化コードはcssの上部に記述され、単独で管理されます.

body, p, ul {
  margin: 0;
  padding: 0;
}

すべての形状のすべての要素を選択する「全選択者」(Universal Selector)bodyは良いですが、単独でそれを使って勉強することもできます!

* {
  margin: 0;
  padding: 0;
}

Boxモデルの5つの基本プロパティ

div {
  width: 20px;
  height: 20px;
  margin: 10px;
  padding: 10px;
  border: 1px solid black;
}

*:親要素の幅に基づいています.

width:auto:親ではなく子のサイズでコンテンツサイズを計算する(width:autoとは異なる)

height:auto:外距

margin:内側マージン

padding:borderは、コンテンツ全体のサイズを大きくすることができる.

margin: auto

borderはblocklevel要素です.divはblock要素で、横線を借りたと言える.つまり、残りの空間は自動的に空白になる.
このmargin:autoを中央に配置するには、次のようにします.
ただし、垂直方向の中央揃えはできません.コンテンツ量(高さ)が影響します

div {
  width: 200px;
  margin-left: auto;
  margin-right: auto;
}

div {
  width: 200px;	  /* width값이 꼭 있어야 함 */
  magin: 0 auto;  /* 0은 상하, auto는 좌우 */
}

width:100% ? width:auto ?

2人とも親と同じ大きさの利用可能な空間を埋め尽くします.二つは差が少ないように見えますが、厳密には違います.div中100%は、全体が右方向であり、内容の幅を超えていることを示す.margin-leftの同じautoは、margineを含めて自動的に右に押されますが、コンテンツの幅を超えません.

text-align: center ?

margin-leftとh1を中央に揃える場合は、pにしなければなりません.間違った答えです.text-align:centerおよびh1はblocklevel要素であるため、pが必要である.margin:0 autoテキストのみが中央に表示されます.

<h1>, <p>는 상하단에 margin 존재하므로 디자인적으로 보면 초기화해줘야 좋다.

inline elements, block-level elements

textにはwidth,heightの概念は存在せず,長さで見るべきである.text-align:centerinlineをblock要素として作成します.blockは1行に1つしかありません.
1行に1行をリストするには、display:blockを使用します.textのベースラインを基準に1行に配置します.

block-levelの利益重複現象

display:inline-block2個が隣接している場合、隣接する上下縁はcssで意図的に値を調整し、重複するように1つの値に統一する.より高い利益値に適用されます.
親要因-子供要因の間にも利益が重なる現象が現れる.

<div class="wrapper">
  <div class="contents">
    <div class="section">
    </div>
  </div>
</div>

親(パッケージ)の余白が100 px、子の余白が30 pxの場合、より大きな方向に余白が重なります.
H=>8形状にするには、block-level elementsをパッケージに付与します.しかし、これは良い方法ではありません.
その他の方法(親要素に適用)

padding:1px : 1px solid black

border : hidden   (IEを考慮)

overflow : flow-root   (明るい未来、IE壊滅の世界英雄)

.contents {padding: 20px}, .もう一つの方法はlast-child{marging-bottom:0 px}!
#幸せのためのコード参考にしてみよう~https://youtu.be/c19Mjg-ivxc