# 6. TIL

14890 ワード
テキストリンク
今日はチームメンバーと自分のコードを共有しました.その時、私は新しいことを勉強しました.😎

1.FlexboxとGrid


PC、タブレット、携帯電話など多くの機器がありますが、機器ごとに異なるサイズを指定できないので使用します.特に、エレメントサイズが不明確または動的に変化した場合に使用します.
プロパティ配置方法センターflexbox 1 D配置方法コンテンツセンターメッシュ2 D配置方法レイアウトセンター
ソース。 , ソース。 , ソース。

2.CSSオーバーフロー属性


要素の内容が大きすぎて、要素のすべてを表示しにくい場合にどのように表示するかを指定します.
「値の説明」visibleボックスに文章を表示し(文章が多い場合は枠外に表示)、「非表示」ボックスに文章を表示し(文章が多い場合は枠外の文章が見えない)、自動的にスクロールバー(水平スクロールバーでも垂直スクロールバーでもよい)を追加するかどうかを決定します.autoの容量によって異なります.
<style>
  div.container {       
    overflow: scroll;       
    border:1px solid black;   
    width: 100px;     
    height: 100px;       
  }        
</style>
<div class="container">
  <p>스크롤바 만들기</p>
</div>

ソース

3. z-index

position属性でソートすると、配置された宿屋が重なる場合があります.オブジェクトの垂直位置を定義し、オブジェクトを順番にリストします.
<style>
    div {
      width: 100px;
      height: 100px;
      position: absolute; /* position 속성 사용 */
  }
  div.x {
      background-color: yellow;
      top: 20px;
      left: 200px;
      z-index: 3; /* 먼저 작성하면 1이지만 역순을 줬음 */
  }
  div.y {
      background-color: green;
      top: 50px;
      left: 260px;
      z-index: 2;
  }
  div.z {
      background-color: red;
      top: 80px;
      left: 230px;
      z-index: 1;
  }
</style>

ソース

4.グラデーション

  • 直線-勾配(角度または方向、始色、終点色);
    直線グラデーションは、垂直、水平、対角線方向などの面で色を一定に変化させます.
    • z-index・to top・to left・to right・属性値があります.
    <style>
    div{
    width: 200px;
    height: 200px;
    border: 1px solid;
    background: linear-gradient(to top, black, white);
    }
</style>
  • ラジアル勾配(位置上の形状の大きさ、開始色、終了色);
    円(または楕円)の中心を中心に同心円を描画し、色を外側に変更します.
    • to bottom・circle属性値があります.
    <style>
    div{
    width: 200px;
    height: 200px;
    border: 1px solid;
    background: radial-gradient(circle, rgb(255, 255, 255), rgb(52, 52, 160), rgb(206, 238, 130));
    }
</style>

    ソース

    5. transform


    Transformは、エンティティのサイズ、位置、シェイプを変更するプロパティです.ellipse・scale・rotate・translate・属性値があります.
    <!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS-ex</title>
      <style>
        .ex {
        width: 300px;
        height: 300px;
        margin: 100px auto;
        background-color: black;
        transition: all ease 1s;
        }
        .ex:hover {                 /*hover를 꼭 줘야함 */
        transform: rotate( 50deg ); /* 회전하는 속성값 */
        }
      </style>
  </head>
  <body>
    <div class="ex"></div>
  </body>
</html>

    このボックスは、次のように返されます.
    ソース。 , ソース。
    TIL 2021.05.23 [Nodejs]
    🔥 TIL - Day 13