부트스트랩
트위터에서 시작된 오픈소스 프레임워크. 간단하게 페이지의 전체적인 틀을 짤수 있으며, 버튼, 글자, 입력폼, 효과 등 자잘한 부분들 모두 내장되어 있기 때문에 웹 페이지를 빠른 시간내에 간단히 만들수 있다. 또한 모바일이나 태블릿처럼 다양한 해상도에 따른 화면 설정을 간단히 할수 있기에 크게 사랑받는 프레임워크다.
부트스트랩을 사용하기 위해선 기존 css문법이 아닌, 내장된 부트스트랩만의 문법을 사용해야 한다. 어려울건 없으니 그때그때 필요한 기능을 공식 사이트에서 찾아서 사용하면 된다.
https://getbootstrap.com/docs/5.3/getting-started/introduction/
Get started with Bootstrap
Bootstrap is a powerful, feature-packed frontend toolkit. Build anything—from prototype to production—in minutes.
getbootstrap.com
부트스트랩4까지는 jquery를 사용했으나, jquery의 근본적인 한계와 자바스크립트의 발전으로 최신버전인 5부터는 순수 자바스크립만 사용한다.
이 글에서는 기본적인 사용법만 정리하겠다.
1. 가장 먼저 Bootstrap을 불러와야 한다.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">이건 css에 부트스트랩을 사용하기 위한 코드다.
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>첫번째 코드는 poper라고 해서 드랍아웃, 팝오버와 같은 효과를 사용하기 위해서 필요한 코드다.
두번째 코드는 js를 사용하기 위해서 필요한 코드다.
공식홈페이지의 예제는 아래와 같다.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>2. html 태그의 class속성에 원하는 부트스트랩을 적용시킨다.
부트스트랩을 이용한 레이아웃 지정
부트스트랩을 사용하면 배치에 유용하게 사용할수 있다.
부트스트랩은 화면 너비(width) 를 12칸으로 나눠 관리하며, 어떤 태그에 1/12 만큼의 너비를 부여하거나 3/12만큼의 너비를 부여하는 식으로, 비율로 레이아웃을 지정할수 있다. 소수점으로 값을 줄수는 없으며, 1보다 낮은 값을 줄 수도 없다.
col-설정값 형식의 예약어를 사용한다.
<div class="row">
<div class="col-6">col-6</div>
<div class="col-6">col-6</div> // 한줄 끝
<div class="col-4">col-4</div> // 다음줄에 이어서 한줄 안에 배치됨
<div class="col-4">col-4</div>
<div class="col-4">col-4</div>
</div>여기서 class="row"는 한줄을 의미하며, 그 하위 요소들을 한줄로 관리하라는 의미다. 만약 하위 요소에 부여한 너비가 한줄이 넘어가게 되면, 그 다음 요소는 줄바꿈을 해서 표현한다.
아래의 그림을 보면 이해가 잘 될것이다.
반응형 웹 만들기
부트스트랩은 반응형 웹을 편리하게 만들기 위해 반응 기준이 되는 해상도가 존재한다.
| Extra small | None | <576px |
| Small | sm | ≥576px |
| Medium | md | ≥768px |
| Large | lg | ≥992px |
| Extra large | xl | ≥1200px |
| Extra extra large | xxl | ≥1400px |
none < sm < md <lg < xl < xll 순으로 크기가 지정되어 있다.
부트스트랩은 지정 해상도 이상이 될때 반응하기 때문에, ex는 굳이 따로 적어주지 않아도 된다.
어떤 해상도도 지정해주지 않는다면 모든 해상도에서 동일한 화면이 나오게 되지만, 만약 어떤 해상도를 지정해 반응형 웹으로 만들면, 더 큰 해상도에 따른 반응형 웹을 만들어주지 않는 이상, 지정한 해상도 이상의 해상도에서 모든 화면은 변한 화면이 나오게 된다.
해상도 지정은 속성-해상도-설정값 과 같은 형식으로 한다.
<div class="row">
<div class="col-6 col-sm-12"> sm이상의 해상도는 모두 12/12의 비율</div>
<!-- 이상일때 한줄 차지함. 다음 코드부터 줄바꿈 -->
<div class="col-6 col-sm-12">sm이상의 해상도는 모두 12/12의 비율</div>
<!-- sm 이상일때 한줄 차지함. 다음 코드부터 줄바꿈 -->
<div class="col-4 col-lg-6">lg 이상의 해상도는 모두 6/12의 비율</div>
<div class="col-4 col-lg-6">lg 이상의 해상도는 모두 6/12의 비율</div>
<!-- lg 이상일때 한줄 차지함. 다음 코드부터 줄바꿈 -->
<div class="col-4 col-lg-6">lg 이상의 해상도는 모두 6/12의 비율</div>
</div>
반응형 웹으로 만들때는 container 예약어와 container-fluid 예약어 두가지가 존재한다.
container: 지정한 해상도가 되기 전까지는 기존 화면이 유지되다가, 해당 해상도로 바뀌면 바뀌는 방식이다.
container-fluid: flex속성처럼 해상도(화면 크기)에 따라 서서히 늘어나거나 줄어들다, 지정 해상도에 도달하면 설정한 레이아웃으로 변경된다.
만약 반응형 웹으로 만들고자 한다면 작은 화면부터 만들어야 한다. sm, lg와 같이 해상도에 따른 변화를 설정하면, 어떤 해상도도 설정하지 않은 col-12와 같은 형식의 코드는 자동적으로 sm이하에 모두 적용되기 때문이다. 해상도에 따라서 속성을 모두 지정해줄수 있으며, 두개 이상의 속성을 반응형으로 만들때, 굳이 해상도 설정이 정비례할 필요는 없다.
즉, 만약 sm과 lg일때 col 값이 변하도록 설정했는데 d의 설정값이 sm에 도달할때만 변한다고 하더라도 문제는 없다는 말이다. (d는 display를 지정하는 예약어다. d-flex 또는 d-sm-block와 같은 형식으로 지정 가능)
col값은
sm 이하일때, ( col-설정값)
sm 이상, lg이하일때 (col-sm-설정값)
lg 이상일때 (col-lg-설정값)
세가지 경우로 나뉘게 된다.
반면 d값은
sm 이하일때 (d-설정값)
sm 이상일때 (d-sm-설정값)
두가지 경우로 나뉘게 된다.
이는 아주 기본적인 사용법이고, 부트스트랩 공식 홈페이지에 가면 회원가입 폼, 이미지 슬라이드, 팝업, 버튼 등을 비롯해 다양한 기능들을 사용할수 있는 코드가 공개되어 있어서 그대로 복사해 사용할 수 있다. 아주 세련되고 편리하니 부트스트랩을 이용해 웹페이지를 만들고 싶으면 참조해보자.