부트스트랩(Bootstrap)이란?
웹 사이트를 쉽게 디자인 할 수 있도록 도와주는 라이브러리 입니다.
✍️ 기본 준비
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
</html>부트스트랩을 사용하기 위해 CDN을 가져옵니다.
💡 CDN(Contents Delivery Netwokr) 이란 지리적으로 떨어져 있는 사용자에게 빠르게 콘텐츠를 전송하기 위해 각 지역에 서버를 분산 배치하여 사용자와 가장 가까운 서버에서 콘텐츠를 제공해 대기 시간을 줄이는 콘텐츠 전송 기술입니다.
1. Containers
Container에는 2가지 클래스가 있습니다.
1-1. container
<div class="container bg-primary text-white">
<h1>container</h1>
<p>부트스트랩 컨테이너 클래스 알아보기</p>
</div>💻 출력
기본 container class에는 좌우 여백이 존재합니다.
1-2. container-fluid
<div class="container-fluid bg-primary text-white">
<h1>container</h1>
<p>부트스트랩 컨테이너 클래스 알아보기</p>
</div>💻 출력
container-fluid class는 여백 없이 화면에 꽉 찹니다.
2. Grid System
부트스트랩의 그리드 시스템은 가로 공간을 12개의 공간으로 나누고 공간의 갯수만큼 가로사이즈를 지정합니다.
<div class="container bg-warning">
<div class="row">
<div class="col-sm-2">
coll1
</div>
<div class="col-sm-4">
coll2
</div>
coll3
<div class="col-sm-8">
</div>💻 출력
col-*-n 형식으로 사용합니다.
그 외 다양한 기능은 https://www.w3schools.com/bootstrap5/index.php 에서 확인 가능합니다.
미선이네