[temp] 12. CSS

6522 ワード
grid multi-columns テキストリンク

MULTI-COLUMNS(マルチレベル)


簡単にテキスト段落にまとめる
  • columns 
    columns: 너비 개수;

  • column-countセグメントの数

  • column-widthセグメントの最適幅
    各セグメントが縮小できる最適幅(最小サイズ)を設定し、最適幅より小さいサイズにすると、セグメント数が調整されます.
  • column-rule(ショートカット)セグメントとセグメントの間の区切り線
    column-rule: 두께 종류 색상;
    borderと考えられる

  • column-rule-width

  • column-rule-style

  • column-rule-color
    文字の色に影響されないように、色を別途指定する必要があります.
  • column-gapセグメントとセグメント間の距離
    paddingとは異なり、規則的な厚さの影響を受けません.
    column-gap: 간격; 
    값
  • 通常のブラウザでは、エンドツーエンドの間隔(デフォルトは1 em)
    • を設定します.
  • 単位

    • 19 CSSプロパティ-グリッド


    2 D(行と列)レイアウトシステム(flexは1 Dレイアウト)
    GRIDを使用することで、Flexよりも複雑なレイアウトを決定できます.
    containerとitemで使用されるプロパティは異なります.(flexのような概念)

    Grid Container


  • display
    グリッドを使用するために必要なプロパティを定義→グリッド
  • grid
  • inline-grid

  • template-rows (h)
    行のサイズと数を明確に定義
    線の名前を同時に定義できます(つまり、1番線に名前を付けます)
    [線名]100 px
    また、重複する名前「開始線名終了線名」100 pxも使用できます.
    線名が重要でない限り、使用しません.

    repeat(繰り返し回数、100 px 200 px)のように複数の単位を順番に繰り返すこともできます.

  • template-columns (w)
    列のサイズと数を明示的に定義
    grid-template-columns: 200px 200px
    1 frは比例を表す.
    grid-template-columns: repeat(3,1fr); →1 frを3回繰り返す

  • grid-template-areas
    アイテム属性のgrid-areaと一緒に使用する必要があります.
    参照保存されたグリッド領域名テンプレートを作成するには

  • grid-template(ショートカット)
    "hrader header header"80px
    "main main aside"350px
    "footer footer footer"130px
    /2fr 100px 1fr

  • row-gap
    線のサイズを指定し、各行と行の間隔を指定します.

  • column-gap
    • →gap(行、列):ショートカット属性

  • grid-auto-rows
    暗黙的な行のサイズを定義します.
    暗示的.
    2行2列でグリッドを作成する場合
    グリッドの外側に配置するときのサイズを指定できます.
    →暗示の定義がないと正しく表現できません.
    1 frを加えると、明示的な比率とㅎを加算してサイズを計算します.
    自動的に増加する行と列の線は正の数しか使えず、負の数では表現できません.


  • grid-auto-flow
    ながれほうこうせいぎょ
    自動配置アルゴリズムが配置されていないアイテムをどのように処理するかを定義します.

  • row:水に沿って平行な軸
  • 次の要素のサイズが空白領域と一致しない場合、空白領域
    • は埋められない.

  • column:列に垂直な軸

  • row density:空白領域を水平に塗りつぶす

  • 列が密集している:空白領域を垂直に塗りつぶす

  • GRID短縮
    template,autoのショートカットプロパティ
    rowとcolumnは/で区切られ、rowはまずマークされます.
    →auto-flow間、手前がflow-row、後ろがflow-columnです.
    .container {
    grid: auto-flow dense 150px/100px 100px;
    }
    .container {
    grid: auto-flow 150px/100px 100px;
    }
    ショートカット-items:align(垂直)/videify(水平)

  • align-items

  • justify-items
    contentでアイテムをソートする

  • normal

  • start

  • end

  • center

  • stretch

  • align-コンテンツ列軸垂直揃え
    メッシュコンテンツの縦幅は、メッシュコンテナの縦幅よりも小さくなければなりません.
  • normal (=stretch)
  • start
  • end
  • center
  • space-androw:要素の上下の余白は一致し、
  • space-between
  • space-均一:空白はすべて同じ
  • stretch

  • justify-conrent:
  • normal
  • start
  • end
  • center
  • space-around
  • space-between
  • space-evenly

    • Gird Item


  • grid-column
    grid-column: 1/3; アイテムサイズの列によって拡張できます.
    開始/終了
    始点/span 3(始点から3列まで)
    span 3だけでも良いのですが、起点が明確でないと問題になります.

  • grid-row(ショートカット)

  • grid-row-start

  • grid-row-end
    spanがstatに存在する場合、終了数から-ro/endに存在する場合、開始+

  • grid-area

    • areaは名前を設定できます.
    grid-rowおよびgrid-columnのショートカットプロパティとしても使用できます.
    grid-area: r-s/c-s/r-e/c-e;
    ただし、ゾーン名を設定すると、レイアウトのプロパティは無視され、名前のプロパティのみが保持されます.
  • align-self
    • 個々のグリッド項目の個別の垂直位置合わせ
  • start
  • center
  • end
  • stretch
  • jstify-self
    • 個々のグリッド項目の水平方向の位置合わせ
  • start
  • end
  • center
  • stretch
  • order
    • グリッド項目の自動配置の順序を変更するには
    数値が小さいほど早く配置されます(負の値の場合があります).
  • z-indexデフォルト0
    • 数字が大きいほど、前に配置されます(負の数になる可能性があります)
    positionまたはgridを付与してこそ使用できます.

    グリッド関数


  • repeat

  • minmax(最高価格、最低価格)
    template、autoプロパティに使用します.
    repeat(4,minmax(100px,1fr)
    コンテナが最高価格より小さくなるとオーバーフローが発生します.

  • fit-content(コンテンツの最大サイズ)
    品物に含まれる内容の大きさを調整します.
    indent? うまくやらないと、問題になりそうです.

    • グリッド単位

  • fr(スコア)空き領域の割合
    • what is in the items!!
    combine that minmax -> respondive design

  • min-content:アイテムの最小サイズ
    grid-template-columns: min-content 1fr;
    文だと一番長い単語を基準に減少します.
    ハングルの場合は(word-break:keep-all)に変えて、単語を基準に分けることができます.

  • max-content:アイテム(コンテンツ)が持つ可能性のある最大サイズ
    必要なだけ多くなります.
    grid-temaplate-columns: repeat(5,minmax(max-content,1fr)); ->글자가 두개로 나뉘거나 깨지지 않는다.
grid-temaplate-columns: repeat(auto-fit,minmax(40px,max-dontent));

  • Autofill:物を受け取り、空きスペースがあるときは、発生時の空きスペースを保つ→最大値は使えないのではないでしょうか.
    可能な範囲内でできるだけ多くのcolumnを作成する

  • Autofit:残りのスペースを埋めます.スペースが存在しても無視され、所有する要素で埋め込まれます.
    • grid-template: repeat(auto-fill,,,)
    repeat関数とともに使用します.
    コンテンツのサイズはコンテナのサイズより大きく、オーバーフロー時に使用できます.
    repeat(auto-fill,minmax(120px,1fr)
    品物の数量と単位を自動的に調整する.
    二つはほとんど似ている
    [ファイル構造]Chapter 3.Secondary Storage and System Software[4]
    [Programmers]偶数と奇数(Java)