[css] Grid System

* Responsive Web ( 반응형 웹 )

- 웹 사이트가 출력되는 장비( 스크린 크기 ) 에 반응해 구조가 달라지는 페이지 구성 기법

- Media Query ( 특정 사이즈에 적용될 css를 구현 )를 통해 반응형 웹을 구현

- Bootstrap5 라이브러리로 구현 가능

   bootstrap : display:flex + Media Query 쉽게 반응형 웹을 만들 수 있는 라이브러리

    ( 사용 목적 )

    1> Prebuilt Component - 디자인 여력이 부족한 경우 미리 만들어져 제공되는 컴포넌트를 사용하면 최소한의 세련됨을          보장받을 수 있음

    2> Responsive Grid System - 반응형 웹 구현 기술

 

Content Delivery Network ( CDN 방식 )

 

 

gird의 기본 골격

container - row - col

> row는 기본적으로 12칸이 만들어짐

 

6칸씩 차지하는 상태

    <div class="container">
        <div class="row">
            <div class="col-6">DDD</div>
            <div class="col-6">AAA</div>
        </div>
    </div>

 

 

 

col-3

xs 부터 3칸을 차지한다는 의미

 

col-sm-4

sm 부터 4칸을 차지한다는 의미

 

    <div class="container">
        <div class="row">
            
            <div class="col-3 col-sm-9">DDD</div>
            <!-- xs부터 3칸으로 유지 -->
            <!-- sm부터 9칸으로 유지 -->
            <div class="col-9 col-sm-3">AAA</div>
            <!-- sm부터 3칸으로 유지 -->
        </div>
    </div>

 

 

브라우저 크기가 작아지면 각 컬럼이 가득 차게 하기 위해, 작은 화면에서는 각 컬럼에 col-12클래스를 지정하여

전체 너비를 차지하록 함. > 작은 화면에서는 모든 컬럼이 세로로 쌓이게 됨

    <div class="container">
        <div class="row">
            <!-- 브라우저 화면의 크기가 작아질수록 col이 커질 수록 좋음 -->
            <div class="col-12 col-sm-6 col-md-4">abc</div>
            <div class="col-12 col-sm-6 col-md-4">DDD</div>
            <div class="col-12 col-sm-6 col-md-4">AAA</div>
        </div>
    </div>

> 각 컬럼의 너비를 지정하는 클래스

col-12: xs 일때 12개의 컬럼을 차지하도록 함

col-sm-6 : sm 에서는 6개의 컬럼을 차지하도록 함

col-md-4 : md에서는 4개의 컬럼을 차지하도록 함

 

<div class="col-12 col-sm-6 col-md-4 g-0"><img src="1.jpg" alt="" class="w-100"></div>

* g-0

: 그리드의 열들 사이에 간격이 없어져서 서로 붙어있는 형태로 배치