HTML_Bootstrap grid

▶️ Bootstrap Grid 레이아웃

Bootstrap은 웹디자인의 대 원칙 12 column 디자인을 사용하고 있다.

웹사이트를 디자인할 때 12개의 세로 선으로 쪼개면 사이트를 안정감있고 균형있게 편리하게 디자인할 수 있다는 소리인데

그래서 포토샵 켜서 웹디자인할 때 이런 12개의 가이드 라인을 그리고 디자인하는 경우가 많다.

왜 12라는 숫자를 선택했냐면 균일하게 6등분, 4등분, 3등분, 2등분하기 매우 쉬워지기 때문이다.

  <div class="row">
    <div class="col-6"> 안녕 </div>
    <div class="col-6"> 안녕 </div>
  </div>

  <div class="row">
    <div class="col-4"> 안녕 </div>
    <div class="col-8"> 안녕 </div>
  </div>

그래서 Bootstrap을 사용할 때 <div class="row"> 이걸 사용하면 div 안쪽을 정확히 12등분하게 되며, 그 안에 있는 박스들은 <div class="col-4"> 이렇게 사용해서 몇개의 column을 차지할지 명시해줘야 정확한 가로폭 사이즈 재단이 가능하다.

---

▶️ 반응형 Grid

  <div class="row">
    <div class="col-md-4"> 안녕 </div>
    <div class="col-md-4"> 안녕 </div>
    <div class="col-md-4"> 안녕 </div>
  </div>
  <div class="row">
    <div class="col-lg-6"> 안녕 </div>
    <div class="col-lg-6"> 안녕 </div>
  </div>

1. 반응형 grid를 제작하고 싶다면 col-4 중간에 sm, md, lg, xl을 붙여주면 된다. 이건 일종의 조건문인데 "(sm, md, lg, xl) 사이즈 혹은 그 이상에서만 4컬럼을 차지하게 해주십쇼" 라는 뜻이다.
2. 따라서 col-4를 조건부로 줄 수 있게 되는 것이다. md가 어떤 사이즈인지는 Bootstrap 홈페이지에 나와있다. 화면폭 768px을 뜻한다.