부트스트랩
CSS프레임워크다.
코드에 활용할수 있도록 여러사람들이 작성한 CSS.
왜 사용하는가?
뭔가를 만들기 전에 세우틑 틀 정도로 생각할수 있다.
작업속도를 높일수 있다. 없이도 만들수 있지만.
CSS를 덜 작성해도 된다.
두 개의 주요 요소
- 컴포넌트 : 앱에서 넣어서 사용할수 있는 조각들을 모아둠. (ex버튼,네비게이션바)
- 그리드 시스템: 웹사이트 레이아웃을 보조.
여기서 다양한 컴포넌트들을 찾고 문서에 부트스트랩CSS를 복사해서 넣으면 된다.
그리드 시스템은 웹사이트 레이아웃과 공간 배치를 해주고 화면 크기에 따라 기존 공간을 재배치 하는 것을 도와줌.. 많은 양의 CSS 가 미리 작성되어 있다.
부트스트랩 시작하기
컴퓨터에 다운 받고 사용해도 되고
CDN을 사용해서 시작해도 된다. CDN이란 콘텐츠 전송 네트워크 혹은 배포 네트워크. 원격으로 접근할 수 있는 스타일 시트의 호스트 버전이다. 컴퓨터에 다운받을 필요가 없다.
기존 css를 쓸때
<link rel="stylesheet" href="app.css"><head>에 이렇게 넣었다. 이 위에 부트스트랩 CDN코드를 넣는다.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/...>이렇게 하면 자기가 작성한 스타일을 부트스트랩이 원상태로 돌리거나 덮어쓰지 못하게 된다.
그 다음, 스크립트를 body닫기 태그 바로 앞에 넣어준다.
<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>부트스트랩의 대부분은 클래스를 통해 적용된다.
Container
컨테이너는 부트스트랩에서 가장 기본적인 레이아웃 요소이다.
컨테이너는 콘텐츠를 담고 여백을 설정한다.
여백을 주고 콘텐츠를 담기 위한 빠른 방법.
container-fluid
전체 너비 컨테이너. 뷰 포트 전체 너비를 차지.
container-sm
container-md
container-lg
container-xl
등 사이즈별 반응형 컨테이너.
보통은 container나 container-fluid를 쓴다.
Components
대부분의 컴포넌트들이 클래스 속성을 통해 사용된다.
<button class="btn btn-secondary btn-sm">이처럼 여러 클래스를 써서 속성을 쓴다.
부트스트랩 속성을 다 외우려고 하지마라. 사용할때마다 참고 사이트를 살펴보자.
Typography
타이포그래피는 문서 전체에 걸친 변경 사항을 알려준다.
변경된 글꼴, 정의된 전체 글꼴 크기, 배경색 등
헤딩을 쓸때 더 크고 돋보이는 헤딩을 쓰고 싶다면
<h1 class="display-2">Typography</h1>처럼 클래스에 넣어서 가능하다.
<footer class="blockquote-footer">인용문에 출처 같은걸 남기기 좋은 클래스.
가운데로 정렬하려면 text-center를 클래스에 넣어주면 된다.
<footer class="blockquote-footer text-center">이런 식으로.
이렇게 부트스트랩을 쓰면 직접할수 있는걸 더 쉽고 빠르게 할 수 있다.
Utilities
내용을 가운데 정렬하거나 색상을 바꾸거나 테두리 추가하고 디스플레이 위치 특성 변경하거나 그림자 추가하는 등의 작업을 빠르게 할 수 있다. 컴포넌트는 아니고 독립형.
colors
기본 시멘틱 색상을 클래스에 추가하면 색상이 나타난다. 배경색도 마찬가지
<div class="p-3 bg-secondary text-white">p-3크기에 bg-secondary배경색, 텍스트는 화이트
badge
레이블이나 카운트를 붙일 수 있다. (new)뱃지, 알림이나 업데이트 표시 가능.
<span class="badge">네비게이션 바에 뱃지를 넣으면 경고나 상태창 표시 할 수 있다.
alert
경고 문구 박스.
<div class="alert alert-success" role="alert">dismiss
alert창을 끌 수 있다.
<span aria-hidden="true"></span>aria접두사가 붙은 특성은 접근성이나 스크린 리더와 관련있음
<button aria-label="Close" class="close" data-dismiss="alert">경고창을 끄는 버튼
grid system
그리드 시스템을 이용하여 부트스트랩을 사용할때 콘텐츠를 배열할 수 있다. 공간 분배를 화면 크기에 따라 반응형 레이아웃으로 만든다.
그리드 시스템은 컨테이너 안에서만 작동한다. 따라서 페이지 안에 컨테이너가 최소 한개 이상은 있어야함.
<div class="row">그 다음 row 클래스를 사용해서 행을 만들어야한다.
부트스트랩의 모든 행에는 분배될 공간이 12유닛씩 있다.
그 다음 행에다 열(column)을 만들어야 한다. 주어진 행에서 분배하려는 모든 부분이 행이 된다.
몇 개의 클래스가 나올텐데 모두 col로 시작한다.
col-sm-4, col-4 이런식. 모두 열 클래스.
<div class="col-6 bg-success">행에는 12유닛이 있는데 col-6을 넣어줬으니 이 열은 딱 절반을 차지한다.
<div class="col-4">
<div class="col-8">요렇게 하면 첫번째 열과 두번째 열이 4:8 비율로 행을 차지한다. 2:8이라면 여백이 2만큼 조금 남는다.
숫자를 안넣고 그냥 col만 넣으면 알아서 동등한 비율로 나눠준다.
여러개의 col 중에 하나만 숫자를 넣어주면 그것 빼고 동등한 비율로 나눠준다.
grid options
미리 화면 크기에 대해 정의되어 있다.
<div class="col-md-3 col-xl-4">이러면 md(미디움)크기보다 클때 3 크기, xl(엑스라지)크기보다 클땐 4크기로 된다는 뜻.
이미지
<img src="" class="img-fluid">포함하고 있는 요소의 크기에 따라 이미지 크기를 조절함.
여러개 이미지가 하나의 행에 있으면 사이의 공백을 gutter라고 함. gutter를 없앨 수도있다.
helper
flexbox의 align-content, justify-content, align-items등은 부트스트랩에서도 똑같이 이용됨.
즉 부트스트랩은 flexbox기반으로 만들어져 있다.
<div class="row align-items-center">이런식으로 바로 적용할 수 있다.
align-self를 사용하여 하나의 요소만 정렬할수도 있다.
브라우저 크기 별로 다르게 설정할 수 있다.
<div class="row justify-content-left justify-content-sm-center">이렇게 하면 작을땐 좌정렬, 스몰사이즈(sm)이상에서 center정렬.
form
폼을 쉽게 만들수 있다.
form-group으로 묶은 다음 form-control로 만들수있다.
자바스크립트로 동작한다. 내용이 많아서 다 외우기보단 사용할때 홈페이지를 참고해서 하는게 낫다.
Navbar
네비게이션 바. 대표적인 컴포넌트다.
<nav class="navbar bg-light">네비게이션 바에 있는 다양한 요소들을 브라우저 크기별로 사라졌다 나타나게 반응형으로 만들기 위해 collapse를 쓴다.
<div class="collapse navbar-collapse">사라진 메뉴들은 햄버거바를 클릭하면 나오도록 할수있다.
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup">
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">이렇게 하면 밑에 id를 위에 data-target에 넣어주면 해당 버튼을 누르면 밑에 id포함된 메뉴가 나온다.
네비게이션 바 안에 있는 요소들을 container에 넣어서 정렬하거나 조절하게 할수도 있다.
네비게이션 바를 fixed-top으로 해주면 스크롤을 내려도 상단에 항상 있도록 만들 수 있다. sticky를 쓰면 내려 오면서 자연스럽게 위에 위치하도록 할수도 있다.
bootstrap icon
무료 아이콘을 쓸 수 있다.
svg 이미지로 태그를 넣으면 바로 쓸수 있다. img가 아님.
벡터 그래픽은 확대해도 깨지지 않음.
font awesome에도 무료 아이콘이 많다.
border
<span class="border-top-1 border-danger">상단 테두리 1px, 색상은 danger로.
라운드를 줄수도 있다. rounded.
그림자를 줄수도 있다. shdow
padding, margin
패딩과 마진도 class에서 간편하게 줄 수 있다.
<div class="p-0 pt-5">마진이 사방에 0이고 top만 5만큼 준다. 마진은 m.
<div class="p-sm-1">이러면 브라우저 크기가 s이상 m미만일때 1만큼 준다.
px, py x는 좌우, y는 상하만 주는것.
Display property
display유틸리티.
디스플레이 속성을 변화하고 인라인, 블록, 플렉스를 만들 수 있다.
d-none으로 요소를 숨기거나 반응형으로 만들수있다.
크기가 얼마나 커지면 보여주고 하는 식으로.
Card
카드 그리드를 만들 수 있다. 여러 조각을 하나로 합쳐 카드 형태로 나타낼 수 있다. 콘텐츠를 멋있게 표현할수 있음
Carousel
이건 슬라이드쇼 형태로 나타내준다.
어차피 다 외울수 없다. 이런게 있다는걸 알고 나중에 쓸때 찾아서 쓸수있으면 된다.
Modal
대화창 형태로 뜨는 팝업.
