CSSメモ

13487 ワード
CSS テキストリンク

確認するCSSをクリア(見当がつかない)


Rem vs em


remは1 rem=16
Emは親の基準です

inline(同じ行)-inlineにはwidthとheightはありません。(Display:inline)


block(box)-高さと幅があります。そしてmargin,padding,borderです。(display: block)

  • ユーザエージェントスタイルシート:デフォルトでは、CSSスタイルシート
    • がウィンドウに付与されている.

    枠線:枠線の境界外の空間。

    margin-top: 20px; margins-left:10px;はこのように提供される
  • 襟板縁(上下のみ)(ノマド3.5鋼を参照)

    上記のように、ホワイトボックスの境界が紫色のボックスの境界と同じである場合、2つのボックスの縁は一体となる.
    body内divの上下のエッジがbodyのエッジと出会う場合、両者の大きな値のエッジはbodyに適用されます.(白枠の境界が紫色枠の境界と同じである場合、この2つの境界は1つの境界とみなされます.境界が重なると1つの境界となります.)

    • span(inline)

  • スパンは左右の余白しかありません.
  • ダウンジャケットは四方八方に持つことができます.
    <style>
 /* span은 마진을 좌우만 가질 수 있다. */
 /* 패딩은 사방 모두 가질 수 있다. */
   body{
       margin:30px;
  }
   span {
       padding: 20px;
       background-color: yellow;
       margin: 20px;
      
   }
   .tomato {
       background-color: teal;
   }
</style>
    • hello
    hello
    hello
    hello
    hello
    ```

    display:block->インライン

    display:inline-blockは、blockがinline属性を有することを可能にする.
    つまり、そばに置いてもいいし、widthとheightがあってもいいです.display:inlineは何も表示されません(inlineにはwidthとheightがないため)
    欠点:隣の席に小さな割れ目があり、反応型ではありません.=>ソリューション表示:flex
    <style>

    body{
        margin:30px;
   }
    div {
    
        display: inline-block; 
        width:50px;
        height:50px;
        background-color: bisque;
        text-align: center;
       
    }
    .tomato {
        background-color: teal;
    }
</style>

<body>
  <div>hello</div>
  <div class='tomato'>hello</div>
  <div>hello</div>
  <div class='tomato'>hello</div>
  <div>hello</div>
</body>

    display:flex(親ボックスでのみ議論する必要があります)(反応型)

        body{
        height:1000vh (vh: 화면 크기에 따라 변한다. text-aligns 사용하려면 꼭 적용해주자)
        margin:30px;
        display: flex;
        (주축)justify-content: center, flex-end, flex-start, space-evenly, space-around, space-between 
        (교차축-기본적으로 수직)align-items: center, flex-end, flex-start, stretch(div크기가 고정된 경우는 적용불가)  body에 height를 적용해줘야 align-items가 가능하다. 
        justify-content, align-items를 이용해주고싶다면.. display:flex를 먼저 써야 나머지 속성 사용이 가능하다.
    }
     div {    
    width:50px;
    height:50px;
    background-color: bisque;
       
       
    }
    .tomato {
        background-color: teal;
    }
</style>

<body>
  <div></div>
  <div class='tomato'></div>
  <div></div>
  <div class='tomato'></div>
 </body> 
    <style>
 
    body {
        height:1000vh;
        display:flex;
        flex-direction:column; 
        /* (디폴트 옵션이 수직)display:flex를 했을떄 flex-direction:row(수평)가 디폴트 옵션이다.*/
        justify-content: center;
        align-items: center;
    }
    div {   
        /* display:flex; */
        /* justify-content:center; */
        /* align-items:center; */
        width:50px;
        height:50px;
        background-color: bisque;   
    }
    .tomato {
        background-color: teal;
    }
</style>

<body>
  <div>1</div>
  <div class='tomato'>2</div>
  <div>3</div>
  <div class='tomato'>4</div>
  
</body>

    上のコードのdiv解除処理=>text部分も適用されます.(textの親が現在の対応するタグであると仮定)
    flex-wrap: nowrap; flex-wrap: wrap; flex-direction:row-reverse; 
    <style>
 
    body {
        height:1000vh;
        display:flex;
        /* flex-direction:column;  */
       /*  (디폴트 옵션이 수직)display:flex를 했을떄 flex-direction:row(수평)가 디폴트 옵션이다. */
        justify-content: center;
        align-items: center;
        /*flex-wrap: nowrap; 
        /* 이게 디폴트값이라 사용안해줘도 되지만..이게 뭐냐면 아래 div에 width:300이라도 브라우저의 사이즈에따라 사이즈가 변할 수 있다는걸 의미한다. 즉 이걸하면 flexbox는 width를 단지 초기값으로만 여긴다는 의미*/
        flex-wrap: wrap; /*wrap-reverse도 있음*/
        /* 초기 width를 계속해서 반영한다. 브라우저가 작아지면 한 줄에 들어가는만큼 최대한 집어넣고 안되면 다음줄로 옮긴다.*/
        flex-direction:row-reverse;
        /*123 이순서가 321로 바뀐다 column-reverse도있음*/
    }
    div {   
        display:flex;
        justify-content:center;
        align-items:center;
        width:300px;
        height:50px;
        background-color: bisque;   
    }
    .tomato {
        background-color: teal;
    }
</style>

<body>
  <div>1</div>
  <div class='tomato'>2</div>
  <div>3</div>
  <div class='tomato'>4</div>
  
</body>
    701Div2.C Floor and Mod
    kubernetes Authenticating(認証)