BootStrap5(BS5) 공부하기 1
https://www.w3schools.com/bootstrap5/bootstrap_get_started.php
을 바탕으로 정리한 글입니다.
부트스트랩은 반응형 웹 디자인을 위한 무료 프레임워크 정도로 이해하면 되겠다.
부트스트랩은 두 가지 방식으로 사용이 가능하다
첫번째, 부트스트랩을 다운로드하기. 두번째, CDN을 코드에 추가하기.
부트스트랩 다운로드는 여기에서 가능하다.
CDN 추가 방식은 다음과 같다.
<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>부트스트랩은 html과 css요소를 포함하므로 html5 doctype 기재가 필요하다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Example</title>
<meta charset="utf-8">
</head>
</html>그리고 부트스트랩은 모바일 기기에 대해 반응형으로 디자인되었으므로 다음과 같은 코드를 추가한다.
<meta name="viewport" content="width=device-width, initial-scale=1">뷰포트(viewport)는 웹페이지가 사용자에게 보여지는 영역이다.
여기서 width=device-width는 페이지의 너비를 디바이스의 너비에 맞춰 설정한다.
initial-scale=1은 페이지를 처음 로드할때의 초기 확대/축소 수준을 설정하는 것이다.
부트스트랩에는 두가지 컨테이너 클래스가 있다.
1. 반응형으로 고정된 너비의 컨테이너인 .container
2. 꽉찬 너비의 컨테이너로 뷰포트의 전체 너비로 보여주는 .container-fluid
<!--클래스를 container로 작성했을 경우-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<!--이하 생략-->
위의 코드에서 class를 container-fluid로 바꾸면 아래와 같이 보여진다.
기본적으로 컨테이너에는 top, bottom 패딩은 없지만 왼쪽, 오른쪽 패딩 값이 있다.
<div class="container pt-5"></div>를 하면 top에 넓게 패딩이 더해진다. p는 패딩, t는 탑, 5는 값이다.
<div class="container p-5 my-5 border"></div>
<div class="container p-5 my-5 bg-dark text-white"></div>
<div class="container p-5 my-5 bg-primary text-white"></div>를 하면, 배경색, border, margin값까지 지정 가능하다.
.container-sm|md|lg|xl 을 통해서 컨테이너가 언제 반응형으로 작용할 지를 결정할 수 있다.
<div class="container-sm">.container-sm</div>
<div class="container-md">.container-md</div>
<div class="container-lg">.container-lg</div>
<div class="container-xl">.container-xl</div>
<div class="container-xxl">.container-xxl</div>부트스트랩에서의 Grid는 flexbox로 구축되고, 최대 12개의 열을 허용한다.
12개 열을 독립적으로 모두 사용하는 것을 원하지 않으면 그룹을 지어 사용할 수 있다.
Grid는 반응형이고, 열들은 스크린에 따라 재조정된다.
Grid에는 아래와 같이 여섯 개의 클래스가 있다.
.col-, .col-sm-, .col-md-, .col-lg-, .col-xl-, .col-xxl-
예시를 직접 보자
<div class="container-fluid mt-3">
<!--중략-->
<div class="row">
<div class="col p-3 bg-primary text-white">.col</div>
<div class="col p-3 bg-dark text-white">.col</div>
<div class="col p-3 bg-primary text-white">.col</div>
</div>
</div>이와 같이 작성했을경우 줄여도 한 개의 행으로 유지된다.
<div class="container-fluid mt-3">
<!--중략-->
<div class="row">
<div class="col-sm-3 p-3 bg-primary text-white">.col</div>
<div class="col-sm-3 p-3 bg-dark text-white">.col</div>
<div class="col-sm-3 p-3 bg-primary text-white">.col</div>
<div class="col-sm-3 p-3 bg-dark text-white">.col</div>
</div>
</div>이와 같이 작성하면 스크린이 576px보다 작아지게 되면 각 열들이 쌓여진 모양새로 나타난다.
<div class="container-fluid mt-3">
<div class="row">
<div class="col-sm-4 p-3 bg-primary text-white">.col</div>
<div class="col-sm-8 p-3 bg-dark text-white">.col</div>
</div>
</div>위는 두 개의 열이 크기가 다른 형태지만 576px보다 작아지면 같은 크기로 쌓여진 모양새로 나타난다.
col-^-&에서, ^에는 sm,md 등의 클래스를 지정하고, &에는 가져갈 열의 수를 지정하면 된다.
Author And Source
이 문제에 관하여(BootStrap5(BS5) 공부하기 1), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@l1127xpla/BootStrap5BS5-공부하기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
