-
부트스트랩 RAW , COL기타 2023. 11. 10. 09:36
기존에는 부트스트랩을 이쁜 css 작성용으로 생각했었는데,
부트스트랩의 강력함은 그리드에 있었다.https://getbootstrap.kr/docs/5.3/layout/grid/
화면의 크기에 따라 반응형으로 중단점 을 위와같이 사이즈 별로 나눠놓았고
하나의 row 에 최대 12개의 col 이 들어갈 수 있도록 레이아웃이 구성되어있다.
<div class="container text-center"> <div class="row justify-content-start"> <div class="col-4"> One of two columns </div> <div class="col-4"> One of two columns </div> </div> <div class="row justify-content-center"> <div class="col-4"> One of two columns </div> <div class="col-4"> One of two columns </div> </div> <div class="row justify-content-end"> <div class="col-4"> One of two columns </div> <div class="col-4"> One of two columns </div> </div> <div class="row justify-content-around"> <div class="col-4"> One of two columns </div> <div class="col-4"> One of two columns </div> </div> <div class="row justify-content-between"> <div class="col-4"> One of two columns </div> <div class="col-4"> One of two columns </div> </div> <div class="row justify-content-evenly"> <div class="col-4"> One of two columns </div> <div class="col-4"> One of two columns </div> </div> </div>
위와 같이, col- 뒤에 숫자를 붙임으로서 12개의 칸 중에 몇 개를 차지할 지 선택할 수 있고
col의 상위 요소에 옵션을 넣는 것으로 어떤 형태로 정렬할지 선택할 수 있다.offset- 을 사용하면 왼쪽으로 부터 해당 칸 수 만큼 공백으로 만들 수 있다.
col-md-4 의 경우, md 사이즈보다 큰 화면일 경우, 해당 요소를 raw 내에서 4칸만큼 차지하게 만들겠다는 의미이다.부트스트랩 3 기준으로, col 은 float 속성을 가지므로, 먼저 선언한 것이 왼쪽부터 쌓이게 된다.
부트스트랩 공식문서를 활용하면 유용한 class 명을 알 수 있으니 시간이 날 때 하나씩 보는 것도 좋다.
'기타' 카테고리의 다른 글
canvas로 이미지 편집하기 (0) 2023.09.21 카카오맵 중심 좌표 재설정하기 with WordPress (0) 2023.09.12 HTTP, HTTPS (0) 2023.09.07 스크래핑 시 쿠키 받아오기 (0) 2023.08.25 스크래핑 기초 (0) 2023.08.09