Notice

Recent Posts

Recent Comments

Link

PAMTEU

« 2024/04 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

Tags more

Archives

Today

Total

관리 메뉴

모래알 반응형웹

Bootstrap 4 (부트스트랩), 반응형 레이아웃, 격자형 레이아웃시스템 (1/2) 본문

부트스트랩

Bootstrap 4 (부트스트랩), 반응형 레이아웃, 격자형 레이아웃시스템 (1/2)

전상하 2018. 3. 29. 10:30

부트스트랩 (Bootstrap)은 화면의 너비를 12 분할(12 격자, Grid)하여 웹페이지를 만든다.

Bootstrap 3의 격자형 레이아웃 시스템(Grid Layout System)은 4 가지 화면 너비를 기준으로 반응하도록 정의되어 있었다. 768px 미만(스마트폰), 768px 이상(태블릿), 992px 이상(작은 화면의 데스크탑), 1200px이상(큰 화면의 데스크탑)에 따라 신축성있게 화면이 바뀌어 반응형이 가능하도록 했다.

Bootstrap 4부터는 이 격자형 레이아웃시스템이 더 정교하고 세밀하게 발전했다.

화면의 너비를 12 분할하는 것은 동일하지만 반응하는 화면의 기준너비는 4가지 에서 5가지로 세분화되었다.

	Extra small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	Extra large ≥1200px
Max container width 실제 적용되는 너비	None (auto)	540px	720px	960px	1140px
Class prefix	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# of columns	12분할
Gutter width	30px (15px on each side of a column)
Nestable	Yes
Column ordering	Yes

Max container width: 실제 컨텐츠가 담기는 최고 너비는 꼭 알아두는 것이 좋다.

부트스트랩에서는이미지의 경우 너비를 100%로 적용하는 것이 일반적이다. 이미지가 들어가는 영역의 너비에 꽉맞게 이미지를 설정하는 것이다. 이미지는 이미지가 실제 만들어진 너비보다 작거나 크게 보여질 경우 흐려지게 된다.

화면의 너비가 바뀌더라도 이미지를 선명하게 보여주기를 원한다면 Max container width에 맞게 이미지를 5개 만들어서 적용하면 된다. 이미지의 너비를 100%로 적용하지 않고 pixel수대로 지정하는 것이다.

<576px, ≥576px, ≥768px, ≥992px, ≥1200px의 실제 영역 너비에 맞게 이미지를 5개 만들어 적용하는 것이다.

각 영역에 이미지를 적용하는 것은 후에 따로 포스팅하겠다.

Grid Layout System 실제 적용

이제 Bootstrap 4의 격자형 레이아웃 시스템을 실제로 적용해보자.

부트스트랩의 레이아웃 시스템은 기본적으로 내용을 감싸는 container와 그 내부의 row(열) 안에서 작동한다.

......................

</div>

1. col- (<576px)

브라우저 너비 576 pixel 미만부터 적용되는 격자형 레이아웃 시스템이다. 전체 코드를 먼저 입력하고 서버에 올린 후 테스트해보자.

부트스트랩을 사용하기 위해서는 기본적으로 아래의 페이지 구조가 되어야 한다.

[참조] Bootstrap(부트스트랩) 시작, 필수 요소 (http://passauer1083.tistory.com/2)

<!DOCTYPE html>

<head>

<title>Bootstrap Test</title>

</head>

<body>

내용들어가는 부분

</div>

</body>

</html>

다음과 같이 페이지를 만들어 보자.

<div class="container">

<div class="row">

<div class="col">

1 of 3

</div>

<div class="col">

2 of 3

</div>

<div class="col">

3 of 3

</div>

이렇게 하면 576px 미만의 브라우저 너비부터 최대너비크기까지 3등분된다.

그러니까 어떤 브라우저 너비로 보던 모두 3등분되는 것이다.

(파일을 서버에 올린 후 브라우저 너비를 줄이고 늘여보면 어떤 상태인지 알 수 있다.)

Bootstrap 3의 경우 <div class="col"> 대신 <div class="col-xs-4">라고 했어야 했다.

Bootstrap 4에서는 숫자 명시없이 <div classs="col">의 갯수에 따라 자동 분할한다.

이를테면 아래와 같이 입력하면 2등분이 되는 것이다.

1 of 2

</div>

2 of 2

</div>

<div class="col">은 <div class="col-6">으로 입력할 수도 있다.

2. col-sm (≥576px)

col-sm은 브라우저 너비 576px 이상에 적용된다.

<div class="container">

<div class="row">

<div class="col-sm">

1 of 3

</div>

<div class="col-sm">

2 of 3

</div>

<div class="col-sm">

3 of 3

</div>

화면 너비 576px 이상에서는 화면이 3등분 되지만 576px 미만에서는 3줄로 나타난다.

[576px 이상]

col-sm (또는 col-sm-4)

[576px 미만]

col-sm (또는 col-sm-4)

3. col-md (≥768px)

col-md은 브라우저 너비 768px 이상에 적용된다.

<div class="container">

<div class="row">

<div class="col-md">

1 of 3

</div>

<div class="col-md">

2 of 3

</div>

<div class="col-md">

3 of 3

</div>

화면 너비 768px 이상에서는 화면이 3등분 되지만 768px 미만에서는 3줄로 나타난다.

[768px 이상]

col-sm (또는 col-sm-4)

[768px 미만]

col-sm (또는 col-sm-4)

4. col-lg (≥992px)

col-lg은 브라우저 너비 992px 이상에 적용된다.

5. col-xl (≥1200px)

col-xl은 브라우저 너비 1200px 이상에 적용된다.

768px 미만에서는 2등분, 768px이상에서는 3등분하고 싶으면?

부트스트랩의 격자레이아웃시스템은 화면의 너비에 따라 각각 다르게 분할할 수 있다.

1 of 3

</div>

2 of 3

</div>

3 of 3

</div>

Container 안에 여러 개의 row가 들어갈 수 있다.

1 of 3

</div>

2 of 3

</div>

3 of 3

</div>

1 of 2

</div>

2 of 2

</div>

</div>

col-md-4

col-md-6

'부트스트랩' 카테고리의 다른 글

Bootstrap 4 (부트스트랩) 구성요소, Alert (0)	2018.04.19
Bootstrap 4 (부트스트랩), 반응형 레이아웃, 격자형 레이아웃시스템 (2/2) (0)	2018.03.30
Bootstrap 4 (부트스트랩), 지원 브라우저와 디바이스 (0)	2018.03.29
Bootstrap(부트스트랩) 시작, 필수 요소 (0)	2018.03.28
Bootstrap(부트스트랩) 4.0 소개, 다운로드 및 파일 구성 (0)	2018.03.28