[부트스트랩]3. 그리드 시스템

안녕하세요 HiCreate입니다!!

이번 포스팅에서는 저번 포스팅에 이어 그리드 시스템에 대해 알려드리겠습니다.

글을 시작하기전... 이 글에 사용된 참고자료는 부트스트랩 공식홈페이지에 있습니다.

www.getbootstrap.com

1. row와 col

2. 개수에 따른 크기 변경

3. 직접 크기 바꾸기

4. auto 클래스 이용

5. 멀티 로우 - w클래스

1. row와 col

우선 그리드 시스템의 중요한 것 중 하나는 row이고 이 안에서 col 이 작동합니다.

col은 최대 12까지 적용할 수 있는데 이는 row의 크기를 12개로 잘라 적용한다고 합니다.

하지만 더 쉽게 사용하려면 이런 방법을 씁니다.

	가장 작음	작음	중간	큼	가장 큼
width(크기)	auto(자동 맞춤)	540px	720px	960px	1140px
클래스 방식	col-	col-sm	col-md	col-lg	col-xl

2. 개수에 따른 크기 변경

col을 똑같은 크기로 여러개를 만들면 개수에 맞춰 크기가 변경됩니다.

<div class="row">
    <div class="col">
        first col
    </div>
    <div class="col">
        second col
    </div>
</div>
<div class="row">
    <div class="col">
        first col
    </div>
    <div class="col">
        second col
    </div>
    <div class="col">
        third col
    </div>
</div>

이렇게 하면 됩니다.

3. 직접 크기 바꾸기

이번에는 크기 지정을 해볼게요

col-6 형식으로 붙여주면 됩니다.

 
<div class="row">
    <div class="col">
        first col
    </div>
    <div class="col-6">
        second col
    </div>
    <div class="col-5">
        third col
    </div>
</div>

위의 표를 적용할 때도 똑같이 col-sm, col-md 형식으로 붙여주세요

4. auto 클래스 이용하기

auto 클래스는 꽤 자주 이용하게 되더라구요

col-md-auto 형식으로 사용하시면 됩니다.

여기서 auto를 사용하면 자동으로 크기를 맞춰주는 것 같더라구요.

5. 멀티 로우 - w클래스

w는 col을 아래쪽에도 쓸 수 있게 해줍니다.

 
<div class="row">
    <div class="col">
        first col
    </div>
    <div class="col">
        second col
    </div>
    <div class="w-100"></div>
    <div class="col">
        third col
    </div>
    <div class="col">
        fourth col
    </div>
</div>

이런 식으로 사용하시면 됩니다.

벌써 포스팅이 끝났네요.

row와 col은 굉장히 자주 이용되더라구요

그러니 잘 익히시길 바랍니다.

다음 포스팅에서는 card에 대해서 알아보면서 동시에 첫번째 튜토리얼인 로그인 페이지 개발을 해볼게요!!

감사합니다!!!!