Layout

responsive

모바일 및 PC 반응성을 위해 다음과 같이 SCSS 문법을 작성할 수 있습니다.
CSS 클래스를 하나 생성하고 @include pc {...} 또는 @include mobile {...} 을 생성해 그 안에 원하는 스타일을 작성하면 됩니다.

  • 기본값(768px)을 기준으로, 창 사이즈가 기준보다 크면 PC, 작으면 Mobile 로 간주합니다.
  • 이 기본값은 ~/@majac/css/build/custom_scss/_var.scss 파일에서 $pc-width 값을 변경하면 적용됩니다.

.body {

  @include pc {
    background-color: #FFF;
  }

  @include mobile {
    background-color: red;
  }

}

size

각 Element의 크기를 조절할 때 사용되는 Class입니다. 특정한 규칙을 적용해 원하는 크기를 설정할 수 있으며,
<div class="속성-값[옵션]"> 형태로 사용됩니다.

  • 속성 : width / height
  • 값 : 0 ~ 100
  • 옵션(생략가능, 크기가 %으로 적용됨) : p
  
<div class="width-50"></div>
<div class="width-100p"></div>

<div class="height-50"></div>
<div class="height-100p"></div>

margin & padding

각 Element의 간격을 조절할 때 사용되는 Class입니다. 특정한 규칙을 적용해 원하는 간격을 설정할 수 있으며,
&lt;div class="속성-적용범위-값"&gt; 형태로 사용됩니다.

  • 속성 : margin / padding
  • 적용범위 : top / bottom / left / right / h(top&bottom) / w(left&right)
  • 값 : 0 ~ 100, auto(속성 margin 일 때만 적용가능)
  
<div class="margin-top-50"></div>
<div class="margin-bottom-50"></div>
<div class="margin-left-50"></div>
<div class="margin-right-50"></div>
<div class="margin-h-50"></div>
<div class="margin-w-50"></div>
<div class="margin-w-auto"></div>

<div class="padding-top-50"></div>
<div class="padding-bottom-50"></div>
<div class="padding-left-50"></div>
<div class="padding-right-50"></div>
<div class="padding-h-50"></div>
<div class="padding-w-50"></div>

Categories