KDT 5th 웹개발자 입문 수업 20일차 - 2

부트스트랩

테일윈드? 도 유명(React와 쓴다고 함)

 

https://getbootstrap.com/

Bootstrap

프론트 프레임 워크로 이미 작성되어 있는 프론트 요소들을 가져다 쓰거나 반응형을 구현할 수 있음

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

 

1. 이미 만들어진 디자인 요소를 예시로 간단히 가져와서 사용 가능 -> 프론트에선 레이아웃 정도만 참고할 것

 

2. 클래스로 부트스트랩을 컨트롤 할 수 있다!

<style>
    .parent {
      padding: 50px 50px;
      display: flex;
      justify-content: center;
    }

    .child {
      border : 1px solid black;
      width: 100px;
    }
  </style>
  
  <div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
  </div>

해당 코드를 부트스트랩을 사용한다면,

<style>
    .parent {
      padding: 50px 50px;
      /* display: flex;
      justify-content: center; */
    }

    .child {
      border : 1px solid black;
      width: 100px;
    }
</style>
  
<div class="d-flex justify-content-center parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
</div>

클래스를 속성처럼 사용해줄 수 있다.

 

2-1. display: flex -> d-flex

2-2. justify-content : center -> justify-content-center

2-3. margin-top : 5 -> mt-5 (1 ~ 5 사이까지만) / margin : 3 -> m-3

2-4. padding : 5 -> p-5

2-5. text-align : center -> text-center

등등... 클래스 존재

 

 

3. Grid

3-1. container : 부트스트랩의 내용을 담는 용기 역할을 하는 div 요소

그리드를 위한 필수 요소이며 wrapping 요소이다

중첩 사용은 불가함

• container는 화면 넓이에 따라 고정폭의 넓이를 제공
  • 화면 넓이 1400px 이상 -> 넓이 1320px 로 픽스
  • 화면 넓이 1400~1200px -> 넓이 1140px
  • 화면 넓이 1200~992px -> 넓이 960px
• container-fluid는 화면 넓이를  최대한 가져가는 넓이는 제공

<div class="container" style="background-color: tomato;">container</div>
<br/>
<div class="container-fluid" style="background-color: bisque;">container-fluid</div>

그리드 레이아웃을 구성 시 반드시 .row를 먼저 배치하고 행 안에 .col-*-*을 필요한 개수만큼 배치한다.

.col-*-*의 열 안에 컨텐츠를 배치해준다.

 

3-2. row

컨테이너 내부에 배치하는 행 개념

<div class="container">
	<div class="row">
    </div>
    <div class="row">
    </div>
</div>

 

3-3. col

컨테이너 내부에 위치한 row 안에 위치하는 열의 개념

부트스트랩의 열은 기본적으로 12섹션으로 나눠지고, 이 12개의 크기를 col-* 로 지정해줄 수 있다.

col의 합산이 12개가 넘어가면 수직으로 쌓이게 된다.

 

위의 컨테이너 -sm-, -md-, ... 부분은 100%로 변하는 부분부터는 수직으로 쌓이게 된다는 의미이다.

  <div class="container">
    <div class="row">
      <div class="col-sm-4">col-4</div>
      <div class="col-sm-4">col-4</div>
      <div class="col-sm-4">col-4</div>
    </div>
  </div>

위의 코드의 col-sm-4는 576px 아래로 브라우저 사이즈가 작아지면 수직으로 쌓임을 알 수 있다.

 

 

sm : 모바일

md : 태블릿

lg ~ : PC 으로 기준을 잡아서 반응형을 구현한다.

<div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-6 col-sm-12">1</div>
        <div class="col-lg-4 col-md-6 col-sm-12">2</div>
        <div class="col-lg-4 col-md-6 col-sm-12">3</div>
        <div class="col-lg-4 col-md-6 col-sm-12">4</div>
        <div class="col-lg-4 col-md-6 col-sm-12">5</div>
        <div class="col-lg-4 col-md-6 col-sm-12">6</div>
	</div>	
</div>

해당 코드는 PC에선 3*2, 태블릿에선 2*3개로, 모바일에선 1*6개로 보이게 복합 설정을 해준 것임