Bootstrap 에서 Grid는 반응형 페이지를 만들 경우에 사용한다.
예제 코드)
<!--bootstrap css 로딩하기-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css">
html 안에 bootstrap 을 로딩시키고
<body>
<!--container 를 만들고-->
<div class="container">
<!--container 의 width 를 100% 활용하고 싶으면 블럭요소를 단순히 작성하면 된다.-->
<h1>제목 width 100%</h1>
<p>p 요소 width 100%</p>
<!--container width 를 50% 씩 2등분해서 사용하고 싶으면 일단 row 를 만든다-->
<div class="row">
<!--col 를 2개 배치하면 각각 50% 씩 폭을 나눠 갖는다.-->
<div class="col">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tempora soluta placeat laboriosam, pariatur quidem fuga officia, voluptate qui officiis temporibus reprehenderit vero, porro unde? Aperiam iusto enim saepe non officiis.</p>
</div>
<div class="col">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi quos architecto voluptatum temporibus corporis, minima sequi omnis. Nobis adipisci laborum repellendus commodi ducimus nesciunt, quidem excepturi praesentium delectus debitis sed.</p>
</div>
</div>
<!--일정 비율 만큼 나눠 가지게 하고 싶다면 폭을 12 등분 한것중에 몇의 크기를 가지게 할지 숫자를 칼럼에 같이 조합을 하면 된다. -->
<div class="row">
<div class="col-4">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tempora soluta placeat laboriosam, pariatur quidem fuga officia, voluptate qui officiis temporibus reprehenderit vero, porro unde? Aperiam iusto enim saepe non officiis.</p>
</div>
<div class="col-8">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi quos architecto voluptatum temporibus corporis, minima sequi omnis. Nobis adipisci laborum repellendus commodi ducimus nesciunt, quidem excepturi praesentium delectus debitis sed.</p>
</div>
</div>
<div class="row">
<!--col 를 3개씩 배치-->
<div class="col-3">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tempora soluta placeat laboriosam, pariatur quidem fuga officia, voluptate qui officiis temporibus reprehenderit vero, porro unde? Aperiam iusto enim saepe non officiis.</p>
</div>
<div class="col-3">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi quos architecto voluptatum temporibus corporis, minima sequi omnis. Nobis adipisci laborum repellendus commodi ducimus nesciunt, quidem excepturi praesentium delectus debitis sed.</p>
</div>
</div>
<div class="row">
<!--일정 비율 만큼 나눠 가지게 하고 싶다면 폭을 12 등분 한것중에 몇의 크기를 가지게 할지 숫자를 칼럼에 같이 조합을 하면 된다-->
<div class="col-3">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tempora soluta placeat laboriosam, pariatur quidem fuga officia, voluptate qui officiis temporibus reprehenderit vero, porro unde? Aperiam iusto enim saepe non officiis.</p>
</div>
<!--남은 폭을 모두 가지기-->
<div class="col">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi quos architecto voluptatum temporibus corporis, minima sequi omnis. Nobis adipisci laborum repellendus commodi ducimus nesciunt, quidem excepturi praesentium delectus debitis sed.</p>
</div>
</div>
</div>
</body>
다음과 같이 코딩을 하였다.
해당 table 안에 div 요소들이 창의 크기에 맞춰서 크기가 알아서 줄어들거나 늘어난다.
예제2)
<body>
<!--container 를 만들고-->
<div class="container">
<h1>반응형 Grid 만들기</h1>
<!--
col-6 의 의미는 화면의 폭과 상관 없이 항상 6/12 크기 즉 50% 의 width 를 갖겠다는것
col-sm-6 의 의미는 조건부로 6/12 크기 즉 50% 의 width 를 갖겠다는것
sm 은 화면의 크기가 576px 이상을 의미한다.
-->
<div class="row">
<div class="col-sm-6">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto aut obcaecati aperiam eius exercitationem odit laborum commodi, ad natus quam sapiente dignissimos saepe quasi est repellat porro, explicabo accusantium quas?</p>
</div>
<div class="col-sm-6">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque enim, exercitationem fuga atque doloremque, accusantium eligendi, libero aliquid vel cumque iure ipsam aliquam ipsum alias. Distinctio iste obcaecati repellendus maiores.</p>
</div>
</div>
<div class="row">
<!--
col-sm-6 화면의 폭이 576px 이상일때 50% 의 width 를 가진다.
col-md-3 화면의 폭이 768px 이상일때 25% 의 width 를 가진다.
화면의 폭이 576px 미만일때 100 의 width 를 가진다(div 는 원래 블럭 요소 이기 때문에)
주의점)
화면의 폭이 만일 768px 이상이면 576px 이상이기도 하다
그렇지만 width 는 md가 우선시 된다.
우선순위
sm < md < lg < xl < xxl
-->
<div class="col-sm-6 col-md-3">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto aut obcaecati aperiam eius exercitationem odit laborum commodi, ad natus quam sapiente dignissimos saepe quasi est repellat porro, explicabo accusantium quas?</p>
</div>
<div class="col-sm-6 col-md-3">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque enim, exercitationem fuga atque doloremque, accusantium eligendi, libero aliquid vel cumque iure ipsam aliquam ipsum alias. Distinctio iste obcaecati repellendus maiores.</p>
</div>
<div class="col-sm-6 col-md-3">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto aut obcaecati aperiam eius exercitationem odit laborum commodi, ad natus quam sapiente dignissimos saepe quasi est repellat porro, explicabo accusantium quas?</p>
</div>
<div class="col-sm-6 col-md-3">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque enim, exercitationem fuga atque doloremque, accusantium eligendi, libero aliquid vel cumque iure ipsam aliquam ipsum alias. Distinctio iste obcaecati repellendus maiores.</p>
</div>
</div>
</div>
</body>
768px 이상일땐 4개의 div가 같은 열에 존재하지만
768px 이하로 넘어가게 된다면 한 행에 2개의 div요소가 들어간다.
576px 이하로 줄어들면 한열에 1개의 div 요소가 존재하게 된다.
'CSS' 카테고리의 다른 글
| Bootstrap Form 디자인(2) (0) | 2023.06.08 |
|---|---|
| Bootstrap Form 예제(정규 표현식 활용) (0) | 2023.06.08 |
| Bootstrap Form 디자인 (0) | 2023.05.30 |
| MediaQuery 사용 (0) | 2023.05.26 |
| Bootstrap 사용하기 (0) | 2023.05.23 |
