티스토리 뷰

WEB

[WEB] Bootstrap 활용하기 / column, breakpoints, space

Happyoon ~ 2021. 11. 22. 02:15
728x90
반응형

부트스트랩의 중요한 요소 몇가지를 살펴보자.

 

1. 열 Column의 크기

https://getbootstrap.com/docs/5.1/layout/columns/

 

Columns

Learn how to modify columns with a handful of options for alignment, ordering, and offsetting thanks to our flexbox grid system. Plus, see how to use column classes to manage widths of non-grid elements.

getbootstrap.com

 

<div class="col-5">

 

이와 같이 열 크기를 만들 수 있는데, 여기서 5가 의미하는 것은 무엇일까?

 

열은 행을 기본적으로 12등분한다.

따라서 5가 의미하는 것은, 열의 크기를 한 행의 5/12만큼의 크기로 지정하겠다는 뜻이다.

따라서, 6이면 50%의 크기를 갖겠다는 뜻이다.

2. Space

https://getbootstrap.com/docs/5.1/utilities/spacing/

 

Spacing

Bootstrap includes a wide range of shorthand responsive margin, padding, and gap utility classes to modify an element’s appearance.

getbootstrap.com

 

위의 사이트에 속성들에 대한 설명이 자세히 되어있다.

 

예시

 

px-2는 좌우의 패딩을 2단계로 하겠다는 의미이다. 

 

 

상하좌우 패딩 3단계

 

단계는 $spacer가 기준인데, 이 기준에 맞춰서 바뀐다.

default는 16px이다.

 

3. Breakpoints

https://getbootstrap.com/docs/5.1/layout/breakpoints/

 

Breakpoints

Breakpoints are customizable widths that determine how your responsive layout behaves across device or viewport sizes in Bootstrap.

getbootstrap.com

 

 

 

sm은 576px이 기준인데, 576px보다 화면의 폭이 작으면 해당 디자인이 적용되지 않는다. 

 

예시

<head>
<style>
@media(min-width:576px){
      /*
         디바이스의 폭이 최소 576px 이상일때 적용할 css 
         만일 폭이 576 미만이 되면 여기 작성된 css 는 없는 것으로 간주 된다. 
      */
      .col-sm-6{
         background-color: yellow;
      }
   }
</style>
</head>
<body>
   <div class="row">
      <div class="col-sm-6">사진1</div>
      <div class="col-sm-6">사진2</div>
   </div>
   </body>

화면(기기) 폭이 576이상일 때, 배경색을 노란색으로 지정한다.

col-sm-6이므로, 6은 열이 행에서 차지하는 크기이므로 6/12, 즉 50%를 차지한다.

전체 코드

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>index.html</title>
<link rel="stylesheet" href="css/bootstrap.css" />
<script src="js/bootstrap.bundle.min.js"></script>
<style>
   /* 디바이스의 폭과 상관 없이 항상 적용 되는 css  */
   .row{
      border: 1px solid blue;
   }
   .row > div{
      border: 1px dotted red;
   }
   
   @media(min-width:576px){
      /*
         디바이스의 폭이 최소 576px 이상일때 적용할 css 
         만일 폭이 576 미만이 되면 여기 작성된 css 는 없는 것으로 간주 된다. 
      */
      .col-sm-6{
         background-color: yellow;
      }
   }
   
   @media(min-width: 768px){
      .col-md-6{
         background-color: pink;
      }
   }
   
   @media(min-width: 992px){
      .col-lg-6{
         background-color: #00ff00;
      }
   }   
   
   
   
   .monkey{
      background-color: pink;
   }
   
   .gura{
      background-color: yellow;
   }
</style>
</head>
<body>
<div class="container">
   <h1>인덱스 페이지 입니다.</h1>
   <button class="btn btn-primary">버튼</button>
   <div class="row">
      <div class="col">칼럼1</div>
      <div class="col">칼럼2</div>
   </div>
   <div class="row">
      <div class="col">칼럼1</div>
      <div class="col">칼럼2</div>
      <div class="col">칼럼2</div>
   </div>
   <div class="row">
      <div class="col-6">칼럼1</div>
      <div class="col-6">칼럼2</div>
   </div>
   <div class="row">
      <div class="col-sm-6">사진1</div>
      <div class="col-sm-6">사진2</div>
   </div>
   <div class="row">
      <div class="col-md-6">칼럼1</div>
      <div class="col-md-6">칼럼2</div>
   </div>
   <div class="row">
      <div class="col-lg-6">칼럼1</div>
      <div class="col-lg-6">칼럼2</div>
   </div>
   <div class="row">
      <div class="col-6 col-sm-3">칼럼1</div>
      <div class="col-6 col-sm-3">칼럼2</div>
      <div class="col-6 col-sm-3">칼럼3</div>
      <div class="col-6 col-sm-3">칼럼4</div>
   </div>
   <p class="gura monkey">나의 배경색은 노랑일까? 핑크일까?</p>
   <div class="row">
      <div class="col-12 col-sm-6 col-md-3">
         <img src="images/image1.png" style="max-width:100%;"/>
      </div>
      <div class="col-12 col-sm-6 col-md-3">
         <img src="images/image2.png" style="max-width:100%;"/>
      </div>
      <div class="col-12 col-sm-6 col-md-3">
         <img src="images/image3.png" style="max-width:100%;"/>
      </div>
      <div class="col-12 col-sm-6 col-md-3">
         <img src="images/image4.png" style="max-width:100%;"/>
      </div>
   </div>
</div>   
</body>
</html>

 

 

결과

 

1) 576미만일 때 (none)

2) 576이상 768 미만일 때 (sm)

3) 768이상 992미만일 때 (md)

4) 992이상 일 때 (lg)

 

lg까지만 지정했지만 xl, xxl을 사용해서 조건을 더 추가할 수 있다.

반응형

'WEB' 카테고리의 다른 글

[Web] eclipse, Java, tomcat 설치법  (0) 2021.10.13
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
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
글 보관함