백엔드에 대해 공부하긴 하지만 아무래도 프론트에 대한 이해가 좀 많이 부족하다보니 당장의 프로젝트 구현을 위한 공부가 필요하다고 느꼈다. 오늘은 유투브 개발자의품격 유툽 동영상을 보고 부트스트랩을 공부하고자 한다.
부트스트랩은 12 greedy system으로 구성된다.
하나의 행을 12개의 열로 나눈다는 의미다.
실제로 body에 div로 하나의 row를 선언하고 그 안에 col을 선언하면
<div class="row">
<div class="col-md-5" style="background-color: red;">
A
</div>
<div class="col-md-2" style="background-color: blue;">
B
</div>
<div class="col-md-5" style="background-color: yellow;">
C
</div>
</div>
다음과 같이 출력된다. 마지막 yellow의 md-5를 3으로 바꾸면 화면을 꽉 채우지 않고 3에 해당하는 면적만 출력된다.
md는 미디엄의 약자로 화면 크기를 특정 크기 이하로 줄이면 ABC로 나눠져 있던 행이 각자의 행으로 출력된다.
이게 무엇을 의미하냐면 특정 md 사이즈 이상일 경우에는 한 A가 특정 숫자만큼의 공간을 차지하라는 말이고 그보다 작아지면 원래 DIV의 특성대로 하나의 row를 다 차지하라는 의미이다. 설정이 sm이 되면 더 작은 화면까지 커버된다.
-반응형 웹을 위한 greedy 시스템이라고 할 수 있다.
섞어서 쓸 수도 있는데
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6" style="background-color: red;">
A
</div>
<div class="col-lg-3 col-md-4 col-sm-6" style="background-color: blue;">
B
</div>
<div class="col-lg-3 col-md-4 col-sm-12" style="background-color: yellow;">
C
</div>
</div>
이런 식으로 화면 사이즈에 맞춰서 비율을 지정해줄 수 있다.
Components에 대해 한번 얘기해보자면
Alerts는 내용을 강조하고 싶을 때
Badge는 게시판에 새 글이 뜨거나 온 메일의 갯수를 알려줄 때
Breadcrumb는 메뉴 path에 대한 경로를 만들 때
Button, Button group, Card
나는 카드 정렬할 때 div로 설정하면 화면 가로 전체를 먹으니까 세로로 정렬되기 때문에 css를 만졌었던것 같은데 영상에서는 row로 카드를 담는 div를 하나 만들고 카드에 대한 비율을 설정해주면서 가로로 정렬하는 방법을 사용했다.
<div class="row">
<div class="col-md-4">
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>Carousel은 대표 화면에서 최상단에 이미지를 넘기면서 핵심 컨텐츠를 보여주는데 보통 이용되는데 이것의 유무가 페이지의 첫 이미지를 좌우한다.
Collapse는 특정 컨텐츠에 대한 hide, show를 하는 거라고 보면된다. FAQ에서 보통 많이 사용한다.
Dropdown
split, dropup, dropright등도 존재한다.
Form에는 라디오버튼, text, 콤보박스, 체크박스 등이 있다.
form-control-lg, readonly같은 옵션들이 존재한다.
라디오버튼은 form-check-inline을 설정하면 옆으로 쌓이게 된다.
참고로 input group에 달린 버튼에 달력을 넣어주는 형태도 많이 쓰인다.. 구글링해보면 된다.
List group은 active를 주면 다음과 같이 설정할 수 있다.
마우스 커서가 올라가면 설정이 바뀌는 형식으로 설계가 가능할 것 같다.
<ul class="list-group">
<li class="list-group-item active" aria-current="true">An active item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
배지랑 같이 쓰면
다음과 같은 형식의 리스트 그룹도 사용 가능하다.
이메일이 언제 왔는지 알려주는 용도로도 사용 가능
Media list - 블로그, 뉴스 글 블럭으로 띄우는 용도로도 사용 가능
Modal - 팝업창 만들 때 사용
backdrop을 설정하면 페이지의 빈 곳을 클릭해도 모달이 안없어진다.
입력할 때 실수로 창이 안없어지게 하기 위해 사용할 수 있다.
Scrolling long content - 화면 사이즈에 맞게 모달이 설정되고 그 안에서 스크롤이 되게 하는 창
nav는 네비게이션이 화면 안일때
navbar는 네비게이션이 상단에
pagenation
popovers - 특정 컨텐츠에 대한 부가적인 설명을 하고 싶을 때, 버튼 옆에 작게 버튼을 만들어서 설명하고 싶을 때 사용
팝 오버에서 Tooltip은 커서를 올려놓기만 해도 설명이 나오기 때문에 많이 쓴다.
progress - 진행상황을 나타낼 때 사용
scrollspy 작은 창 안에서 스크롤 상황과 내용을 나타낼 때
spinners 진행중임을 나타내는 움짤.
Toast - 시스템에서 메시지나 알람을 보낼 때 쓸 수 있다.
유틸리티
Colors - 텍스트에도 색상 설정이 가능하고 백그라운드에도 줄 수 있다. gradient까지 줄 수 있다.
Display - content가 화면에 보이고 안보이고를 설정할 수 있는 부분.
디스플레이 사이즈에 따른 설정이 가능하다. 프린트 할 때 보이게 할지도 설정이 가능하다.
Interations - user-select-all 바로 복붙이 가능하게
user-select-auto 평소와 같게
user-select-none 선택이 불가능하게