...

퍼블리셔가 따로 없어서 프로젝트 진행 중에
화면 구성이 바뀌거나 초기화면을 만들거나 할 때 기본적으로
bootstrap을 다룰 수 있어야 한다고..
bootstrap은 템플릿 적용해본게 다여서 수정 생성에 대한 공부가 더 필요할 것 같다
특히 grid 부분에서 content를 나누고 배열하는 부분이 필요하기에 정리해보려 함

Grid Option

Bootstrap의 grid option은 총 6가지 기본 중단점과 사용자 지정 중단점에 맞게 조정할 수 있음

기본 중단점 ( xs, sm, md, lg, xl, xxl )

row는 화면을 12개로 나눈다 -> col-* 갯수 지정하여 이 나눈 12개 중 얼마를 차지할 지 지정

<div class="container text-center">
  <div class="row"> // 화면을 가로 12개로 나눔 
    <div class="col"> //열 한개 생성 
      1 of 3
    </div>
    <div class="col-6"> // 12개로 나눈 화면 중 6을 차지하는 열 생성 
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

네스팅

기존 열 내에 새로운 열 집합 추가
=> 중첩된 행에는 합이 최대 12개 이하인 열 집합이 포함되어야 함

  <!-- 네스팅: 기존 열 내에 새로운 열 집합 추가  => 중첩된 행에는 합이 최대 12개 이하인 열 집합이 포함되어야 함 -->
  <div class="container text-center">
    <div class="row">
        <div class="col-sm-3" style="border: solid blue;"> <!-- 노중첩 부분에 12중 3을 할당  -->
            level1: col-sm-3
        </div>
        
        <div class="col-sm-9" style="border: solid blue;"> <!-- 중첩 부분에 12중 9를 할당  -->
            <div class="row"> <!-- 9를 할당받은 부분을 다시 12로 분할 : row  -->
                <div class="col-8 col-sm-6" style="border: solid blue;"> <!-- 기본 지점에서는 12중 8차지, sm지점에서는 6차지 -->
                    level2: .col-8, .col-sm-6
                </div><!-- 기본 지점에서는 12중 4차지, sm지점에서는 6차지 -->
                <div class="col-4 col-sm-6" style="border: solid blue;"> <!-- 기본 지점에서는 12중 4차지, sm지점에서는 6차지 -->
                    level2: .col-4, .col-sm-6
                </div>
            </div>
        </div>
    </div>
  </div>
```