0829 TIL

부트스트랩 그리드

참고: apply grid code
참고: grid.bootstrap
참고: cards.bootstrap
컨테이너, 행, 열을 사용하여 컨텐츠를 웹페이지에 어느 부분에 놓을 것인지 구획해서 표현하는 방법(???)

• container: 컨텐츠를 중앙에 놓고 가로로 채움

  container: 반응형 픽셀 너비
  container-fluid: 모든 디바이스에서 width:100% 일때
  container-md(사이즈): 유동(con) 및 픽셀 폭(xs,sm,md,lg..)의 조합일 때 사용하는 반응형 컨테이너

• row: 여러개의 열을 감쌈(12개 열/행)
  열 크기를 균일하게 적용하고 거터로 컨텐츠의 간격을 조정할 수 있음

  gutter: 행 사이의 간격 조정
  -gx- (숫자): 수평 거터
  -gy- (숫자): 수직 거터
  -g-0 : 거터 제거

칼럼 클래스

row 클래스 내부에서 사용
(container ⇨ row ⇨ column)

• col-(breakpoint)-숫자
• col-(breakpoint)-auto: 컨텐츠의 너비에 따라 열의 크기를 조정
• col-(breakpoint): 한 행을 동일한 너비로 나눔
  Additionally, Bootstrap 4 includes new auto-layout columns. These also have responsive breakpoints (col, col-sm, col-md, etc..), but don't have defined % widths. Therefore, the auto-layout columns fill equal width across the row.
• breakpoints:
  xs:0px,sm:576px,md:768px,lg:992px,xl:1200px,xxl:1400px
• container max width:
  sm:540px,md:720px,lg:960px,xl:1140px,xxl:1320px
• ❓❓❓❓순서는 상관없고 breakpoint로 큰화면용인지 작은화면 용인지 알 수 있는듯?? 생략된건 xs인것같음

<div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns are always 50% wide, on mobile and desktop -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

=>Combine the classes to use change column widths on different grid sizes. This creates a responsive layout.

<div class="col-md-3 col-sm-6">..</div>

The sm, md and lg grids will all "stack" vertically on screens/viewports less than 768 pixels. This is where the xs grid fits in. Columns that use the col-xs-* classes will not stack vertically, and continue to scale down on the smallest screens.
=>만약 중간 화면에서는 4개의 칼럼이지만 작은 화면에서는 2개의 칼럼을 이루도록 하고 싶다면, 중간 화면에서의 col-md-3과 작은 화면에서의 col-sm-6을 함께 정의하면 가능하다

<div class="container-fluid" >
            <div class="row">
                <div class="col-md-3 col-sm-6">.col-md-3 .col-sm-6</div>
                <div class="col-md-3 col-sm-6">.col-md-3 .col-sm-6</div>
                <div class="col-md-3 col-sm-6">.col-md-3 .col-sm-6</div>
                <div class="col-md-3 col-sm-6">.col-md-3 .col-sm-6</div>
            </div>
        </div>

출처: https://unikys.tistory.com/371

• 반응형 .row-cols-* 클래스
  한 행에 들어갈 수 있는 열의 수를 *에 지정???????

• .row-cols-auto:열에 자연스러운 너비를 지정

부트스트랩 카드 그룹 이미지 크기 동일하게 고정하는 방법

참고: 카드 이미지 크기

.card-img-top {
    width: 100%;
    height: 15vw;
    object-fit: cover;
}

card-deck 클래스로 감싸주면 그 안에 있는 카드들은 동일한 사이즈로 표현됨

버튼 위치 지정하는 법

• ABSOLUTE/RELATIVE POSITIONING

style = "position:absolute; left:80px; top:20px;"

• float:left/right