[부트스트랩] 레이아웃 #1 - Grid


 개요


 이번에는 부트스트랩에서 사용하는 CSS에 대해 알아 보겠습니다. 부트스트랩의 가장 큰 장점은 웹 표준 사이트를 만들때 필요한 CSS가 미리 정의되어 있기 때문에 디자이너나 개발자는 정의되어 있는 CSS를 가져와서 사용만하면 된다는 것입니다. 미리 정의된 기본 CSS 스타일을 파악하게 되면, 웹사이트를 보다 편리하고 빠르게 만들 수 있습니다.

HTML5 doctype

 부트스트랩은 HTML5 기반의 HTML 엘레먼트와 CSS 속성을 이용합니다. 새로운 HTML 작성시 doctype을 지정해야 합니다.

<!DOCTYPE html>
<html lang="ko">
  ...
</html>


모바일 퍼스트

부트스트랩2 에서 모바일 친화적인 스타일을 프레임워크의 중요한 부분으로 추가했으며, 부트스트랩3 에서는 처음 시작부터 모바일 친화적으로 다시 만들어졌습니다.  말하자면, 부트스트랩은 모바일 First입니다. 반응형 웹페이지를 위한 확대/축소를 위해, <head>viewport 메타태그를 추가하면됩니다.

<meta name="viewport" content="width=device-width, initial-scale=1">

viewport 메타태그에 user-scalable=no 속성을 추가하면 모바일 기기에서 확대/축소 기능을 끌 수 있습니다. 확대/축소를 끈다는 것은, 사용자들이 스크롤만 가지고 화면을 탐색할 수 있습니다.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">


타이포그래피 및 링크

기본적으로 부트스트랩은 영문 기준으로 제작되며, 기본 전역적인 표시로, 타이포그래피, 폰트 및 링크 스타일등을 정의 할 수 있습니다.
  • body 에서 background-color: #fff; 를 설정
  • 기본 타이포그래피로 속성 @font-family-base, @font-size-base, @line-height-base 를 사용
  • 전역 링크의 색은 @link-color 에 설정하고 밑줄효과는 :hover 에만 적용

컨테이너

부트스트랩은 사이트 콘텐츠를 감싸고 그리드 시스템을 만들 콘테이너 DIV 엘레먼트를 사용해야 합니다.
반응형 고정폭 콘테이너를 위해 .container 를 사용

<div class="container">
  ...
</div>

뷰포트 전체폭까지 늘어나는 최대폭 콘테이너를 위해 .container-fluid 을 사용

<div class="container-fluid">
  ...
</div>



그리드시스템

소개

 부트스트랩은 그리드 시스템을 이용하여 레이아웃을 잡습니다. 그리즈(격자,grid)는 총12열로 구성되어 있으며, 웹사이트의 레이아웃에 따라 구성을 변경해 줄 수 있습니다. 기기나 뷰포트 크기가 증가함에 따라 12 열이 적절하게 확대/축소 되는 반응형, 모바일 우선 유동 그리드 시스템입니다.

반응형 BreakePoints

부트 스트랩은 모바일 용으로 개발 되었으며, 레이아웃과 인터페이스를 위해 감각적인 BreakePoints를 만들기 위해 몇 가지 media query를 사용합니다. 이러한  BreakePoints는 대부분 최소 뷰포트 너비를 기반으로하며 뷰포트 변경시 요소의 크기를 조정할 수 있습니다.

부트 스트랩은 주로 레이아웃, 그리드 시스템 및 구성 요소에 대해 소스 Sass 파일에서 다음과 같은 미디어 쿼리 범위 (또는 중단 점)를 사용합니다.


/* 매우 작은 기기들 (모바일폰, 768px 보다 작은) */
/* 부트스트랩에서 이것은 기본이므로 미디어쿼리가 없습니다. */

/* 작은 기기들 (태블릿, 768px 이상) */
@media (min-width: @screen-sm-min) { ... }

/* 중간 기기들 (데스크탑, 992px 이상) */
@media (min-width: @screen-md-min) { ... }

/* 큰 기기들 (큰 데스크탑, 1200px 이상) */
@media (min-width: @screen-lg-min) { ... }


작동방식(How it works)

 그리드 시스템은  행과 열의 연속적인 시리즈를 통해 페이지 레이아웃들 만드는데 사용되어집니다. 부트스트랩에서 그리드시스템 사용하기 위해 다음과 같이 작성해야만 합니다.
  • 행은 반드시 적절한 정렬과 패딩을 위해서 .container (fixed-width) 나 .container-fluid (full-width) 안에 위치해야 합니다
  • 열들의 수평그룹을 만들때에는 행을 이용
  • 콘텐츠는 열안에 위치해야 합니다
  • .row .col-xs-4 같은 사전정의된 그리드 클래스들은 간편하게 그리드 레이아웃 만드는 것을 가능하게 하며, Less 믹스인은 좀 더 시멘틱한 레이아웃을 위해 사용합니다.
  • 열은 padding 으로 사이 간격을 만듭니다. 패딩은 행 내에서 첫열과 마지막열을 위해 .row 내에 음수 마진으로 offset 되어 있습니다
  • offset의 음수 마진은 내어쓰기를 위해 사용
  • 그리드 열은 12개의 가능한 열들을 원하는 만큼 명시하는 것으로 만들어지며, 같은 크기의 3개 열은 .col-xs-4 를 3개 사용할 수 있습니다.
  • 만약 한 행에 12열보다 더 많이 배치된다면, 남은 열들은, 하나의 유닛으로, 새로운 라인에 감싸면됩니다
  • 그리드 클래스는 분기점 크기보다 크거나 같은 너비의 화면을 가진 기기에 적용됩니다. 그리고 보다 작은 기기의 그리드 클래스가 오버라이드 됩니다. 그리하여, 예를 들어 요소에 .col-md-* 클래스를 적용하는 것은 중간 기기에 스타일이 효과가 있는 것뿐만 아니라 .col-lg-* 클래스가 없다면 큰 기기에도 효과가 있게 됩니다.

 

그리드옵션(Grid Options)

 부트스트랩에서 대부분의 크기를 정의 할 때 emrem 을 사용하며, px는 그리드 breakepoint 및 컨테이너 폭에 사용됩니다. 이것은 뷰포트 너비가 픽셀 단위이며 글꼴 크기에 따라 변하지 않기 때문입니다.

 

다음 표는 다양한 기기에서 부트스트랩 그리드 시스템에서 어떻게 표현되는지 알 수 있습니다.



 

Auto-layout 컬럼(Auto-layout Columns)

.col-sm-6과 같이 명시 적으로 번호가 매겨진 클래스가 없어도 쉽게 열 크기를 조정할 수있는 breakepoint 별 열 클래스를 사용할 수 있습니다.
 

열너비를 같게(Equal-width)

 xs에서 xl까지 모든 장치와 뷰포트에 적용되는 두 개의 그리드 레이아웃(row)이 있습니다.  모든 열에 동일한 너비 컬럼을 만들기 위해 각 중단점(breakpoint)에 단위 없이 클래스를 추가하면 됩니다. 
 

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Equal-width는 여러 줄로 나눌 수 있지만 명시적으로 굴곡 기준이나 테두리없이 작업하지 못하게하는 Safari/flexbox 버그가 있습니다. 위의 예제는 테두리가 설정되어있어야 작동합니다. .col {border : 1px solid transparent; }. 또는 플렉스 기준을 열 너비 (예 : .col {flex : 1 0 50 %;})로 설정할 수 있습니다.

특정열 너비 설정 (Setting one column width)

그리드 열의 자동 레이아웃은  한 열의 너비를 설정하고 같은 row의 다른 열의 크기를 자동으로 조정할 수 있습니다. 미리 정의 된 그리드 클래스 (아래 그림 참조), 혹은 그리드 믹스 또는 인라인 너비를 사용할 수 있으며, 같은 row의 다른 열은 가운데 열의 너비에 관계없이 크기가 조정됩니다.



<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>
 

가변 너비 콘텐츠 (Variable width content)

col- {breakpoint} -auto 클래스를 사용하여 cotents 본래 너비에 따라 열의 크기를 조정합니다.

 

 


<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

동일너비 다중Row (Equal-width multi-row)

열을 구분할 위치에 .w-100을 삽입하여 여러 행에 걸쳐있는 등 너비 열을 새 행에 작성합니다. .w-100을 응답 성이 좋은 일부 디스플레이 유틸리티와 혼합하여 반응을 늦출 수 있습니다.

 

 
<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="w-100"></div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

 

반응형 클래스(Responsive classes)

부트스트랩의 그리드에는 반응이 빠른 복잡한 레이아웃을 구현하기위해 미리 정의 된 클래스의 5 개 계층이 있습니다. small, small, medium, large, or extra large 디바이스에서 열의 크기를 맞춤 설정할 수 있습니다.

전체 BreakPoints ( All breakpoints )

 가장 작은 장치부터 가장 큰 장치까지 동일한 그리드의 경우 .col 및 .col- * 클래스를 사용하면됩니다. 특히 크기가 지정된 열이 필요할 때에는 번호가 매겨진 클래스를 지정하면 됩니다.

 



<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>
<div class="row">
  <div class="col-8">col-8</div>
  <div class="col-4">col-4</div>
</div>

가로로 쌓기 (Stacked to horizontal)

단일 세트의 .col-sm- * 클래스를 사용하여 데스크탑 (중간크기) 장치에서 수평이되기 전에 여분의 작은 장치에 쌓인 기본 그리드 시스템을 만들 수 있습니다.

 
 

 
<div class="row">
  <div class="col-sm-8">col-sm-8</div>
  <div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
</div>

 

맞춤(Alignment)

세로 맞춤 (Vertical alignment)



<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>




<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

 가로 맞춤 (Horizontal alignment)

 





<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

테두리 여백 없애기 (No gutters)

사전 정의 된 그리드 클래스의 열 사이에있는 공백은 .no-gutters로 제거 할 수 있습니다. 이렇게 하면 .row 로 지정된 음수 공백과 하위 컬럼의 가로 패딩 공백을 모두 제거 할수 있습니다.

 
<div class="row no-gutters">
  <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

컬럼 감싸기 (Column wrapping)

만약 한행에 12열보다 많이 배치된다면, 남은 열은, 하나의 유닛처럼 새로운 라인에 감싸지게 됩니다.



<div class="row">
  <div class="col-9">.col-9</div>
  <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>

반응형 컬럼 초기화 (Column resets)

사용가능한 4등급의 그리드들과 특정 분기점에서, 컬럼들이 하나가 다른 컬럼보다 긴 경우 명확하게 클리어 되지 않을 수 있다. 그걸 해결하기 위해서, .clearfix 와 우리의 responsive utility classes 의 조합을 사용하면 됩니다.



<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

재정렬(Reordering)

유연한 정렬 (Flex order)

.order- 클래스를 사용하여 콘텐츠의 보여지는 순서를 지정할 수 있습니다. breakpoint (예 : .order-1.order-md-2)별로 순서를 설정할 수 있으며, 다섯 개의 모든 그리드 티어에 대해 1에서 12까지 지정 가능합니다.



<div class="container">
  <div class="row">
    <div class="col">
      First, but unordered
    </div>
    <div class="col order-12">
      Second, but last
    </div>
    <div class="col order-1">
      Third, but first
    </div>
  </div>
</div>


 컬럼 순서를 지정하기 (Offsetting columns)

v4의 flexbox로 업그레이드 되면서 v3의 오프셋 클래스 스타일은 더 이상 사용되지 않습니다. 대신 형제 열을 서로 멀리 떨어지게하려면 .mr-auto와 같은 여백 유틸리티를 사용하면 됩니다.



<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
  <div class="col-auto mr-auto">.col-auto .mr-auto</div>
  <div class="col-auto">.col-auto</div>
</div>

중첩(Nesting)

기본그리드로 콘텐츠를 중첩하려면, 존재하는 .col-md-* 컬럼 내에 새로운 .row 와 .col-md-* 컬럼 세트를 추가 하면 되며, 중첩된 행은 합쳐서 12 가 되는 하나의 컬럼 세트를 포함해야 합니다.

 

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-8 col-sm-6">
        Level 2: .col-8 .col-sm-6
      </div>
      <div class="col-4 col-sm-6">
        Level 2: .col-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

Saas Mixins

부트스트랩의 소스로 Sass 파일을 사용할 때 Sass 변수와 mixins를 사용하여 사용자 정의, 의미 및 응답 성있는 페이지 레이아웃을 생성 할 수 있습니다. 미리 정의 된 그리드 클래스는 이러한 동일한 변수와 믹스 인을 사용하여 빠른 응답 레이아웃을위한 바로 사용할 수있는 클래스 모음을 제공합니다.

변수 지정 (Variables)

변수 및 맵 등으로 부동 열을 총 열의 수, 거터 폭 및 미디어 쿼리 포인트를 결정합니다.  미리 정의 된 그리드 클래스를 생성하여 아래처럼 사용자 정의 믹스 라인을 생성할 수 있습니다.

$grid-columns:      12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);

Mixins

믹스 인은 그리드 변수와 함께 사용되어 개별 그리드 열에 대하여 의미있는 CSS를 생성합니다.

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);

사용예제

변수를 사용자 정의 값으로 수정하거나 기본값을 사용하여 mixins를 사용할 수 있습니다. 다음은 기본 설정을 사용하여 간격이있는 두 열 레이아웃을 만드는 예입니다.

.example-container {
  width: 800px;
  @include make-container();
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}




<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

커스텀 그리드 

내장 된 그리드 Sass 변수와 맵을 사용하여 사전 정의 된 그리드 클래스를 완전히 재정의 할 수 있습니다. 계층 수, 미디어 쿼리 크기 및 컨테이너 너비를 변경 한 다음 다시 컴파일 진행하면 됩니다.

컬럼 및 거터(gutter)

그리드 열 수는 Sass 변수를 통해 수정할 수 있습니다. $grid-columns는 각 개별 열의 너비 (백분율)를 생성하는 데 사용되는 반면 $grid-gutter-width는 열 거터의 패딩 왼쪽과 패딩 오른쪽에 균등하게 나누는데사용합니다.

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

그리드 계층 (Grid tiers)

 그리드 계층의 수를 사용자 정의 할 수도 있습니다. 네 개의 그리드 티어 만 원한다면 $grid-breakpoints$container-max-widths를 다음과 같이 변경하면 됩니다.

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

Sass 변수 나 맵을 변경하고 변경사항을 적용하려면 다시 컴파일해야합니다. 열 너비와 순서에 대한 새로운 클래스 집합이 생기며, 가시적인 반응형 유틸리티는 또한 사용자 정의 중단점을 사용하도록 업데이트됩니다.




댓글

주간 인기글

[앱 디자인] 디자인 가이드 만들기 - 안드로이드

남산 케이블카 이야기

[AWS] Bastion Host 를 활용한 SSH 접근통제 #1

[정보] 인스타그램은 당신의 소리를 '듣고' 있을 수도 있습니다

AWS Beanstalk 구성파일(.ebextensions)을 사용하여 환경 구성하기