일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- float : left
- bootstrap
- CSS
- hover
- setTimeout
- transform
- JQuery
- Carousel
- 이벤트 버블링
- display:none
- vw
- absolute
- animate
- EventListner
- TRANSITION
- input
- scss
- val()
- 밀리초
- sass
- togle
- position : fixed
- form
- z-index
- navbar
- margin
- css selector
- Position
- css animation
- 레이아웃
- Today
- Total
Simple Is Best
22. [Bootstrap] Grid 레이아웃 본문
안녕하세요. 오늘은 부트스트랩을 활용한 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 |