Bootstrap (부트스트랩) 2. 반응형으로 만들어보자 > 컴퓨터

태그에서 class="..." 라고 지정해 주면 자동으로 반응형으로 동작하게 할 수 있습니다

예) <div class="col-md-6">md 6칸짜리 태그</div>

여기서 md 는 이 태그의 크기 범위를 나타내고 6은 그 크기의 몇 배인지 정해줍니다

태그 크기 범위는

xs (~768)

sm (768~992)

md (992~1200)

lg (1200~)

이렇게 4가지가 있습니다

그리고 몇배인지는 1부터 12배 까지 정해줄 수 있습니다

<div class="col-md-1">col-md-1</div>

<div class="col-md-1">col-md-1</div>

<div class="col-md-1">col-md-1</div>

<div class="col-md-1">col-md-1</div>

<div class="col-md-1">col-md-1</div>

<div class="col-md-1">col-md-1</div>

<div class="col-md-1">col-md-1</div>

<div class="col-md-1">col-md-1</div>

<div class="col-md-1">col-md-1</div>

<div class="col-md-1">col-md-1</div>

<div class="col-md-1">col-md-1</div>

<div class="col-md-1">col-md-1</div>

이렇게 1짜리가 12개이면 화면 가로가 md 사이즈의 범위(992~1200)에 있을 경우 가로로 가득차게 됩니다

<div class="col-md-1">col-md-1</div>

<div class="col-md-1">col-md-1</div>

<div class="col-md-1">col-md-1</div>

<div class="col-md-1">col-md-1</div>

<div class="col-md-1">col-md-1</div>

<div class="col-md-1">col-md-1</div>

<div class="col-md-6">col-md-6</div>

6은 몇배짜리인지 나타내니까 6배짜리가 하나 있어서 가로로 가득 차게 됩니다

태그의 크기는 태그안에서 여러 개를 동시에 정할 수 있는데 각 범위에 따라서 크기가 변하므로 반응형으로 동작하게 만들 수 있는 것입니다

예) <div class="col-md-4 col-sm-5 col-sx-6">반응형</div>

이렇게 적어주면

화면 가로가 922~1200 사이이면 4칸 짜리가 되고

화면 가로가 768~922 사이가 되면 5칸 짜리가 되었다가

화면 가로가 768 이하가 되면 6칸 짜리로 변하게 되는 것입니다

이것을 응용해서 예쁜 반응형 틀을 만들어 보시기 바랍니다