반응형

1. 부트스트랩이란?

-> 오픈소스 html, css, javascript 프레임 워크 /프론트 엔드 프레임 워크(이미 만들어진)


<html>

1
2
3
4
5
6
7
8
9
10
11
12
<head>
<-- 가져왔던 css 앞에 붙임>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<-- 끝부분에 붙여줌 -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
 
cs


-> 이 방법 말고도 많은 방법들이 있다. 


-> component에서 내가 쓰고 싶은 요소 가져와서 <body>태그에 넣으면 만들어 줌.


-> bootstrapk.com (한국어 버전으로 해석해 놓음)


2. 기본 구성원(컨테이너(container) / 행(row) / 열(column) )


-기본 규칙 : 행(<div class="row">)은 꼭 컨테이너(<div class="container")>안에 넣어주기

열(<div class="col">)은 꼭 행(<div class="row")>안에 넣어줌 / 오직 열만 행의 직속 자식이 될 수 있음

콘텐츠(우리가 그리드에 넣고 싶은 내용) 은 꼭 열(<div class="col">)안에 넣어줌


-기본 사용법 : 부트스트랩 그리드에는 한 줄에 기본적으로 12칸의 열(column)이 있다고 생각/

 한 줄을 정확히 3등분 하고 싶으면 4칸을 차지하는 열 3개를 사용 => <div class="col-4">


ex) 다양한 방식으로 12칸 나눔

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
31
32
33
<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>
cs


<결과>

=> 12칸을 넘어가면 새로운 줄로 넘어감

=> 왜 하필 12?

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


-중첩(nesting) : 열을 또 여러 열로 나누는 것

=> <div class="col-6"> 안에 <div class="row">을 써야함

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
<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>
 
cs


<결과>


3. 그리드 시스템 => 반응현 웹 디자인 할 때 빛을 발함


- 정해둔 구간

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


-컨테이너(container)

<div class="container"> : 구간별로 그리드에 고정된 width를 설정

=> 고정된 가로값 설정해주고 싶다면 사용


<container 클래스 사용시 css>

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
31
32
33
34
35
.container {
  width: 100%; /* extra small */
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
/* small */
@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}
/* medium */
@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}
/* large */
@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}
/* extra large */
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}
cs

<div class-"container-fluid"> ; 그리드는 항상 width: 100%

1
2
3
4
5
6
7
.container-fluid {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
cs


-열(column) : 반응형 구간별(12칸) 열을 차지하는 칸의 개수도 다르게 할 수 있다


=ex) 구간별로 모두 설정되어 있는 경우 

1
<div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
cs

        1. Extra Small (< 576px): 12칸을 모두 차지
        2. Small (≥ 576px): 6칸 차지
        3. Medium (≥ 768px): 4칸 차지
        4. Large (≥ 992px): 3칸 차지
        5. Extra Large (≥ 1200px): 2칸 차지



=ex2) 특정 구간만 설정( 그 구간부터 새로운 설정이 있는 상위 구간까지는 같은 칸 수를 차지)

1
<div class="col-12 col-lg-3">
cs

        1. Extra Small (< 576px): 12칸을 모두 차지
        2. Small (≥ 576px): 12칸을 모두 차지
        3. Medium (≥ 768px): 12칸을 모두 차지
        4. Large (≥ 992px): 3칸 차지
        5. Extra Large (≥ 1200px): 3칸 차지


=ex3)

1
<div class="col-6">
cs

        1. Extra Small (< 576px): 6칸 차지
        2. Small (≥ 576px): 6칸 차지
        3. Medium (≥ 768px): 6칸 차지
        4. Large (≥ 992px): 6칸 차지
        5. Extra Large (≥ 1200px): 6칸 차지


반응형
저작자표시 변경금지

'Web > HTML & CSS' 카테고리의 다른 글

11. 반응형 웹  (0) 2019.03.23
10. list  (0) 2019.03.23
9. float  (0) 2019.03.21
8. Positioning  (0) 2019.03.21
7. display  (0) 2019.03.19

+ Recent posts

티스토리툴바