안녕하세요. 오늘은 bootstrap을 이용하여 편리하게 공간을 분배해보겠습니다.
- 완성
- bootstrap 셋팅
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
bootstrap을 쓸 수 있도록 추가해줍니다.
- grid (class 속성)
<div class="row">
<div class="col-8">col-8</div>
<div class="col-3">col-3</div>
<div class="col-1">col-1</div>
</div>
class 속성값으로 row, col을 사용합니다.
row한 줄을 12칸으로 나눠 8칸, 3칸, 1칸을 차지한다는 뜻입니다.
- border (class 속성)
<div class="row">
<div class="col-8 border border-success">col-8</div>
<div class="col-3 border-bottom border-danger">col-3</div>
<div class="col-1 border border-info border-start-0 rounded-end">col-1</div>
</div>
눈에 보이지 않으므로 테두리를 설정해봅니다.
border-success는 저 이름의 색상이 정해져있습니다. 아래 border-danger도 마찬가집니다.
아래 테두리만할지, 전체테두리인지 등을 설정해줍니다.
자세한 값은 공식홈페이지를 참고해주세요
- Color and background 속성
12칸을 나눠서 이런 예시도 만들 수 있습니다.
- 전체 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=s, initial-scale=1.0">
<title></title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="container text-center">
<div class="row">
<div class="col-8 border border-success">col-8</div>
<div class="col-3 border-bottom border-danger">col-3</div>
<div class="col-1 border border-info border-start-0 rounded-end">col-1</div>
</div>
</div>
<br>
<h2>12명의 과일 선호도</h2>
<div class="row col-8 text-bg-danger">사과 8</div>
<div class="row col-3 text-bg-warning">바나나 3</div>
<div class="row col-1 text-bg-success">수박 1</div>
</div>
</body>
다른 bootstrap을 적용해보고싶으시면 아래 공식사이트를 참고하세요
Bootstrap
Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.
getbootstrap.com
'HTML／CSS' 카테고리의 다른 글
| [HTML/CSS] bootstrap selectbox (0) | 2023.07.12 |
|---|---|
| [HTML/CSS] table contenteditable 속성 사용하기 (0) | 2023.06.24 |
| [HTML/CSS] bootstrap 레이아웃 중앙에 배치하기 (0) | 2023.06.01 |
| [HTML/CSS] ] css만으로 움직이는 배너 만들기 (0) | 2023.05.30 |
| [HTML/CSS] CSS만으로 마우스 hover시 효과 내기 (0) | 2023.05.14 |
