반응형
반응형

CSS에 Flexbox를 부트스트랩에서 구현했습니다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    
    <title>Document</title>
    <style>
      div{
          border-color:black;
          border-style:solid;
      }
    </style>
</head>
<body>
    <div class="container d-flex" style="height:800px; border-color:red">
        <div class="p-2 bd-highlight">I'm a flexbox container!</div>      
    </div>   
</body>
</html>

d-flex는 그냥 display:flex의 특징을 갖습니다. 

 

  • .d-sm-flex
  • .d-sm-inline-flex
  • .d-md-flex
  • .d-md-inline-flex
  • .d-lg-flex
  • .d-lg-inline-flex
  • .d-xl-flex
  • .d-xl-inline-flex
  • .d-xxl-flex
  • .d-xxl-inline-flex

반응형 버전도 존재합니다.

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    
    <title>Document</title>
    <style>
      div{
          border-color:black;
          border-style:solid;
          border-width:4px
      }
    </style>
</head>
<body>
    <div class="d-flex flex-row bd-highlight mb-5" style="background-color: red;">
        <div class="p-2 bd-highlight">Flex item 1</div>
        <div class="p-2 bd-highlight">Flex item 2</div>
        <div class="p-2 bd-highlight">Flex item 3</div>
      </div>
      <div class="d-flex flex-row-reverse bd-highlight" style="background-color: blue">
        <div class="p-2 bd-highlight">Flex item 1</div>
        <div class="p-2 bd-highlight">Flex item 2</div>
        <div class="p-2 bd-highlight">Flex item 3</div>
      </div>

      <div class="d-flex flex-column bd-highlight my-5" style="border-color:green">
        <div class="p-2 bd-highlight">Flex item 1</div>
        <div class="p-2 bd-highlight">Flex item 2</div>
        <div class="p-2 bd-highlight">Flex item 3</div>
      </div>
</body>
</html>

flex-row 나 flex-column가 flex-direction:row 나 column에 해당 됩니다. 

 

  • .flex-row
  • .flex-row-reverse
  • .flex-column
  • .flex-column-reverse
  • .flex-sm-row
  • .flex-sm-row-reverse
  • .flex-sm-column
  • .flex-sm-column-reverse
  • .flex-md-row
  • .flex-md-row-reverse
  • .flex-md-column
  • .flex-md-column-reverse
  • .flex-lg-row
  • .flex-lg-row-reverse
  • .flex-lg-column
  • .flex-lg-column-reverse
  • .flex-xl-row
  • .flex-xl-row-reverse
  • .flex-xl-column
  • .flex-xl-column-reverse
  • .flex-xxl-row
  • .flex-xxl-row-reverse
  • .flex-xxl-column
  • .flex-xxl-column-reverse

반응형 또한 존재합니다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    
    <title>Document</title>
    <style>
      div{
          border-color:black;
          border-style:solid;
      }
      .bd-highlight{
        background-color: rosybrown;
      }
    </style>
</head>
<body>
    <div class="container" style="border:none;">
        <div class="d-flex justify-content-start">
            <div class="p-2 bd-highlight">Flex item 1</div>
            <div class="p-2 bd-highlight">Flex item 2</div>
            <div class="p-2 bd-highlight">Flex item 3</div>
        </div>

        <div class="d-flex justify-content-end">
            <div class="p-2 bd-highlight">Flex item 1</div>
            <div class="p-2 bd-highlight">Flex item 2</div>
            <div class="p-2 bd-highlight">Flex item 3</div>
        </div>

        <div class="d-flex justify-content-center">
            <div class="p-2 bd-highlight">Flex item 1</div>
            <div class="p-2 bd-highlight">Flex item 2</div>
            <div class="p-2 bd-highlight">Flex item 3</div>
        </div>

        <div class="d-flex justify-content-between">
            <div class="p-2 bd-highlight">Flex item 1</div>
            <div class="p-2 bd-highlight">Flex item 2</div>
            <div class="p-2 bd-highlight">Flex item 3</div>
        </div>

        <div class="d-flex justify-content-around">
            <div class="p-2 bd-highlight">Flex item 1</div>
            <div class="p-2 bd-highlight">Flex item 2</div>
            <div class="p-2 bd-highlight">Flex item 3</div>
        </div>
        
        <div class="d-flex justify-content-evenly">
            <div class="p-2 bd-highlight">Flex item 1</div>
            <div class="p-2 bd-highlight">Flex item 2</div>
            <div class="p-2 bd-highlight">Flex item 3</div>
        </div>
    </div>

      
</body>
</html>

flex박스에서 배운 거 처럼 justify-content로 자식을 정렬시킬 수 있습니다.

 

  • .justify-content-start
  • .justify-content-end
  • .justify-content-center
  • .justify-content-between
  • .justify-content-around
  • .justify-content-evenly
  • .justify-content-sm-start
  • .justify-content-sm-end
  • .justify-content-sm-center
  • .justify-content-sm-between
  • .justify-content-sm-around
  • .justify-content-sm-evenly
  • .justify-content-md-start
  • .justify-content-md-end
  • .justify-content-md-center
  • .justify-content-md-between
  • .justify-content-md-around
  • .justify-content-md-evenly
  • .justify-content-lg-start
  • .justify-content-lg-end
  • .justify-content-lg-center
  • .justify-content-lg-between
  • .justify-content-lg-around
  • .justify-content-lg-evenly
  • .justify-content-xl-start
  • .justify-content-xl-end
  • .justify-content-xl-center
  • .justify-content-xl-between
  • .justify-content-xl-around
  • .justify-content-xl-evenly
  • .justify-content-xxl-start
  • .justify-content-xxl-end
  • .justify-content-xxl-center
  • .justify-content-xxl-between
  • .justify-content-xxl-around
  • .justify-content-xxl-evenly

flex의 justify-content와 동일합니다. 반응형또한 존재합니다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    
    <title>Document</title>
    <style>
      div{
          border-color:black;
          border-style:solid;
      }
      .bd-highlight{
        background-color: rosybrown;
        border-color:none !important;
      }
    </style>
</head>
<body>
        <div class="d-flex align-items-start mb-5" style="height:100px">
            <div class="p-2 bd-highlight">Flex item 1</div>
            <div class="p-2 bd-highlight">Flex item 2</div>
            <div class="p-2 bd-highlight">Flex item 3</div>
        </div>

        <div class="d-flex align-items-end mb-5"  style="height:100px">
            <div class="p-2 bd-highlight">Flex item 1</div>
            <div class="p-2 bd-highlight">Flex item 2</div>
            <div class="p-2 bd-highlight">Flex item 3</div>
        </div>

        <div class="d-flex align-items-center mb-5"  style="height:100px">
            <div class="p-2 bd-highlight">Flex item 1</div>
            <div class="p-2 bd-highlight">Flex item 2</div>
            <div class="p-2 bd-highlight">Flex item 3</div>
        </div>
        
        <div class="d-flex align-items-baseline mb-5"  style="height:100px">
            <div class="p-2 bd-highlight">Flex item 1</div>
            <div class="p-2 bd-highlight">Flex item 2</div>
            <div class="p-2 bd-highlight">Flex item 3</div>
        </div>

        <div class="d-flex align-items-stretch" style="height:100px">
            <div class="p-2 bd-highlight">Flex item 1</div>
            <div class="p-2 bd-highlight">Flex item 2</div>
            <div class="p-2 bd-highlight">Flex item 3</div>
        </div>
      
</body>
</html>
  • .align-items-start
  • .align-items-end
  • .align-items-center
  • .align-items-baseline
  • .align-items-stretch
  • .align-items-sm-start
  • .align-items-sm-end
  • .align-items-sm-center
  • .align-items-sm-baseline
  • .align-items-sm-stretch
  • .align-items-md-start
  • .align-items-md-end
  • .align-items-md-center
  • .align-items-md-baseline
  • .align-items-md-stretch
  • .align-items-lg-start
  • .align-items-lg-end
  • .align-items-lg-center
  • .align-items-lg-baseline
  • .align-items-lg-stretch
  • .align-items-xl-start
  • .align-items-xl-end
  • .align-items-xl-center
  • .align-items-xl-baseline
  • .align-items-xl-stretch
  • .align-items-xxl-start
  • .align-items-xxl-end
  • .align-items-xxl-center
  • .align-items-xxl-baseline
  • .align-items-xxl-stretch

flex box의 align-items와 동일합니다. 반응형 또한 존재합니다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    
    <title>Document</title>
    <style>
      div{
          border-color:black;
          border-style:solid;
      }
      .bd-highlight{
        background-color: rosybrown;
        border-color:none !important;
      }
    </style>
</head>
<body>
        <div class= "container d-flex" style="height:600px;">
            <div class="align-self-start bd-highlight ">Aligned flex item</div>
            <div class="align-self-end bd-highlight">Aligned flex item1</div>
            <div class="align-self-center bd-highlight">Aligned flex item2</div>
            <div class="align-self-baseline bd-highlight">Aligned flex item3</div>
            <div class="align-self-stretch bd-highlight">Aligned flex item4</div>
        </div>
      
</body>
</html>

 

 

  • .align-self-start
  • .align-self-end
  • .align-self-center
  • .align-self-baseline
  • .align-self-stretch
  • .align-self-sm-start
  • .align-self-sm-end
  • .align-self-sm-center
  • .align-self-sm-baseline
  • .align-self-sm-stretch
  • .align-self-md-start
  • .align-self-md-end
  • .align-self-md-center
  • .align-self-md-baseline
  • .align-self-md-stretch
  • .align-self-lg-start
  • .align-self-lg-end
  • .align-self-lg-center
  • .align-self-lg-baseline
  • .align-self-lg-stretch
  • .align-self-xl-start
  • .align-self-xl-end
  • .align-self-xl-center
  • .align-self-xl-baseline
  • .align-self-xl-stretch
  • .align-self-xxl-start
  • .align-self-xxl-end
  • .align-self-xxl-center
  • .align-self-xxl-baseline
  • .align-self-xxl-stretch

flex의 align-self와 동일합니다. 반응형 또한 존재합니다.

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    
    <title>Document</title>
    <style>
      div{
          border-color:black;
          border-style:solid;
      }
      .bd-highlight{
        background-color: rosybrown;
        border-color:none !important;
      }
    </style>
</head>
<body>
    <div class="d-flex bd-highlight">
        <div class="p-2 bd-highlight">Flex item with a lot of content</div>
        <div class="p-2 flex-fill bd-highlight">Flex item</div>
        <div class="p-2 bd-highlight">Flex item</div>
      </div>
</body>
</html>

flex-fill은 inline취급된 부분에서 남은 부분을 전체 다 차지합니다.

 

  • .flex-fill
  • .flex-sm-fill
  • .flex-md-fill
  • .flex-lg-fill
  • .flex-xl-fill
  • .flex-xxl-fill

반응형도 또한 존재합니다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    
    <title>Document</title>
    <style>
      div{
          border-color:black;
          border-style:solid;
      }
      .bd-highlight{
        background-color: rosybrown;
        border-color:none !important;
      }
    </style>
</head>
<body>
    <div class="d-flex bd-highlight mb-3">
        <div class="p-2 bd-highlight">Flex item</div>
        <div class="p-2 bd-highlight">Flex item</div>
        <div class="p-2 bd-highlight">Flex item</div>
      </div>
      
      <div class="d-flex bd-highlight mb-3">
        <div class="me-auto p-2 bd-highlight">Flex item</div>
        <div class="p-2 bd-highlight">Flex item</div>
        <div class="p-2 bd-highlight">Flex item</div>   
      </div>
      
      <div class="d-flex bd-highlight mb-3">
        <div class="p-2 bd-highlight">Flex item</div>
        <div class="p-2 bd-highlight">Flex item</div>
        <div class="ms-auto p-2 bd-highlight">Flex item</div>
      </div>

      <div class="d-flex align-items-start flex-column bd-highlight mb-3" style="height: 200px;">
        <div class="mb-auto p-2 bd-highlight">Flex item</div>
        <div class="p-2 bd-highlight">Flex item</div>
        <div class="p-2 bd-highlight">Flex item</div>
      </div>
      
      <div class="d-flex align-items-end flex-column bd-highlight mb-3" style="height: 200px;">
        <div class="p-2 bd-highlight">Flex item</div>
        <div class="p-2 bd-highlight">Flex item</div>
        <div class="mt-auto p-2 bd-highlight">Flex item</div>
      </div>
</body>
</html>

me-auto의 경우 자신을 기준으로 오른쪽에 있는 요소를 전부 오른쪽으로 밀어버립니다.

ms-auto의 경우 자신을 기준으로 왼쪽에 있는 요소를 전부 왼쪽으로 밀어버립니다.

mb-auto의 경우 자신을 기준으로 오른쪽에 있는 요소를 전부 아래로 밀어버립니다.

mt-auto의 경우 자신을 기준으로 왼쪽에 있는 요소를 전부 위로 밀어버립니다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    
    <title>Document</title>
    <style>
      div{
          border-color:black;
          border-style:solid;
      }
      .bd-highlight{
        background-color: rosybrown;
        border-color:none !important;
      }
    </style>
</head>
<body>
    <div class="d-flex bd-highlight" style="height:800px">
        <div class="order-3 p-2 bd-highlight" style="background-color: red;">First flex item</div>
        <div class="order-2 p-2 bd-highlight" style="background-color: blue;">Second flex item</div>
        <div class="order-1 p-2 bd-highlight">Third flex item</div>
      </div>
</body>
</html>

order로 순서를 강제로 바꿀 수도 있습니다.

order3은 세번째 위치로 order2는 두번째 위치로 order1은 첫번째 위치로

 

  • .order-0
  • .order-1
  • .order-2
  • .order-3
  • .order-4
  • .order-5
  • .order-sm-0
  • .order-sm-1
  • .order-sm-2
  • .order-sm-3
  • .order-sm-4
  • .order-sm-5
  • .order-md-0
  • .order-md-1
  • .order-md-2
  • .order-md-3
  • .order-md-4
  • .order-md-5
  • .order-lg-0
  • .order-lg-1
  • .order-lg-2
  • .order-lg-3
  • .order-lg-4
  • .order-lg-5
  • .order-xl-0
  • .order-xl-1
  • .order-xl-2
  • .order-xl-3
  • .order-xl-4
  • .order-xl-5
  • .order-xxl-0
  • .order-xxl-1
  • .order-xxl-2
  • .order-xxl-3
  • .order-xxl-4
  • .order-xxl-5

반응형 또한 존재합니다.

 

first 와 last로 인덱스를 직접 지정 안 해주는 방법도 있습니다.

반응형

'[HTML && CSS] > [BootStrap]' 카테고리의 다른 글

[BootStrap] 부트스트랩으로 마진(margin)과 패딩(padding) 사용하기  (0) 2021.06.26
[BootStrap] 부트스트랩 container vs container-fluid  (0) 2021.06.24
[BootStrap] 부트스트랩 그리드(Grid)  (0) 2021.06.24
[BootStrap] 부트스트랩 사용법, Reference Page  (0) 2021.06.24
반응형

📝margin , padding

m : margin

p : padding

 

📝top , bottom , left , right ,x , y

t : top

b : bottom

s : left

e : right

x : x축 -> left , right

y : y축 -> top , bottom

 

📝0, 1, 2, 3, 4, 5, auto

0 : 0

1 : .25rem( font-size가 16px이면, 4px) 크기

2 : .5rem( font-size가 16px이면, 8px) 크기

3 : 1rem( font-size가 16px이면, 16px) 크기

4 : 1.5rem( font-size가 16px이면, 24px) 크기

5 : 3rem( font-size가 16px이면, 48px) 크기

auto : margin의 자동으로 세팅

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    
    <title>Document</title>
    <style>
      
    </style>
</head>
<body>
    <div class="container">
        <div class="bg-secondary">부트스트랩 margin</div>
        <div class="m-1 bg-warning"> m-1  </div>
        <div class="ml-3 bg-primary"> mx-3 </div>
        <div class="my-5 bg-success"> my-5 </div>
        <div class="mb-3 bg-success"> mb-3 </div>
        <div class="mt-5 bg-success"> mt-5 </div>
        <div class="ms-5 bg-warning"> ms-2 </div>
        <div class="me-5 bg-secondary"> me-5 </div>

        <div class="container" style="display: flex; flex-direction: column;">
            <div class ="bg-secondary m-auto">m-auto는 블록요소 중앙정렬</div>
        </div>

        <div class= "row">
            <div class="col-sm-3 bg-warning m-auto">col m-auto</div>
            <div class="col-sm-3 bg-primary m-auto">col m-auto</div>
        </div>
        

        <div class="bg-secondary">부트스트랩 padding</div>
        <div class="p-1 bg-primary"> p-1 </div>
        <div class="px-3 bg-success"> px-3 </div> 
        <div class="py-5 bg-warning"> py-5 </div> 
        <div class="pb-3 bg-success"> pb-3 </div>
        <div class="pt-5 bg-warning"> pt-5 </div>

        
    </div>


    
</body>
</html>

반응형

'[HTML && CSS] > [BootStrap]' 카테고리의 다른 글

[BootStrap] 부트스트랩 Flex  (0) 2021.06.26
[BootStrap] 부트스트랩 container vs container-fluid  (0) 2021.06.24
[BootStrap] 부트스트랩 그리드(Grid)  (0) 2021.06.24
[BootStrap] 부트스트랩 사용법, Reference Page  (0) 2021.06.24
반응형

class ="container" 입니다 여백을 가져가는 특징이 있습니다.

 

class ="container-fluid" 입니다. 여백을 덜 가져갑니다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    
    <title>Document</title>
    
</head>
<body>
    <div class= "container-fluid">
        <div>
            안녕하세요!
        </div>


    </div>
    

</body>
</html>

보통 밖에다 적어서 큰 DIV 틀을 만들어줍니다.

 

 

반응형

'[HTML && CSS] > [BootStrap]' 카테고리의 다른 글

[BootStrap] 부트스트랩 Flex  (0) 2021.06.26
[BootStrap] 부트스트랩으로 마진(margin)과 패딩(padding) 사용하기  (0) 2021.06.26
[BootStrap] 부트스트랩 그리드(Grid)  (0) 2021.06.24
[BootStrap] 부트스트랩 사용법, Reference Page  (0) 2021.06.24
반응형

 

 

이게 그리드인데요 비율입니다. DIV가 width가 100% 다 차는 성질을 가지고 있죠

 

그걸 12등분으로 나눈 것입니다. 예제를 보시죠

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    
    <title>Document</title>
    
    
    <style>
        
    </style>
</head>
<body>
    <div>
        <div class="row">
            <div class ="col-6"><img src ="img/leftBannerImg.png"> </div>
            <div class ="col-6"><img src ="img/leftBannerImg.png"></div>
        </div>
    </div>
    
</body>
</html>

 

row를 밖에 적어줘야합니다. 그리고 안에 col이 들어가있는 형태이죠

 

6등분 6등분이니까 1:1로 가져간 걸 보실 수 있습니다.

 

 

이건 그리드 속성입니다.

 

540px미만일 때 어떻게 보여줄지

720px미만일 때 어떻게 보여줄지에 대해서 적혀있습니다.

(sm의 경우 스마트폰 , md의 경우 태블릿인데 거의 md나 sm만 쓴다고 합니다.)

 

또한 row가 무엇이냐 궁금하실 수 있는데 row를 안 쓰면 Gutter width 보이시죠? 왼쪽 오른쪽 여백이 15px씩 있습니다.

그걸 없애주는 역할을 해줍니다.

 

 

간단한 예로 보자면

 

다른게 보이시죠?

 

그리고 반응형 예시입니다.

 

크기를 줄였을 때 보여지는 화면입니다 즉 반응형이 된다는게 부트스트랩의 장점이지요

 

큰 화면에선 다시 이렇게 4등분이 되어서 나옵니다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    
    <title>Document</title>
    
    
    <style>
        img{
            width:200px;
        }
    </style>
</head>
<body>
    <div>
        <div class="row">
            <div class ="col-sm-1 col-md-3"><img src ="img/leftBannerImg.png"> </div>
            <div class ="col-sm-1 col-md-3"><img src ="img/leftBannerImg.png"></div>
            <div class ="col-sm-9 col-md-3"><img src ="img/leftBannerImg.png"></div>
            <div class ="col-sm-1 col-md-3"><img src ="img/leftBannerImg.png"></div>
        </div>
    </div>
    
</body>
</html>

 

<!DOCTYPE html>
<html lang="en" class="xxl">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
 
    <style>
    
    </style>
</head>
    <div class="row">
        <div class="col-md-6 col-auto" style="background-color: red;">
            안녕하세요
        </div>
        <div class="col-md-6 col-auto" style="background-color: red;">
            안녕하세요
        </div>
    </div>
    
</body>
</html>

md 사이즈 이상일 경우 1:1 비율로 div가 나오는데 auto의 경우 그 외 내용물 크기만큼 영역을 잡아줍니다.

 

<!DOCTYPE html>
<html lang="en" class="xxl">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
 
    <style>
    
    </style>
</head>
<div class="container">
    <div class="row row-cols-4">
      <div class="col">Column</div>
      <div class="col">Column</div>
      <div class="col">Column</div>
      <div class="col">Column</div>
      <div class="col">Column</div>
      <div class="col">Column</div>
      <div class="col">Column</div>
      <div class="col">Column</div>
      <div class="col">Column</div>
      <div class="col">Column</div>
      <div class="col">Column</div>
      <div class="col">Column</div>
    </div>
  </div>
</body>
</html>

row-cols-4로 한 줄(row)에 몇개가 들어갈지를 정해줍니다.

row-cols 또한 반응형이 존재합니다 기본적으로 이걸 따르며 auto또한 존재합니다.

 

반응형

'[HTML && CSS] > [BootStrap]' 카테고리의 다른 글

[BootStrap] 부트스트랩 Flex  (0) 2021.06.26
[BootStrap] 부트스트랩으로 마진(margin)과 패딩(padding) 사용하기  (0) 2021.06.26
[BootStrap] 부트스트랩 container vs container-fluid  (0) 2021.06.24
[BootStrap] 부트스트랩 사용법, Reference Page  (0) 2021.06.24
반응형

📝부트스트랩

반응형 웹 어플리케이션 제작에 특화된 풀스택 웹 프론트엔드 프레임워크

무료로 사용 가능한 오픈 소스 (상업적 용도도 사용 가능)

 

 

이라는 특징이 있습니다. 알기 쉽게 이야기하자면 이러한 걸 만들어야한다면 원래 되게 많은 css를 써야하고 복잡합니다.

하지만 이런걸 개발하기 쉽게 만들어놓은게 부트스트랩입니다.

 

지금은 부트스트랩5까지 나왔습니다.

 

그냥 부트스트랩 검색해서 들어가면

http://bootstrapk.com/

 

부트스트랩 · 세상에서 가장 인기있는 모바일 우선이며, 반응형인 프론트엔드 프레임워크.

프리프로세서 부트스트랩은 평범한 CSS 로 제공합니다만, 그것의 소스코드는 2개의 인기있는 CSS 프리프로세서인 Less 와 Sass 를 사용합니다. 신속하게 프리컴파일된 CSS 로 시작하거나 소스를 빌드

bootstrapk.com

이 홈페이지가 나온느데 여기서는 3버전으로 나오더라고요 그래서 여기로 들어가셔서 하면 됩니다.

https://getbootstrap.com/

 

Bootstrap

The most popular HTML, CSS, and JS library in the world.

getbootstrap.com

Get started로 들어가시면 cdn방식을 이용할 수 있습니다.

 

CDN이란

Content Delivery Network의 약자인 CDN은 지리적 제약 없이 전 세계 사용자에게 빠르고

안전하게 콘텐츠를 전송할 수 있는 콘텐츠 전송 기술을 의미합니다.

CDN은 서버와 사용자 사이의 물리적인 거리를 줄여 콘텐츠 로딩에 소요되는 시간을 최소화합니다.

CDN은 각 지역에 캐시 서버(PoP, Points of presence)를 분산 배치해,

근접한 사용자의 요청에 원본 서버가 아닌 캐시 서버가 콘텐츠를 전달합니다.

예를 들어 미국에 있는 사용자가 한국에 호스팅 된 웹 사이트에 접근하는 경우

미국에 위치한 PoP 서버에서 웹사이     트 콘텐츠를 사용자에게 전송하는 방식입니다.

 

Download 들어가시면 직접 다운 받아서 경로 설정해주면 됩니다.

 

<link href ="css/bootstrap.min.css" rel="stylesheet">(예시)

 

 

https://www.w3schools.com/

 

 

W3Schools Online Web Tutorials

HTML Example:

This is a heading

This is a paragraph.

Try it Yourself CSS Example: body {   background-color: lightblue; } h1 {   color: white;   text-align: cente

 

www.w3schools.com

 

 

 

이 홈페이지는 제가 애용하는데 부트스트랩으로 사람들이 자주 쓰는 거를 미리 만들어둔 예시입니다.

 

이걸 보고 복붙과 부트스트랩에 대한 이해를 응용해 자기가 원하는 웹페이지를 깔끔하고 빠르게 만들 수 있습니다.

하지만 여기는 bs4까지만 나와서 안 되는 기능도 몇개 있고 부트스트랩 class 이름도 좀 바뀐게 있습니다.

반응형

'[HTML && CSS] > [BootStrap]' 카테고리의 다른 글

[BootStrap] 부트스트랩 Flex  (0) 2021.06.26
[BootStrap] 부트스트랩으로 마진(margin)과 패딩(padding) 사용하기  (0) 2021.06.26
[BootStrap] 부트스트랩 container vs container-fluid  (0) 2021.06.24
[BootStrap] 부트스트랩 그리드(Grid)  (0) 2021.06.24

티스토리툴바