호다닥

부트스트랩 Basics - Codeit (웹퍼블리싱) 본문

기타

부트스트랩 Basics - Codeit (웹퍼블리싱)

3jun 2018. 9. 19. 19:17

부트스트랩 그리드 시스템

구성

컨테이너 (container)

행 (row)

열 (column)

 

기본규칙

  1. 행(<div class="row">)은 꼭 컨테이너(<div class="container">) 안에 넣어주세요.
  2. 열(<div class="col">)은 꼭 행(<div class="row">) 안에 넣어주세요. 오직 행만 열의 직속 자식이 될 수 있습니다.
  3. 콘텐츠(우리가 그리드에 넣고 싶은 내용)는 꼭 열(<div class="col">) 안에 넣어주세요.

이 규칙들만 지켜도 예상치 못한 레이아웃이 나오지는 않을 것입니다!

 

기본사용법

부트스트랩 그리드에는 한 줄에 기본적으로 12칸의 열(column)이 있다고 생각하시면 됩니다. 예를 들어서 한 줄을 정확히 3등분하고 싶으면 네 칸을 차지하는 열 세 개를 쓰면 되는 거죠. 네 칸을 사용하는 열은 <div class="col-4">입니다.

아래의 코드에서는 다양한 방식으로 12칸을 나누어 보았다.

<head>   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> </head>  <body>   <div class="container">     <div class="row">       <!-- 정확히 3등분 -->       <div class="col-4 first">first</div>       <div class="col-4 second">second</div>       <div class="col-4 third">third</div>     </div>      <div class="row">       <!-- 정확히 2등분 -->       <div class="col-6 first">first</div>       <div class="col-6 second">second</div>     </div>      <div class="row">       <!-- 1대 5 비율 -->       <div class="col-2 first">first</div>       <div class="col-10 second">second</div>     </div>      <div class="row">       <!-- 1대 2대 1 비율 -->       <div class="col-3 first">first</div>       <div class="col-6 second">second</div>       <div class="col-3 third">third</div>     </div>   </div> </body>

 

12칸을 넘어가면?

만약 한 행에 12칸이 넘는 열이 들어간다면, 새로운 줄로 넘어가게 됩니다.

Why 12?

부트스트랩을 만든 분들은 왜 하필 12라는 숫자로 정했을까요?

12는 상당히 많은 숫자들(1, 2, 3, 4, 6, 12)로 나누어지기 때문에 굉장히 유연합니다!

예를 들어서 8칸으로 나누고 싶더라도 12라는 숫자의 유연함 덕분에 쉽게 할 수 있습니다. col-6를 두 개 쓰면 2등분 할 수 있고, 그 안에서 또 col-3로 4등분을 하면 8칸이 생기겠죠?

이런식으로 열을 또 여러 열로 나누는 것을 '중첩(nesting)'한다고 부릅니다. 중첩을 하기 위해서는 우선 열(<div class="col-6">) 안에 새로운 행(<div class="row">)을 쓰셔야 합니다. 예제를 통해 살펴보세요:

<head>   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> </head>  <body>   <div class="container">     <div class="row">       <div class="col-6">         <div class="row"> <!-- 중첩을 위한 새로운 행 -->           <div class="col-3 first">1</div>           <div class="col-3 second">2</div>           <div class="col-3 third">3</div>           <div class="col-3 fourth">4</div>         </div>       </div>        <div class="col-6">         <div class="row"> <!-- 중첩을 위한 새로운 행 -->           <div class="col-3 first">5</div>           <div class="col-3 second">6</div>           <div class="col-3 third">7</div>           <div class="col-3 fourth">8</div>         </div>       </div>     </div>   </div> </body>

 

 

부트스트랩에서 정해둔 반응형 웹디자인의 구간

  1. Extra Small (< 576px): 모바일
  2. Small (≥ 576px): 모바일
  3. Medium (≥ 768px): 타블릿
  4. Large (≥ 992px): 데스크탑
  5. Extra Large (≥ 1200px): 와이드 데스크탑

 

 

Container 

기본적으로 컨테이너는 가운데 정렬이 되어 있고, 그리드의 행들을 감싸주는 역할을 한다. (행들은 열들을 감싸주고 있다.)

컨테이너에는 2가지 종류가 있다.

  1. <div class="container">: 구간별로 그리드에 고정된 width를 설정해줍니다.
  2. <div class="container-fluid">: 그리드는 항상 width: 100%;입니다.

<div class="container">

만약 구간별로 그리드에 고정된 가로값을 설정해주고 싶으면 "container" 클래스를 사용하세요.
구간별로 그리드가 고정되어 있으면 레이아웃을 예상하기 용이하다.

<div class="container-fluid">

상황에 따라 그리드가 항상 100%의 가로 길이를 갖는 것이 좋을 때가 있습니다. 그럴 때는 "container-fluid" 클래스를 사용하면 됩니다.

 

 

 

열 (column)

반응형 구간별로 (총 12칸 중) 열이 차지하는 칸의 개수도 다르게 할 수 있습니다.

예시를 몇 가지 봅시다.

예시 1 (구간별로 모두 설정되어 있는 경우)

<div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
  1. Extra Small (< 576px): 12칸을 모두 차지
  2. Small (≥ 576px): 6칸 차지
  3. Medium (≥ 768px): 4칸 차지
  4. Large (≥ 992px): 3칸 차지
  5. Extra Large (≥ 1200px): 2칸 차지

예시 2 (특정 구간만 설정되어 있는 경우)

아래와 같이 특정 구간에만 열 수가 설정되어 있는 경우도 있습니다. 그렇다면 그 구간부터 새로운 설정이 있는 상위 구간까지는 같은 칸 수를 차지합니다.

<div class="col-12 col-lg-3">
  1. Extra Small (< 576px): 12칸을 모두 차지
  2. Small (≥ 576px): 12칸을 모두 차지
  3. Medium (≥ 768px): 12칸을 모두 차지
  4. Large (≥ 992px): 3칸 차지
  5. Extra Large (≥ 1200px): 3칸 차지
<div class="col-6">
  1. Extra Small (< 576px): 6칸 차지
  2. Small (≥ 576px): 6칸 차지
  3. Medium (≥ 768px): 6칸 차지
  4. Large (≥ 992px): 6칸 차지
  5. Extra Large (≥ 1200px): 6칸 차지

 

 

'기타' 카테고리의 다른 글

[eclipse] 이클립스 실행안될때  (0) 2019.02.05
Atom 기본세팅 ( Node.js / Chrome )  (0) 2018.07.19
프로그래머스 알고리즘 연습 Level1 서울에서 김서방 찾기  (0) 2018.07.01
프로그래머스 알고리즘 연습 Level1 제일 작은 수 제거하기  (0) 2018.06.28
프로그래머스 알고리즘 연습 Level1 수박수박수박  (0) 2018.06.28
'기타' Related Articles more
Comments