Simple Is Best

22. [Bootstrap] Grid 레이아웃 본문

HTML & CSS

22. [Bootstrap] Grid 레이아웃

데이터미널 2021. 7. 13. 14:29

안녕하세요. 오늘은 부트스트랩을 활용한 grid 레이아웃에 대해서 알아보겠습니다. 

오늘 기온이 35도네요... 너무 더워서 반쯤 정신이 나간채로 포스팅을 올리는 점 양해바랍니다. 

 

이전까지 우리가 레이아웃을 썼던 방법은 3가지가 있습니다. 

1. float 

2. display : inline-block

3. flexbox

 

모두 좋은 방법들입니다. 하지만 float를 쓰면 width 를 섬세하게 조정해야 한다는 점이 참 불편했었는데요. 

오늘은 부트스트랩에서 제공하는 grid 에 대해서 알아보겠습니다. 

 

Bootstrap Grid 레이아웃

grid : 사이트를 균일하게 쪼개서 레이아웃을 잡고 싶을 때 사용합니다. 

- 내부적으로 flex-box를 활용하여 만든 것이기 때문에 IE8 이하에서는 작동하지 않습니다. 

 

grid 레이아웃의 기본 틀

<div class='container mt-5'>
      <div class='row'>
           <div class='col-4'>안녕1</div>
           <div class='col-4'>안녕2</div>
           <div class='col-4'>안녕3</div>
       </div>
   </div>

GRID는 container + row + col 로 구성되어 있습니다. 

마치 테이블과 비슷한 느낌이죠? 

하나의 row는 12개의 col을 가질 수 있습니다. 

그림으로 살펴볼까요? 

이해를 위해서 그림판으로 급하게 그렸습니다. 빨간색은 row, 파랑색은 col입니다. 

3개의 요소를 나란히 배치하고 싶다면, 12개의 영역을 꽉 채울수 있을만큼 크기를 부여하면 됩니다. 

3개가 각각 4개의 col을 차지하게끔 명령을 내리면 됩니다. 

 

 <div class='col-4'>안녕1</div>

다음과 같이 column의 크기에는 col-(크기) 를 줄 수 있습니다. 위의 그림 또한 하나의 col이 4개의 영역을 차지하여 정확히 3등분 되어 가로로 배치된 것을 확인 할 수 있습니다. 


grid 를 사용하면 반응형-웹을 제작할 때, Media-Query를 사용하지 않아도 된다. 
<div class='container mt-5'>
      <div class='row'>
           <div class='col-sm-4'>안녕1</div>
           <div class='col-sm-4'>안녕2</div>
           <div class='col-sm-4'>안녕3</div>
       </div>
   </div>

'col-sm-4' : "sm 사이즈 이상일 때, 4컬럼을 차지해줘" sm은 576px을 의미합니다. 

sm은 부트스트랩에서 지정한 모바일 일때의 사이즈를 의미합니다. 

그럼 576 미만의 사이즈 일때는 세로로 다시 배치가 되겠죠? 

 

'HTML & CSS' 카테고리의 다른 글

24. [CSS] box-shadow  (0) 2021.07.14
23. [CSS] CSS 오버라이딩 (덮어 쓰기)  (0) 2021.07.13
21. [Bootstrap] Bootstrap 개요  (0) 2021.07.13
20. [CSS] z-index  (0) 2021.07.12
19. [CSS] linear-gradient  (0) 2021.07.12