CSS生活コード(WEB-CSS)

[基本概念]

CSSを装飾に使う方法は大きく2種類あります.
1)スタイルラベルの使用
   1-1)html内部に宣言
   1-2)html以外で宣言(個別ファイルとして作成)
2)スタイル属性の使用

知らないCSS属性を直接検索します.
ex) CSS text size property
       CSS text center property

選択者は、id/class/tagの3種類まで使用できます.

優先度id>class>tag

のクラスの選択者である場合、最後の適用の優先順位は

である.

プロパティを簡単にタグ付けすることもできます.

h1, a { // 2개의 선택자를 동시에 적용!
  border-width:5px;
  border-color:red;
  border-style:solid;
}
는 아래와 같다.
h1, a {
  border:5px solid red; // 순서는 중요하지 않다!
}

[要素分割]

  1)block level element:画面全体(ex)h 1、h 2などを使用)
  2)inline element:自分のボリュームコンテンツサイズのみ使用(aなど)
 しかし、この2つの要素は最初の区分にすぎず、変更できます!
   display:inline->inline elementに変更
   display:block-->block elementへの変更

[箱の型番]

border:要素の枠線
   border-style->破線か実線かなど
padding:コンテンツと枠線の間隔
外枠:外枠と外枠の間

[ div / sapn ]

div:設計用(block level element)
span:設計(inline level element)に意味がない

[ Grid ]

:2 D(行と列)レイアウトシステムを提供し、1 Dよりも複雑なレイアウトを実装する
   1)display:グリッドの指定
   2)grid-プロパティの使用

  #grid{
      display: grid;
      grid-template-columns: 150px 1fr;
      // 첫 번째 요소(ol)는 150px, 두 번째 요소(div)는 1fr 로 크기 설정
   }
      #grid ol { // grid 밑에 ol태그에 적용
      padding-left: 50px;
   }
  #article{
      padding-left: 50px;
   }

<div id="grid">
        <ol>
            <li>HTML</li>
            <li>CSS</li>
            <li>JS</li>
        </ol>
        <div id="article">
            <h2>CSS</h2>
            <p>CSS Description</p>
        </div>
    </div>

[適応型Web VS反応型Web]

適応Web:デバイスタイプを選択し、指定したテンプレートに接続して、指定したリソースを受信するWeb
リアクションWeb:デバイスのタイプにかかわらず、テンプレートに接続し、すべてのリソースを受信し、必要なリソースのWebを使用します.

[メディアクエリ]

:スクリーンプリンタ(print)など、メディアタイプに応じて異なるスタイルシートを適用します.
(画面サイズは開発者ツールで確認できます)

        // screen < 800 이면 적용!
        @media(max-width: 800px){
            div{
                display: none;
            }
        }

[ファイルの分離とキャッシュ]

単独のcssファイルを使用する場合、htmlをレンダリングするときにcssファイル

をダウンロードする.

キャッシュはcssファイルが変化した場合にのみ再ダウンロード(効率の差は大きくない)

単独のcssファイルを保持したほうがいいです!(推奨)