CSS

CSS?

selector {
  property : value
}

CSS property

Layout

スクリーン上でcontentsを位置決めすることがCSSの主な役割だと思います.

    /** static
    html tag를 참조하여 특별할것 없이 화면에 출력. 
    **/
    selector {
      position: static; 
    }
    
    /** relative
    이전 html 요소의 위치 참조하여 출력. 
    **/
    selector {
      position: relative; 
    }
    
    /** absolute
    어떠한 요소도 참조하지 않고 Browser 출력 화면 좌측 상단 모서리 기준     **/
    selector {
      position: absolute; 
    }
    
    /** fixed
    위치를 고정시켜 scroll에 상관없이 해당 위치에서 항상 출력. 
    **/
    selector {
      position: fixed; 
    }
    
    /** sticky
    static과 fixed의 혼합형. 해당 요소전까지 특별할 것 없이 출력되다 해당 요소 위치 이후까지 scroll하면 화면에 고정되어 출력된다. 
    **/
    selector {
      position: sticky; 
    }

  /** block
  html 요소가 같은 line에 위치할 수 없고 다음 line으로 넘어가게 막는다.
  **/ 
  selector {
    display: block;
  }
  
  /** inline
  html 요소가 같은 line에 위치할 수 있도록 들여온다. 
  **/ 
  selector {
    display: inline;
  }
  
  /** grid
  x, y (가로/column, 세로/row) 방향 2차원 layout.
  **/ 
  selector {
    display: grid;
    /** fr: fraction, 비율 단위
    px단위도 사용할 수 있다. 
    **/
    grid-tamplate-columns: 1fr 1fr 1fr; 
    /**
    function repeat(반복횟수, 비율)
    **/
    grid-tamplate-rows: repeat(3, 1fr)
  }
  
  /** flex
  x축 또는 y축 단 방향 layout.
  **/ 
  selector {
    display: flex;
    flex-direction: row; or column;
  }

/**
왼쪽 또는 오른쪽 또는 부모 요소 상속 부동 정렬
**/
selector {
  float: none; or left; or right; or inherit;
}

Box

  /**
  width, height 값이 content 영역을 참조한다.
  **/
  selector {
    box-sizing: content-box;
  }
  
  /**
  width, height 값이 border 영역을 참조한다.
  **/
  selector {
    box-sizing: border-box;
  }

Box model

  /**
  top, right, bottom, left, color
  **/
  selector {
    margin: 20px, 20px, 20px, 20px;
    /**
    margin-top: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
    margin-left: 20px;
    **/
  }
  
  selector {
    border: 20px, 20px, 20px, 20px, red;
    /**
    border-top: 20px;
    border-right: 20px;
    border-bottom: 20px;
    border-left: 20px;
    border-color: red;
    **/
  }
  
  selector {
    padding: 20px, 20px, 20px, 20px, red;
    /**
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-color: red;
    **/
  }

Content

  selector {
    font-family: Arial;
    font-size: 10px; or 10em; or 10rem;
    text-align: justify; 
      /**
        left, right, center
      **/
  }

Scss

  selector {
    property: value;
  }
    
  // variable
  $font-stack: arial;
  $primary-color: #000000;

  selector {
    font: 100% $font-stack;
    color: $primary-color;
  }
    
  // Nesting
  $font-stack: arial;
  $primary-color: #000000;

  parent {
    font: 100% $font-stack;
    color: $primary-color;
    
    child {
      color: red;
    }
  }
      
  /** mixins
    @mixin 
    @include
  **/
  @mixin mixin-example($property) {
    property: $property;
    property: $property;
    mixin-example: $property;
  }
  
  selector {
    @include mixin-example(rotate(30deg));
  }
    
  /** extend/inheritance
    %inheritance
    @extend %inheritance
  **/
  %inheritance-color {
    color: #000000;
  }

  %inheritance-display {
    display: flex;
    flex-wrap: wrap;
  }
  
  selector {
    @extend %inheritance-color;
  }

  selector {
    @extend %inheritance-display;
  }