[부트스트랩] 레이아웃 #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)
부트스트랩에서 대부분의 크기를 정의 할 때 em 나 rem 을 사용하며, 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 > 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 변수 나 맵을 변경하고 변경사항을 적용하려면 다시 컴파일해야합니다. 열 너비와 순서에 대한 새로운 클래스 집합이 생기며, 가시적인 반응형 유틸리티는 또한 사용자 정의 중단점을 사용하도록 업데이트됩니다.
- 위의 글은 부트스트랩 사이트를 번역하여 작성하였습니다.
- 이글의 원문은 https://getbootstrap.com/docs/4.0/layout/grid 를 참고하시기 바랍니다.
댓글
댓글 쓰기