bootstrap 기초(반응형 폭 조절)

 

세계에서 가장 인기있는 HTML, CSS, JS 라이브러리인 bootstrap의 기본적인 사용법을 소개한다.

 

예시가 있다고 가정해보자.

 

ex)

<div class="col-6 col-sm-3">

<img>

</div>

 

col은 row 안에 넣어서 작성한다. (tr,td 와 비슷한 원리)

 

row = 행

col = 열

 

여기서  col 뒤에 나오는 숫자는 12칼럼으로 나눠 bootstrap.css로 작성되어있다.(ex에서는 6과 3)

 

 

예시이며 같은 방식으로 .col-12 width:100%까지 진행된다.

 

 

 

ex)에서 남은 sm은 반응형으로 만들때 쓰는 것이다. sm은 576px 이상에서만 작동하는 의미이다.

 

ex)에서 사용된 .col-sm-3 의 css

@media(min-width:576px){

    .col-sm-3{

        flex: 0 0 auto; 

        width:25%;

    }

}