부트스트랩에서 그리드 시스템은 flex기반으로 만들어졌으며 다음과 같다.
하나의 row를 12개의 coulmn으로 나누고,
이 12개의 coulmn을 필요한 만큼 나눠서 사용하는 방식이다.
두 개의 영역을 3대 9로 나눈다고 가정할 때 각각 col-3, col-9로 적용해주면 된다.
부트스트랩을 이용하면 편리하고 빠르게 반응형 웹을 구현할 수 있는데,
이대로 사용하면 웹 페이지 크기가 작아졌을 때 보기가 불편할 수 있다.
해결법은 접속하는 기기의 크기나 브라우저의 넓이에 따라 breakpoint로 나눠서 사용한다.
breakpoint
- Extra small : none (<576px)
- Small : sm (>=576px)
- Medium : md (>=768px)
- Large : lg (>=992px)
- Extra large : xl (>=1200px)
- Extra extra large : xxl (>=1400px)
사용예시)
<body class="bg-dark bg-opacity-75">
<section class="container text-white">
<!--container는 가장 기본적인 반응형 레이아웃을 잡아주는 class다.-->
<div class="row vh-100 justify-content-center align-items-center">
<div class="col-md-3 col-xl-5">
<img src="KakaoTalk_20221113_192025461.jpg" alt="내 사진" class="img-fluid">
<!--img-fluid는 반응형 이미지-->
</div>
<div class="col-md-9 col-xl-5">
<!--768px미만의 화면에서는 영역이 나눠지지 않는다.
col-xl-5는 12개의 col중 10개만 사용하고 xl이상 화면에서 5:5-->
<h1 class="fw-bold text-info">이름</h1>
<p class="text-muted">웹 퍼블리셔 취준생</p>
<!--text-muted는 회색 처리-->
<p>현재 부산에서 6개월짜리 국비학원과정을 이수중입니다.<br>
과정 중 일부인 일러스트는 아직 잘 모르겠지만 HTML/CSS로 웹 페이지를 만드는 과정은 너무 재밌어요 :)<br>
하루빨리 익숙해져서 나만의 웹페이지를 만들어보는 게 단기 목표입니다.<br>
나 자신 화이팅^.~
</p>
<p class="text-muted"> e-mail: pakcam35@naver.com</p>
<a href="#" class="btn btn-outline-info mt-3 rounded-pill">프로필 보기</a>
<!--rounded-pill은 버튼을 알약모양으로 만들기-->
</div>
</div>
</section>
</body>결과물)
1. 화면크기 1200px이상(xl) 화면일 때 프로필사진과 프로필의 영역은 5:5 (12개의 col중 10개만 사용)
2. 화면크기 1200px미만~768px까지는(md) col-3 : col-9 비율
3. 화면크기 768px미만부터는 영역이 나눠지지 않고 텍스트가 사진 밑으로 내려온다.
'Study > Bootstrap' 카테고리의 다른 글
| [Bootstrap] 기본개념, 색상 적용 관련 클래스 스타일 (0) | 2023.04.05 |
|---|
